/* Qizil 0.2.0: custom properties, light and dark. Generated by scripts/build.mjs from tokens/qizil.tokens.json; do not edit. */

/* Breakpoints (custom properties cannot be used in media queries, so they are listed here):
   sm 640px, md 960px, lg 1280px. Mobile first: @media (min-width: 640px) { ... }. */

:root {
  --q-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --q-font-sans: Geist, 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --q-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --q-weight-regular: 400;
  --q-weight-medium: 500;
  --q-weight-semibold: 600;
  --q-text-12: 0.75rem;
  --q-leading-12: 1.5;
  --q-tracking-12: 0;
  --q-text-13: 0.8125rem;
  --q-leading-13: 1.5;
  --q-tracking-13: 0;
  --q-text-14: 0.875rem;
  --q-leading-14: 1.5;
  --q-tracking-14: 0;
  --q-text-15: 0.9375rem;
  --q-leading-15: 1.55;
  --q-tracking-15: 0;
  --q-text-16: 1rem;
  --q-leading-16: 1.6;
  --q-tracking-16: 0;
  --q-text-17: 1.0625rem;
  --q-leading-17: 1.6;
  --q-tracking-17: 0;
  --q-text-20: 1.25rem;
  --q-leading-20: 1.5;
  --q-tracking-20: 0;
  --q-text-24: 1.5rem;
  --q-leading-24: 1.25;
  --q-tracking-24: 0;
  --q-text-30: 1.875rem;
  --q-leading-30: 1.15;
  --q-tracking-30: -0.01em;
  --q-text-38: 2.375rem;
  --q-leading-38: 1.1;
  --q-tracking-38: -0.01em;
  --q-text-44: 2.75rem;
  --q-leading-44: 1;
  --q-tracking-44: -0.02em;
  --q-text-48: 3rem;
  --q-leading-48: 1.05;
  --q-tracking-48: -0.01em;
  --q-text-64: 4rem;
  --q-leading-64: 1;
  --q-tracking-64: -0.02em;
  --q-text-72: 4.5rem;
  --q-leading-72: 1;
  --q-tracking-72: -0.02em;
  --q-text-96: 6rem;
  --q-leading-96: 0.95;
  --q-tracking-96: -0.02em;
  --q-tracking-label: 0.08em;
  --q-tracking-tag: 0.06em;
  --q-space-4: 4px;
  --q-space-8: 8px;
  --q-space-12: 12px;
  --q-space-16: 16px;
  --q-space-20: 20px;
  --q-space-24: 24px;
  --q-space-32: 32px;
  --q-space-40: 40px;
  --q-space-48: 48px;
  --q-space-64: 64px;
  --q-space-96: 96px;
  --q-radius-chip: 4px;
  --q-radius-control: 8px;
  --q-radius-card: 12px;
  --q-radius-full: 999px;
  --q-line-hairline: 1px;
  --q-line-accent: 2px;
  --q-duration: 160ms;
  --q-ease: cubic-bezier(.2, .8, .2, 1);
  --q-prose: 680px;
  --q-wide: 960px;
  --q-page-pad: 20px;
  --q-z-base: 0;
  --q-z-sticky: 100;
  --q-z-dropdown: 200;
  --q-z-overlay: 300;
  --q-z-dialog: 310;
  --q-z-toast: 400;
  --q-z-tooltip: 500;
  --q-icon-stroke: 1.5;
  --q-icon-sm: 14px;
  --q-icon-md: 16px;
  --q-icon-lg: 20px;
  --q-icon-xl: 24px;
  --q-control-h: 40px;
  --q-control-px: 16px;
  --q-control-px-tight: 12px;
  --q-control-font: 0.9375rem;
  --q-control-gap: 8px;
  --q-icon-btn: 32px;
  --q-row-py: 12px;
  --q-cell-px: 12px;
  --q-menu-item-h: 36px;
  --q-tab-h: 44px;
  --q-stack-gap: 16px;
  --q-body-font: 1.0625rem;
}

@media (min-width: 640px) {
  :root {
    --q-page-pad: 24px;
  }
}

