/* ─── COSMO DESIGN SYSTEM — TOKENS ────────────────────────────────────────
   Single source of truth for all CSS custom properties.
   Both index.html (design system docs) and every product screen link here.
   To change a token: edit once here, all files update automatically.
 ─────────────────────────────────────────────────────────────────────────── */

/* ─── THEME PLATFORM ──────────────────────────────────────────────────────
   :root below defines the DEFAULT (light) theme. Every [data-theme="X"]
   block need only override the tokens listed here. Fixed tokens (typography,
   spacing, radius, motion, elevation) are NOT overridden — they are
   identical across all themes.

   THEME-AWARE TOKENS — every new theme MUST override all of these:
   ─────────────────────────────────────────────────────────────────
   Palette primitives (overridden when palette values appear as bg segments):
     --cream-50, --cream-100, --cream-200, --cream-300, --cream-400
     --ink-900, --ink-800, --ink-700, --ink-600, --ink-500,
     --ink-400, --ink-300, --ink-200
     --orange-600, --orange-500, --orange-400, --orange-100, --orange-50
     --green-600, --green-500, --green-100
     --amber-600, --amber-500, --amber-100
     --red-600, --red-500, --red-100
     --build-600, --build-500, --build-100

   Semantic surface tokens (required in every theme):
     --bg-app, --bg-panel, --bg-raised, --bg-sunken
     --line, --line-strong

   Semantic text tokens (required in every theme):
     --ink, --ink-soft, --ink-muted

   Extended neutral aliases (derived; override if needed):
     --ink-100, --ink-50, --white

   Accent tokens (required in every theme):
     --accent, --accent-dark, --accent-soft, --accent-wash

   Role colors — workflow actors (required in every theme):
     --role-pg, --role-pg-bg, --role-pg-b
     --role-tl, --role-tl-bg, --role-tl-b
     --role-aud, --role-aud-bg, --role-aud-b
     --role-sys, --role-sys-bg, --role-sys-b
     --role-cli, --role-cli-bg, --role-cli-b

   Status semantic tokens (required in every theme):
     --s-on-track, --s-on-track-bg
     --s-at-risk, --s-at-risk-bg
     --s-behind, --s-behind-bg
     --s-no-start, --s-no-start-bg

   FIXED TOKENS (never override across themes):
     Typography: --font-display, --font-ui, --font-mono,
                 --text-xs … --text-3xl
     Spacing:    --space-1 … --space-20
     Radius:     --radius-xs … --radius-full
     Motion:     --ease-out, --dur-fast, --dur-med, --dur-slow
     Elevation:  --shadow-xs … --shadow-lg  (shadow colors are near-black;
                 acceptable as-is in dark mode — reduce opacity if needed)
 ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette — warm cream surfaces */
  --cream-50:  oklch(98.2% 0.010 78);
  --cream-100: oklch(96.0% 0.013 78);
  --cream-200: oklch(93.2% 0.018 78);
  --cream-300: oklch(87.5% 0.026 78);
  --cream-400: oklch(78.8% 0.033 78);

  /* Palette — warm ink scale */
  --ink-900: oklch(12.0% 0.008 75);
  --ink-800: oklch(18.5% 0.009 75);
  --ink-700: oklch(25.8% 0.010 75);
  --ink-600: oklch(39.5% 0.011 75);
  --ink-500: oklch(51.8% 0.010 75);
  --ink-400: oklch(62.5% 0.009 75);
  --ink-300: oklch(73.5% 0.008 75);
  --ink-200: oklch(83.8% 0.010 75);

  /* Palette — orange accent */
  --orange-600: oklch(51.5% 0.175 42);
  --orange-500: oklch(57.2% 0.194 42);
  --orange-400: oklch(64.8% 0.165 47);
  --orange-100: oklch(92.0% 0.058 55);
  --orange-50:  oklch(96.5% 0.028 62);

  /* Status palettes */
  --green-600:  oklch(47.2% 0.138 154);
  --green-500:  oklch(53.8% 0.148 152);
  --green-100:  oklch(93.5% 0.050 150);
  --amber-600:  oklch(65.0% 0.158 72);
  --amber-500:  oklch(71.5% 0.168 68);
  --amber-100:  oklch(94.0% 0.058 82);
  --red-600:    oklch(49.8% 0.195 24);
  --red-500:    oklch(55.2% 0.200 24);
  --red-100:    oklch(93.8% 0.058 20);

  /* Build phase palette — machine processing stages (cool slate, hue 228°) */
  --build-600: oklch(44% 0.12 228);
  --build-500: oklch(53% 0.14 228);
  --build-100: oklch(92% 0.028 228);

  /* Semantic surface tokens */
  --bg-app:      var(--cream-100);
  --bg-panel:    var(--cream-50);
  --bg-raised:   oklch(99.2% 0.005 78);
  --bg-sunken:   var(--cream-200);
  --line:        oklch(89.0% 0.022 78);
  --line-strong: oklch(84.0% 0.028 78);

  /* Semantic text tokens */
  --ink:       var(--ink-900);
  --ink-soft:  var(--ink-500);
  --ink-muted: var(--ink-400);

  /* Extended neutral aliases */
  --ink-100: var(--line);
  --ink-50:  var(--bg-app);
  --white:   var(--bg-raised);

  /* Accent tokens */
  --accent:      var(--orange-500);
  --accent-dark: var(--orange-600);
  --accent-soft: var(--orange-100);
  --accent-wash: var(--orange-50);

  /* Role colors — workflow actors */
  --role-pg:      oklch(41% 0.23 285);
  --role-pg-bg:   oklch(97% 0.015 285);
  --role-pg-b:    oklch(88% 0.06 285);
  --role-tl:      oklch(49% 0.14 55);
  --role-tl-bg:   oklch(98% 0.020 70);
  --role-tl-b:    oklch(91% 0.09 80);
  --role-aud:     oklch(47% 0.11 178);
  --role-aud-bg:  oklch(98% 0.015 175);
  --role-aud-b:   oklch(91% 0.06 168);
  --role-sys:     oklch(43% 0.22 256);
  --role-sys-bg:  oklch(97% 0.020 255);
  --role-sys-b:   oklch(88% 0.07 255);
  --role-cli:     oklch(40% 0.19 350);
  --role-cli-bg:  oklch(97% 0.015 350);
  --role-cli-b:   oklch(88% 0.055 350);

  /* Status semantic tokens */
  --s-on-track:    var(--green-500);
  --s-on-track-bg: var(--green-100);
  --s-at-risk:     var(--amber-600);
  --s-at-risk-bg:  var(--amber-100);
  --s-behind:      var(--red-500);
  --s-behind-bg:   var(--red-100);
  --s-no-start:    var(--ink-400);
  --s-no-start-bg: var(--cream-200);

  /* Typography */
  --font-display: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Red Hat Text', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Rubik', ui-sans-serif, system-ui, sans-serif;

  /* Type scale — fixed px for app UI (no fluid sizing in dashboards) */
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Spacing — 4pt scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med:  360ms;
  --dur-slow: 560ms;

  /* Elevation */
  --shadow-xs: 0 1px 0 oklch(12% 0.008 75 / 0.04), 0 1px 2px oklch(12% 0.008 75 / 0.04);
  --shadow-sm: 0 1px 0 oklch(12% 0.008 75 / 0.04), 0 2px 4px oklch(12% 0.008 75 / 0.05);
  --shadow-md: 0 2px 4px oklch(12% 0.008 75 / 0.04), 0 8px 24px -8px oklch(12% 0.008 75 / 0.08);
  --shadow-lg: 0 8px 16px oklch(12% 0.008 75 / 0.06), 0 24px 56px -20px oklch(12% 0.008 75 / 0.18);
}

