/* =============================================================================
   Scala Dashboard — design tokens

   Three tiers. Components may ONLY use tier 3 (semantic). Never reference a
   tier 1 primitive directly in a component rule — that is what makes a theme
   swap a one-block change instead of a find-and-replace.

     Tier 1  primitives   raw values, theme-independent            --neutral-700
     Tier 2  scales       spacing / radius / type / motion         --space-4
     Tier 3  semantic     meaning, redefined per theme             --color-surface

   Adding a theme = redefine tier 3 under a new [data-theme] block. Nothing else.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     TIER 1 — PRIMITIVES
     Named by appearance. Theme blocks pick from these; components never do.
     --------------------------------------------------------------------- */

  /* Warm neutral ramp. Contains every grey the dashboard used before. */
  --neutral-0: #ffffff;
  --neutral-25: #faf9fb;
  --neutral-50: #f4f2f6;
  --neutral-100: #e8e4ed;
  --neutral-200: #d6d1dc;
  --neutral-300: #b9b3c0;
  --neutral-400: #9c96a3;
  --neutral-450: #918b96;
  --neutral-500: #7b7481;
  --neutral-600: #625b69;
  --neutral-700: #494151;
  --neutral-800: #362f3d;
  --neutral-850: #28232d;
  --neutral-900: #1f1b24;
  --neutral-950: #17141b;
  --neutral-1000: #0f0f10;

  /* Brand ramp. Swap these five values to rebrand the whole product. */
  --brand-100: #ffe7d8;
  --brand-300: #ffa470;
  --brand-400: #ff8b4a;
  --brand-500: #ff7a2f;
  --brand-600: #b8490c;
  --brand-700: #93390a;

  /* Status hues. Each has a strong stop (dark bg) and a deep stop (light bg). */
  --green-300: #57c878;
  --green-600: #1d8842;
  --red-300: #f25f5c;
  --red-600: #c9302c;
  --amber-300: #f59e0b;
  --amber-600: #ab6604;
  --blue-300: #aaa8ff;
  --blue-500: #6867f0;
  --blue-600: #4140c4;
  --teal-300: #32c7bd;
  --teal-600: #11837c;
  --sky-300: #8bd7ff;
  --sky-600: #0d6f9e;

  /* ---------------------------------------------------------------------
     TIER 2 — SCALES
     Theme-independent. Replaces the 21 ad-hoc spacings, 8 radii and 14 font
     sizes the stylesheet used to carry.
     --------------------------------------------------------------------- */

  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;

  /* Capped at 700. The old sheet used 800/900 on twenty elements, which left
     nothing able to read as emphasis. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights paired to each size, on a 4px grid. Unitless ratios produce
     fractional pixels at most of our sizes (13 x 1.5 = 19.5), which makes
     repeated rows round inconsistently. */
  --leading-2xs: 16px;   /* 11px */
  --leading-xs: 16px;    /* 12px */
  --leading-sm: 20px;    /* 13px */
  --leading-base: 24px;  /* 15px */
  --leading-md: 24px;    /* 16px */
  --leading-lg: 28px;    /* 20px */
  --leading-xl: 32px;    /* 24px */
  --leading-2xl: 40px;   /* 32px */
  --leading-3xl: 48px;   /* 42px */
  --leading-4xl: 64px;   /* 56px */
  /* Compact variants for single-line UI rows (nav items, menu rows, buttons). */
  --leading-ui-sm: 16px; /* 13px */
  --leading-ui-base: 18px; /* 15px */

  --tracking-wide: .08em;
  --tracking-wider: .12em;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Inline controls (chips, inputs, small buttons) share these so anything
     sitting on the same row lines up and matches height. */
  --control-font: var(--text-sm);
  --control-radius: var(--radius-sm);
  --control-padding-y: var(--space-2);
  --control-padding-x: var(--space-3);
  --control-leading: 1.25;

  --logo-height: 30px;
  --sidebar-width: 260px;
  --topbar-height: 62px;
  --motion-fast: .15s ease;
  --motion-base: .25s ease;

  /* ---------------------------------------------------------------------
     TIER 3 — SEMANTIC (dark theme, the default)
     This is the only tier components are allowed to touch.
     --------------------------------------------------------------------- */

  --color-bg: var(--neutral-950);
  --color-surface: var(--neutral-850);
  --color-surface-raised: var(--neutral-900);
  --color-surface-sunken: var(--neutral-900);
  --color-sidebar: var(--neutral-1000);

  --color-border: var(--neutral-700);
  --color-border-subtle: rgba(255, 255, 255, .08);

  --color-text: var(--neutral-0);
  --color-text-body: var(--neutral-100);
  --color-text-muted: var(--neutral-400);
  --color-text-subtle: var(--neutral-450);
  /* Sidebar group labels. Tuned against --color-sidebar, which is darker than a
     card, so it can sit dimmer than --color-text-subtle and still clear AA. */
  --color-nav-label: #817d87;

  --color-accent: var(--brand-500);
  --color-accent-hover: var(--brand-400);
  --color-accent-quiet: rgba(255, 122, 47, .45);
  --color-accent-soft: rgba(255, 122, 47, .18);
  --color-accent-wash: rgba(255, 122, 47, .06);
  /* Text placed ON the accent. Dark, not white — white on this orange is
     2.6:1 and fails WCAG AA. */
  --color-accent-contrast: var(--neutral-950);

  --color-success: var(--green-300);
  --color-success-soft: rgba(87, 200, 120, .14);
  --color-danger: var(--red-300);
  --color-danger-soft: rgba(242, 95, 92, .14);
  --color-warning: var(--amber-300);
  --color-warning-soft: rgba(245, 158, 11, .14);
  --color-info: var(--blue-300);
  --color-info-soft: rgba(104, 103, 240, .16);
  --color-accent-alt: var(--teal-300);
  --color-accent-alt-soft: rgba(50, 199, 189, .14);
  --color-link: var(--sky-300);
  --color-link-underline: rgba(139, 215, 255, .35);

  /* Elevation overlays. These flip polarity per theme — the old sheet used
     rgba(255,255,255,.0X) in 18 places, which is invisible on a light base. */
  --overlay-wash: rgba(255, 255, 255, .02);
  --overlay-subtle: rgba(255, 255, 255, .04);
  --overlay-hover: rgba(255, 255, 255, .06);
  --overlay-active: rgba(255, 255, 255, .08);

  --shadow-card: 0 18px 50px rgba(0, 0, 0, .15);
  --shadow-popover: 0 18px 50px rgba(0, 0, 0, .35);
  --shadow-drawer: -24px 0 80px rgba(0, 0, 0, .45);
  --scrim: rgba(0, 0, 0, .45);
  --topbar-bg: rgba(23, 20, 27, .92);
  /* The Scala wordmark is white on transparent, so it must be inverted on any
     light surface or it disappears entirely. */
  --logo-filter: none;

  --chart-1: var(--blue-500);
  --chart-2: #8b5cf6;
  --chart-3: var(--brand-500);
  --chart-4: var(--amber-300);
  --chart-track: rgba(255, 255, 255, .06);

  color-scheme: dark;
}

