/* GENERATED from tokens.json — edit the JSON, then run
   python3 platform/apps/web/scripts/gen_tokens.py */
:root {
  --color-kind-column: #4878cf;
  --color-kind-beam: #6acc65;
  --color-kind-slab: #b8b8b8;
  --color-kind-wall: #d5bb67;
  --color-kind-foundation: #555555;
  --color-kind-generic: #c44e52;
  --color-kind-fill: #a68642;
  --color-rf-crimson: #8B1A1A;
  --color-rf-hotRed: #C0392B;
  --color-rf-gold: #E8B84B;
  --color-rf-nearBlack: #080808;
  --color-rf-offWhite: #F5F0E8;
  --color-rf-steelGrey: #888780;
  --color-accent: #C0392B;
  --color-accentHover: #d5493a;
  --color-accentSoft: rgba(192, 57, 43, 0.16);
  --color-accentText: #ff8585;
  --color-danger: #C0392B;
  --color-dangerSoft: rgba(192, 57, 43, 0.16);
  --color-dangerText: #ff8585;
  --color-warn: #d97706;
  --color-warnSoft: rgba(217, 119, 6, 0.16);
  --color-warnText: #fbbf24;
  --color-ok: #16a34a;
  --color-okSoft: rgba(22, 163, 74, 0.16);
  --color-okText: #4ade80;
  --color-info: #1d4ed8;
  --color-infoSoft: rgba(29, 78, 216, 0.16);
  --color-infoText: #60a5fa;
  --color-console-bg: #080808;
  --color-console-surface: #111111;
  --color-console-elevated: #1a1a1a;
  --color-console-border: #272727;
  --color-console-borderBright: #424242;
  --color-console-text: #F5F0E8;
  --color-console-muted: #c7c7c7;
  --color-console-field: #0d0d0d;
  --color-console-fieldBorder: #5a5a5a;
  --color-report-bg: #f2f0ea;
  --color-report-surface: #faf9f5;
  --color-report-elevated: #ffffff;
  --color-report-border: #dbd7cc;
  --color-report-text: #151a22;
  --color-report-muted: #5a6270;
  --color-report-accent: #8B1A1A;
  --color-report-borderBright: #b9b3a4;
  --color-report-field: #ffffff;
  --color-report-fieldBorder: #b9b3a4;
  --color-tier-L0: #888780;
  --color-tier-L1: #E8B84B;
  --color-tier-L2: #4ade80;
  --color-tier-L3: #F5F0E8;
  --color-group-1: #C0392B;
  --color-group-2: #B45309;
  --color-group-3: #15803D;
  --color-group-4: #1D4ED8;
  --color-group-5: #7E22CE;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-tag: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-sheet: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.6);
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-xxl: 40px;
  --motion-fast: 0.12s;
  --motion-base: 0.2s;
  --z-canvas: 0;
  --z-panel: 10;
  --z-timeline: 20;
  --z-modal: 100;
}

/* DARK (console) is the DEFAULT surface — DemSim is a RazeForce
   product and inherits that command-centre identity (D206,
   superseding D65's paper-first default for the APP).

   PAPER survives as [data-theme='light'] for exactly one job: the
   client-facing deliverables (report / share / plan / compare) are
   printed and emailed, where near-black wastes toner and reads
   wrong — and D200's logo file is deliberately not theme-aware for
   the same reason. `--accent` re-binds per surface, because the
   brand red differs by ground: hot-red on dark, crimson on light.
   UI_GUIDELINES §3 */
:root, :root[data-theme='dark'] {
  --bg: var(--color-console-bg);
  --surface: var(--color-console-surface);
  --elevated: var(--color-console-elevated);
  --border: var(--color-console-border);
  --border-bright: var(--color-console-borderBright);
  --text: var(--color-console-text);
  --muted: var(--color-console-muted);
  --field: var(--color-console-field);
  --field-border: var(--color-console-fieldBorder);
  --accent: var(--color-rf-hotRed);
}
:root[data-theme='light'] {
  --bg: var(--color-report-bg);
  --surface: var(--color-report-surface);
  --elevated: var(--color-report-elevated);
  --border: var(--color-report-border);
  --border-bright: var(--color-report-borderBright);
  --text: var(--color-report-text);
  --muted: var(--color-report-muted);
  --field: var(--color-report-field);
  --field-border: var(--color-report-fieldBorder);
  --accent: var(--color-report-accent);
  /* `--color-accent` is REBOUND too, not just `--accent`. Every
     stylesheet in the repo already says var(--color-accent), and
     leaving that as the raw dark-ground hot-red painted crimson-
     grade surfaces with the wrong red on paper (caught by sampling
     the rendered report, not by reading). One name, correct on
     whichever ground it lands. Same for the on-dark TEXT reds,
     which are unreadably light on white. */
  --color-accent: var(--color-report-accent);
  --color-accentHover: #a52222;
  --color-accentText: var(--color-report-accent);
  --color-dangerText: var(--color-report-accent);
  --color-accentSoft: #f6e9e6;
  --color-dangerSoft: #f6e9e6;
  --color-warnText: #8a4b00;
  --color-okText: #12643f;
  --color-warnSoft: #fdf3e2;
  --color-okSoft: #e6f4ec;
}