/* ─── THEME: DARK ─────────────────────────────────────────────────────────
   Warm, low-contrast dark. Not pure black — surfaces sit at a deep warm
   charcoal tinted toward hue 75° (same ink hue as light mode). Orange accent
   stays vibrant but its soft washes become dark counterparts. Status palette
   foreground colors stay near their light-mode hue (green/amber/red remain
   readable), only backgrounds darken. Role colors dim slightly but keep their
   hue identity so actors remain distinguishable.

   Proven values sourced from screens/prototypes/air.html inline overrides.
 ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Surfaces — deep warm charcoal, not pure black */
  --bg-app:    oklch(13%   0.008 75);
  --bg-panel:  oklch(17%   0.008 75);
  --bg-raised: oklch(21%   0.009 75);
  --bg-sunken: oklch(9.5%  0.007 75);

  /* Borders */
  --line:        oklch(24%   0.010 75);
  --line-strong: oklch(31%   0.011 75);

  /* Text — warm near-white, not pure white */
  --ink:       oklch(95%   0.012 78);
  --ink-soft:  oklch(67%   0.010 75);
  --ink-muted: oklch(54%   0.009 75);

  /* Ink scale — adjusted for dark surface */
  --ink-900: oklch(95%   0.012 78);
  --ink-800: oklch(88%   0.010 78);
  --ink-700: oklch(80%   0.009 77);
  --ink-600: oklch(70%   0.009 76);
  --ink-500: oklch(60%   0.009 75);
  --ink-400: oklch(50%   0.008 75);
  --ink-300: oklch(40%   0.008 75);
  --ink-200: oklch(28%   0.009 75);

  /* Cream palette — dark counterparts (used as pipeline segment bg) */
  --cream-50:  oklch(21%   0.008 75);
  --cream-100: oklch(17%   0.008 75);
  --cream-200: oklch(14%   0.008 75);
  --cream-300: oklch(22%   0.009 75);
  --cream-400: oklch(28%   0.012 78);

  /* Orange palette — foreground stays vivid, backgrounds darken */
  --orange-600: oklch(58%   0.175 42);
  --orange-500: oklch(64%   0.194 42);
  --orange-400: oklch(44%   0.115 47);
  --orange-100: oklch(26%   0.048 42);
  --orange-50:  oklch(19%   0.028 42);

  /* Accent tokens */
  --accent:      var(--orange-500);
  --accent-dark: var(--orange-600);
  --accent-soft: var(--orange-100);
  --accent-wash: var(--orange-50);

  /* Status palettes — foreground keeps hue, backgrounds darken */
  --green-600:  oklch(56%   0.138 154);
  --green-500:  oklch(62%   0.148 152);
  --green-100:  oklch(18%   0.030 152);
  --amber-600:  oklch(72%   0.158 72);
  --amber-500:  oklch(38%   0.100 68);
  --amber-100:  oklch(22%   0.040 75);
  --red-600:    oklch(58%   0.195 24);
  --red-500:    oklch(63%   0.200 24);
  --red-100:    oklch(18%   0.040 24);

  /* Build phase — dim backgrounds, keep hue */
  --build-600: oklch(54%   0.12 228);
  --build-500: oklch(63%   0.14 228);
  --build-100: oklch(19%   0.025 228);

  /* Extended neutral aliases */
  --ink-100: var(--line);
  --ink-50:  var(--bg-app);
  --white:   var(--bg-raised);

  /* Role colors — keep hue identity, reduce bg brightness */
  --role-pg:      oklch(62%   0.20 285);
  --role-pg-bg:   oklch(18%   0.030 285);
  --role-pg-b:    oklch(30%   0.07 285);
  --role-tl:      oklch(68%   0.12 55);
  --role-tl-bg:   oklch(18%   0.025 70);
  --role-tl-b:    oklch(28%   0.06 80);
  --role-aud:     oklch(62%   0.10 178);
  --role-aud-bg:  oklch(17%   0.020 175);
  --role-aud-b:   oklch(27%   0.05 168);
  --role-sys:     oklch(63%   0.18 256);
  --role-sys-bg:  oklch(17%   0.025 255);
  --role-sys-b:   oklch(27%   0.06 255);
  --role-cli:     oklch(62%   0.16 350);
  --role-cli-bg:  oklch(17%   0.020 350);
  --role-cli-b:   oklch(27%   0.05 350);

  /* Status semantic tokens */
  --s-on-track:    var(--green-500);
  --s-on-track-bg: var(--green-100);
  --s-at-risk:     var(--amber-600);
  --s-at-risk-bg:  var(--amber-100);
  --s-behind:      var(--red-500);
  --s-behind-bg:   var(--red-100);
  --s-no-start:    var(--ink-400);
  --s-no-start-bg: oklch(22%   0.008 75);
}