/* =============================================================================
   LIGHT THEME
   Only tier 3 is redefined. Note the overlays flip to black-based and the
   status hues drop to their deep stops so they stay legible on white.
   ========================================================================== */

:root[data-theme='light'] {
  --color-bg: var(--neutral-25);
  --color-surface: var(--neutral-0);
  --color-surface-raised: var(--neutral-0);
  --color-surface-sunken: var(--neutral-50);
  --color-sidebar: var(--neutral-50);

  --color-border: var(--neutral-200);
  --color-border-subtle: rgba(0, 0, 0, .08);

  --color-text: var(--neutral-950);
  --color-text-body: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-subtle: var(--neutral-500);
  --color-nav-label: #6f6976;

  --color-accent: var(--brand-600);
  --color-accent-hover: var(--brand-700);
  --color-accent-quiet: rgba(184, 73, 12, .45);
  --color-accent-soft: rgba(184, 73, 12, .12);
  --color-accent-wash: rgba(184, 73, 12, .05);
  --color-accent-contrast: var(--neutral-0);

  --color-success: var(--green-600);
  --color-success-soft: rgba(29, 136, 66, .12);
  --color-danger: var(--red-600);
  --color-danger-soft: rgba(201, 48, 44, .12);
  --color-warning: var(--amber-600);
  --color-warning-soft: rgba(171, 102, 4, .12);
  --color-info: var(--blue-600);
  --color-info-soft: rgba(65, 64, 196, .12);
  --color-accent-alt: var(--teal-600);
  --color-accent-alt-soft: rgba(17, 131, 124, .12);
  --color-link: var(--sky-600);
  --color-link-underline: rgba(13, 111, 158, .35);

  --overlay-wash: rgba(0, 0, 0, .015);
  --overlay-subtle: rgba(0, 0, 0, .03);
  --overlay-hover: rgba(0, 0, 0, .05);
  --overlay-active: rgba(0, 0, 0, .08);

  --shadow-card: 0 1px 2px rgba(16, 12, 20, .06), 0 8px 24px rgba(16, 12, 20, .06);
  --shadow-popover: 0 8px 32px rgba(16, 12, 20, .14);
  --shadow-drawer: -24px 0 80px rgba(16, 12, 20, .18);
  --scrim: rgba(16, 12, 20, .35);
  --topbar-bg: rgba(255, 255, 255, .92);
  --logo-filter: invert(1);

  --chart-1: var(--blue-600);
  --chart-2: #6d3fc4;
  --chart-3: var(--brand-600);
  --chart-4: var(--amber-600);
  --chart-track: rgba(0, 0, 0, .07);

  color-scheme: light;
}

