/* GENERATED by scripts/build-design-tokens.mjs from the DESIGN_TOKENS block of DESIGN.md. Do not edit: change DESIGN.md and re-run. */
/* Core: mode-free tokens, read by both modes. Primitive palette first (raw colour lives only here), then type, radius, spacing and motion. */
:root {
  /* Primitive Palette (the only place a raw hex is allowed; role tokens below reference it with var()) */
  --palette-ice-100: #edf4fb;
  --palette-white: #ffffff;
  --palette-navy-900: #10233e;
  --palette-slate-700: #28435f;
  --palette-slate-500: #637893;
  --palette-blue-600: #087ab8;
  --palette-blue-700: #035f96;
  --palette-green-600: #087b58;
  --palette-amber-700: #9a5b00;
  --palette-red-600: #b44351;
  --palette-violet-600: #6745a5;
  --palette-violet-500: #7653c7;
  --palette-navy-950: #080e1a;
  --palette-snow-50: #f2f8ff;
  --palette-mist-200: #c7d8eb;
  --palette-mist-400: #8fa8c3;
  --palette-cyan-400: #34c7ff;
  --palette-cyan-200: #90e8ff;
  --palette-green-400: #45d8a5;
  --palette-amber-400: #f6ba4f;
  --palette-red-400: #fb7f8c;
  --palette-sky-400: #45cfff;
  --palette-violet-300: #b6a0ff;
  --palette-violet-200: #b69cff;
  --palette-navy-800: #0c192e;
  --palette-navy-700: #0f1d33;
  --palette-blue-500: #0585c9;

  /* Typography Stacks (Zero-CDN System Fallbacks) */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing Scale (one unit, every step a multiple of it) */
  --space-unit: 4px;
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);

  /* Radius Scale */
  --radius-unit: 4px;
  --radius-sm: var(--radius-unit);
  --radius-md: calc(var(--radius-unit) * 2);
  --radius-lg: calc(var(--radius-unit) * 4);
  --radius-pill: 999px;
  --control-radius: var(--radius-pill);

  /* Motion Scale */
  --motion-fast: 120ms;
  --motion-base: calc(var(--motion-fast) * 2);
  --motion-slow: calc(var(--motion-fast) * 4);
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Light (Bright Ice): same token names as Dark */
html.light {
  /* Surface & Canvas (Light: Bright Ice) */
  --bg: var(--palette-ice-100);
  --bg-page: var(--palette-ice-100);
  --rail: rgba(232, 241, 251, 0.88);
  --panel: rgba(247, 251, 255, 0.82);
  --card: rgba(255, 255, 255, 0.78);
  --well: rgba(218, 233, 247, 0.72);
  --line: rgba(20, 55, 92, 0.18);
  --line-2: rgba(20, 55, 92, 0.11);
  --ink: var(--palette-navy-900);
  --ink-2: var(--palette-slate-700);
  --mute: var(--palette-slate-500);

  /* Brand Accents (Light) */
  --accent: var(--palette-blue-600);
  --accent-2: var(--palette-blue-700);
  --accent-pale: rgba(8, 122, 184, 0.13);

  /* Status Semantics (Light) */
  --ok: var(--palette-green-600);
  --ok-pale: rgba(8, 123, 88, 0.13);
  --warn: var(--palette-amber-700);
  --warn-pale: rgba(245, 158, 11, 0.16);
  --fail: var(--palette-red-600);
  --fail-pale: rgba(180, 67, 81, 0.13);
  --run: var(--palette-blue-600);
  --run-pale: rgba(8, 122, 184, 0.13);
  --park: var(--palette-violet-600);
  --park-pale: rgba(103, 69, 165, 0.13);
  --review: var(--palette-violet-500);
  --review-pale: rgba(118, 83, 199, 0.13);

  /* Liquid Glass Primitives (Light) */
  --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 255, 0.82) 52%, rgba(222, 239, 253, 0.76));
  --glass-elevated: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(213, 236, 252, 0.88));
  --glass-border: rgba(22, 72, 119, 0.20);
  --glass-top: rgba(255, 255, 255, 0.94);
  --control-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(221, 239, 253, 0.78));
  --control-active: linear-gradient(135deg, #0585c9, #075d94);
  --control-border: rgba(22, 96, 151, 0.32);
  --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 5px 16px rgba(21, 62, 104, 0.12);
  --ambient-shadow: 0 18px 38px rgba(17, 53, 89, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --active-ring: 0 0 0 2px rgba(8, 122, 184, 0.24), 0 0 24px rgba(8, 122, 184, 0.18);

  /* Board surfaces (diagram compiler boards only; platform.css does not use them) */
  --bg-frame: var(--palette-white);
  --bg-card: var(--palette-white);
  --btn-fill: var(--palette-blue-600);
}

/* Dark (Deep Midnight Navy): overrides every light name */
html.dark {
  /* Surface & Canvas (Dark: Deep Midnight Navy) */
  --bg: var(--palette-navy-950);
  --bg-page: var(--palette-navy-950);
  --rail: rgba(5, 12, 25, 0.90);
  --panel: rgba(10, 20, 38, 0.80);
  --card: rgba(12, 25, 46, 0.76);
  --well: rgba(4, 11, 23, 0.82);
  --line: rgba(159, 205, 241, 0.20);
  --line-2: rgba(159, 205, 241, 0.12);
  --ink: var(--palette-snow-50);
  --ink-2: var(--palette-mist-200);
  --mute: var(--palette-mist-400);

  /* Brand Accents (Dark: Electric Cyan Caustic) */
  --accent: var(--palette-cyan-400);
  --accent-2: var(--palette-cyan-200);
  --accent-pale: rgba(52, 199, 255, 0.15);

  /* Status Semantics (Dark) */
  --ok: var(--palette-green-400);
  --ok-pale: rgba(69, 216, 165, 0.15);
  --warn: var(--palette-amber-400);
  --warn-pale: rgba(246, 186, 79, 0.16);
  --fail: var(--palette-red-400);
  --fail-pale: rgba(251, 127, 140, 0.16);
  --run: var(--palette-sky-400);
  --run-pale: rgba(69, 207, 255, 0.15);
  --park: var(--palette-violet-300);
  --park-pale: rgba(182, 160, 255, 0.16);
  --review: var(--palette-violet-200);
  --review-pale: rgba(182, 156, 255, 0.17);

  /* Liquid Glass Primitives (Dark) */
  --glass: linear-gradient(135deg, rgba(143, 218, 255, 0.11), rgba(10, 21, 40, 0.84) 48%, rgba(5, 12, 25, 0.94));
  --glass-elevated: linear-gradient(135deg, rgba(52, 199, 255, 0.22), rgba(11, 27, 52, 0.91));
  --glass-border: rgba(169, 221, 255, 0.20);
  --glass-top: rgba(226, 246, 255, 0.29);
  --control-bg: linear-gradient(135deg, rgba(163, 223, 255, 0.16), rgba(10, 24, 46, 0.88));
  --control-active: linear-gradient(135deg, #168fca, #075d94);
  --control-border: rgba(157, 221, 255, 0.31);
  --control-shadow: inset 0 1px 0 rgba(229, 247, 255, 0.31), 0 5px 16px rgba(0, 0, 0, 0.32);
  --ambient-shadow: 0 18px 38px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(229, 247, 255, 0.20), inset 0 -2px 7px rgba(0, 0, 0, 0.44);
  --active-ring: 0 0 0 2px rgba(52, 199, 255, 0.56), 0 0 24px rgba(52, 199, 255, 0.30);

  /* Board surfaces (diagram compiler boards only; platform.css does not use them) */
  --bg-frame: var(--palette-navy-800);
  --bg-card: var(--palette-navy-700);
  --btn-fill: var(--palette-blue-500);
}