/* ─── THEME: WIREFRAME ────────────────────────────────────────────────────
   Philosophy: strip all color signal. Reviewers should focus on structure,
   hierarchy, and interaction flow — not on "why is this orange vs green?"

   Rules applied:
   - All brand/accent colors (orange) collapse to mid-ink (ink-500 range).
     Active states become dark ink fills rather than accent fills.
   - All status colors (green, amber, red, build) collapse to the ink scale.
     "On Track" uses a medium-light ink; "Behind" uses a darker ink — enough
     contrast to distinguish states without any hue cues.
   - Backgrounds remain near the existing cream/light range. This keeps the
     wireframe feeling like Cosmo's palette, not a generic white sheet.
   - Borders increase slightly in contrast (line-strong becomes more visible)
     so structure reads clearly without color.
   - Role colors all collapse to ink — reviewers see actor type, not color.
   - Typography is completely unchanged. Barlow/Red Hat Text/Rubik voices
     are the Cosmo voice; preserving them keeps the wireframe recognizable.
   - Status backgrounds become light cream tints; foreground text uses
     ink-scale steps differentiated by lightness, not hue.
 ─────────────────────────────────────────────────────────────────────────── */
[data-theme="wireframe"] {
  /* Surfaces — stay near light cream range */
  --bg-app:    oklch(94%   0.010 78);
  --bg-panel:  oklch(97%   0.008 78);
  --bg-raised: oklch(99%   0.004 78);
  --bg-sunken: oklch(91%   0.014 78);

  /* Borders — slightly more contrast for structural clarity */
  --line:        oklch(82%   0.018 78);
  --line-strong: oklch(72%   0.018 78);

  /* Text — same warm ink, unchanged */
  --ink:       oklch(12.0% 0.008 75);
  --ink-soft:  oklch(51.8% 0.010 75);
  --ink-muted: oklch(62.5% 0.009 75);

  /* Ink scale — unchanged (all tokens still available) */
  --ink-900: oklch(12.0% 0.008 75);
  --ink-800: oklch(18.5% 0.009 75);
  --ink-700: oklch(25.8% 0.010 75);
  --ink-600: oklch(39.5% 0.011 75);
  --ink-500: oklch(51.8% 0.010 75);
  --ink-400: oklch(62.5% 0.009 75);
  --ink-300: oklch(73.5% 0.008 75);
  --ink-200: oklch(83.8% 0.010 75);

  /* Cream palette — unchanged */
  --cream-50:  oklch(98.2% 0.010 78);
  --cream-100: oklch(96.0% 0.013 78);
  --cream-200: oklch(93.2% 0.018 78);
  --cream-300: oklch(87.5% 0.026 78);
  --cream-400: oklch(78.8% 0.033 78);

  /* Orange → collapses to ink-500ish; no hue */
  --orange-600: oklch(40%   0.008 75);
  --orange-500: oklch(50%   0.008 75);
  --orange-400: oklch(58%   0.009 75);
  --orange-100: oklch(88%   0.010 78);
  --orange-50:  oklch(93%   0.010 78);

  /* Accent → neutral ink; no orange signal */
  --accent:      oklch(45%   0.008 75);
  --accent-dark: oklch(35%   0.008 75);
  --accent-soft: oklch(85%   0.010 78);
  --accent-wash: oklch(92%   0.010 78);

  /* Green → ink-400ish (on-track = lighter ink) */
  --green-600:  oklch(36%   0.008 75);
  --green-500:  oklch(44%   0.008 75);
  --green-100:  oklch(90%   0.010 78);

  /* Amber → ink-400ish (at-risk = same range) */
  --amber-600:  oklch(48%   0.009 75);
  --amber-500:  oklch(55%   0.009 75);
  --amber-100:  oklch(89%   0.010 78);

  /* Red → ink-600ish (behind = darker ink, most urgent) */
  --red-600:    oklch(28%   0.008 75);
  --red-500:    oklch(33%   0.008 75);
  --red-100:    oklch(87%   0.010 78);

  /* Build phase → ink (machine stages, no cool-blue signal) */
  --build-600: oklch(42%   0.008 75);
  --build-500: oklch(52%   0.008 75);
  --build-100: oklch(88%   0.010 78);

  /* Extended neutral aliases */
  --ink-100: var(--line);
  --ink-50:  var(--bg-app);
  --white:   var(--bg-raised);

  /* Role colors → all collapse to ink scale; use lightness to distinguish */
  --role-pg:      oklch(40%   0.008 75);
  --role-pg-bg:   oklch(92%   0.010 78);
  --role-pg-b:    oklch(80%   0.010 78);
  --role-tl:      oklch(45%   0.008 75);
  --role-tl-bg:   oklch(93%   0.010 78);
  --role-tl-b:    oklch(82%   0.010 78);
  --role-aud:     oklch(50%   0.008 75);
  --role-aud-bg:  oklch(93%   0.010 78);
  --role-aud-b:   oklch(81%   0.010 78);
  --role-sys:     oklch(38%   0.008 75);
  --role-sys-bg:  oklch(91%   0.010 78);
  --role-sys-b:   oklch(79%   0.010 78);
  --role-cli:     oklch(42%   0.008 75);
  --role-cli-bg:  oklch(92%   0.010 78);
  --role-cli-b:   oklch(80%   0.010 78);

  /* Status semantic tokens — differentiated by lightness only, no hue */
  --s-on-track:    oklch(44%   0.008 75);   /* medium ink — readable, not alarming */
  --s-on-track-bg: oklch(90%   0.010 78);
  --s-at-risk:     oklch(48%   0.009 75);   /* slightly darker than on-track */
  --s-at-risk-bg:  oklch(89%   0.010 78);
  --s-behind:      oklch(28%   0.008 75);   /* darkest — most urgent without color */
  --s-behind-bg:   oklch(87%   0.010 78);
  --s-no-start:    oklch(62.5% 0.009 75);   /* lightest — same as ink-muted */
  --s-no-start-bg: oklch(93%   0.010 78);

  /* Surface details: flatten everything stylistic so reviewers focus on structure.
     Radii go to zero (including --radius-full — avatars become squares).
     Shadows go to none — wireframe should read as drawn, not designed. */
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-full: 0;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}