/* Follow the OS when the user has not chosen explicitly. Guarded so an
   explicit data-theme="dark" always wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --color-bg: var(--neutral-25);
    --color-surface: var(--neutral-0);
    --color-surface-raised: var(--neutral-0);
    --color-surface-sunken: var(--neutral-50);
    --color-sidebar: var(--neutral-50);

    --color-border: var(--neutral-200);
    --color-border-subtle: rgba(0, 0, 0, .08);

    --color-text: var(--neutral-950);
    --color-text-body: var(--neutral-900);
    --color-text-muted: var(--neutral-600);
    --color-text-subtle: var(--neutral-500);
    --color-nav-label: #6f6976;

    --color-accent: var(--brand-600);
    --color-accent-hover: var(--brand-700);
    --color-accent-quiet: rgba(184, 73, 12, .45);
    --color-accent-soft: rgba(184, 73, 12, .12);
    --color-accent-wash: rgba(184, 73, 12, .05);
    --color-accent-contrast: var(--neutral-0);

    --color-success: var(--green-600);
    --color-success-soft: rgba(29, 136, 66, .12);
    --color-danger: var(--red-600);
    --color-danger-soft: rgba(201, 48, 44, .12);
    --color-warning: var(--amber-600);
    --color-warning-soft: rgba(171, 102, 4, .12);
    --color-info: var(--blue-600);
    --color-info-soft: rgba(65, 64, 196, .12);
    --color-accent-alt: var(--teal-600);
    --color-accent-alt-soft: rgba(17, 131, 124, .12);
    --color-link: var(--sky-600);
    --color-link-underline: rgba(13, 111, 158, .35);

    --overlay-wash: rgba(0, 0, 0, .015);
    --overlay-subtle: rgba(0, 0, 0, .03);
    --overlay-hover: rgba(0, 0, 0, .05);
    --overlay-active: rgba(0, 0, 0, .08);

    --shadow-card: 0 1px 2px rgba(16, 12, 20, .06), 0 8px 24px rgba(16, 12, 20, .06);
    --shadow-popover: 0 8px 32px rgba(16, 12, 20, .14);
    --shadow-drawer: -24px 0 80px rgba(16, 12, 20, .18);
    --scrim: rgba(16, 12, 20, .35);
    --topbar-bg: rgba(255, 255, 255, .92);
    --logo-filter: invert(1);

    --chart-1: var(--blue-600);
    --chart-2: #6d3fc4;
    --chart-3: var(--brand-600);
    --chart-4: var(--amber-600);
    --chart-track: rgba(0, 0, 0, .07);

    color-scheme: light;
  }
}

/* ---- Print --------------------------------------------------------------- */
/* Paper is white whatever theme is on screen, so the semantic tier is
   redefined once here and every rule in globals.css follows without knowing
   anything about printing. Ink over a dark surface wastes toner and reads
   badly. Neutrals only — the accent has no job on a printed report. */
@media print {
  :root, :root[data-theme='light'], :root[data-theme='dark'] {
    --color-bg: var(--neutral-0);
    --color-surface: var(--neutral-0);
    --color-surface-raised: var(--neutral-0);
    --color-surface-sunken: var(--neutral-0);
    --color-sidebar: var(--neutral-0);

    --color-border: var(--neutral-300);
    --color-border-subtle: var(--neutral-200);

    --color-text: var(--neutral-950);
    --color-text-body: var(--neutral-900);
    --color-text-muted: var(--neutral-600);
    --color-text-subtle: var(--neutral-600);

    --color-link: var(--neutral-950);
    --color-link-underline: var(--neutral-400);

    --overlay-hover: transparent;
    --overlay-active: transparent;
    --overlay-subtle: transparent;
    --overlay-wash: transparent;

    --shadow-card: none;
  }
}