/* Light is the default theme. [data-theme="light"] also re-applies it inside a dark subtree. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --q-bg: #FFFFFF;
  --q-surface: #F6F5F4;
  --q-raised: #FFFFFF;
  --q-hover: #F6F5F4;
  --q-fg: #111111;
  --q-muted: #6B6763;
  --q-border: #E6E4E1;
  --q-border-strong: #8C8782;
  --q-accent: #C8102E;
  --q-accent-hover: #A30D25;
  --q-accent-soft: #FCE8EC;
  --q-on-accent: #FFFFFF;
  --q-danger: #C8102E;
  --q-danger-hover: #A30D25;
  --q-danger-soft: #FCE8EC;
  --q-success: #1F7A4D;
  --q-warning: #8A5A0B;
  --q-info: #2F5FD0;
  --q-overlay: rgba(17, 17, 17, 0.32);
  --q-chart-1: #2A6FD6;
  --q-chart-2: #B86E00;
  --q-chart-3: #0F8A78;
  --q-chart-4: #6E4AD6;
  --q-chart-5: #3D8A1F;
  --q-chart-6: #B0408F;
  --q-chart-7: #D05A1A;
  --q-chart-8: #1784B0;
  --q-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --q-bg: #0C0C0C;
  --q-surface: #161616;
  --q-raised: #161616;
  --q-hover: #222222;
  --q-fg: #EDEDED;
  --q-muted: #9C9A96;
  --q-border: #282828;
  --q-border-strong: #6F6C68;
  --q-accent: #F5455F;
  --q-accent-hover: #FF6B84;
  --q-accent-soft: #2A1218;
  --q-on-accent: #0C0C0C;
  --q-danger: #F5455F;
  --q-danger-hover: #FF6B84;
  --q-danger-soft: #2A1218;
  --q-success: #4CC38A;
  --q-warning: #E2B33C;
  --q-info: #7AA2F7;
  --q-overlay: rgba(0, 0, 0, 0.64);
  --q-chart-1: #4A8CF0;
  --q-chart-2: #BD8000;
  --q-chart-3: #1FA08C;
  --q-chart-4: #9077EA;
  --q-chart-5: #4F9E2C;
  --q-chart-6: #D062AD;
  --q-chart-7: #E0702E;
  --q-chart-8: #2C9CCC;
  --q-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.48);
}

/* Follow the operating system unless the page chose a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --q-bg: #0C0C0C;
    --q-surface: #161616;
    --q-raised: #161616;
    --q-hover: #222222;
    --q-fg: #EDEDED;
    --q-muted: #9C9A96;
    --q-border: #282828;
    --q-border-strong: #6F6C68;
    --q-accent: #F5455F;
    --q-accent-hover: #FF6B84;
    --q-accent-soft: #2A1218;
    --q-on-accent: #0C0C0C;
    --q-danger: #F5455F;
    --q-danger-hover: #FF6B84;
    --q-danger-soft: #2A1218;
    --q-success: #4CC38A;
    --q-warning: #E2B33C;
    --q-info: #7AA2F7;
    --q-overlay: rgba(0, 0, 0, 0.64);
    --q-chart-1: #4A8CF0;
    --q-chart-2: #BD8000;
    --q-chart-3: #1FA08C;
    --q-chart-4: #9077EA;
    --q-chart-5: #4F9E2C;
    --q-chart-6: #D062AD;
    --q-chart-7: #E0702E;
    --q-chart-8: #2C9CCC;
    --q-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.48);
  }
}

/* Compact density for dense app surfaces (InfraCanvas board, tables, toolbars). */
[data-density="compact"],
.q-compact {
  --q-control-h: 32px;
  --q-control-px: 12px;
  --q-control-px-tight: 8px;
  --q-control-font: 0.875rem;
  --q-control-gap: 8px;
  --q-icon-btn: 28px;
  --q-row-py: 4px;
  --q-cell-px: 8px;
  --q-menu-item-h: 28px;
  --q-tab-h: 36px;
  --q-stack-gap: 8px;
  --q-body-font: 0.875rem;
}

[data-density="default"] {
  --q-control-h: 40px;
  --q-control-px: 16px;
  --q-control-px-tight: 12px;
  --q-control-font: 0.9375rem;
  --q-control-gap: 8px;
  --q-icon-btn: 32px;
  --q-row-py: 12px;
  --q-cell-px: 12px;
  --q-menu-item-h: 36px;
  --q-tab-h: 44px;
  --q-stack-gap: 16px;
  --q-body-font: 1.0625rem;
}