/* tokens.css - SOURCE OF TRUTH. Two tiers:
   TIER 1  brand primitives  -> the only raw brand hex; one per hue; mode-aware.
   TIER 2  semantic + skill   -> ALIAS the primitives with var(); fills reuse a brand hue directly.
   Dark mode re-points ONLY the primitives + neutrals + AA-safe text colours; every alias follows.
   Text semantics (--pass/--fail/--hint) are separate darker shades on purpose (the raw brand
   hues fail WCAG AA at text sizes - this is an accessibility tier, not duplication).
   Values from the brand spec (2026-06-23). */
:root {
  /* ---- TIER 1: brand primitives (single source per hue) ---- */
  --brand-charcoal:#342E37;
  --brand-red:#EE4036; --brand-cyan:#00B4C5; --brand-blue:#293C8D;
  --brand-green:#95B43D; --brand-orange:#F17F21; --brand-yellow:#FEC01A;

  /* ---- foundation neutrals ---- */
  --bg:#FFFFFF; --surface:#F6F7F9; --surface-2:#ECEEF2; --line:#E2E4EA;
  --ink:#342E37; --muted:#6B6770; --faint:#8E8A94;
  --charcoal:var(--brand-charcoal); /* always-dark surface (does NOT flip) */
  --editor-bg:#15171C; --editor-chrome:#1E2027; --code-text:#C7CBE0;

  /* ---- TIER 2a: skill spectrum = the brand primitives, reused for data/nodes/tags ---- */
  --skill-cyan:var(--brand-cyan); --skill-blue:var(--brand-blue); --skill-green:var(--brand-green);
  --skill-orange:var(--brand-orange); --skill-yellow:var(--brand-yellow); --skill-red:var(--brand-red);

  /* ---- TIER 2b: semantic ---- */
  /* PRIMARY ACTION is ink, NOT red - so red never means both "click me" and "error".
     Red is brand identity (ring/eyebrows/accents) + the error hue; actions are ink. */
  --action:var(--ink); --on-action:var(--bg); /* button fill + its text; invert with theme */
  --pass-fill:var(--brand-green); --hint-fill:var(--brand-orange); --focus:var(--brand-red);
  /* text/icon semantics: AA-safe darker derivatives (NOT the raw brand hue) */
  --brand-red-ink:#D8362C; --pass:#4E7A1E; --fail:#C2362C; --hint:#A85A0D;

  /* ---- type / space / radius / elevation / motion ---- */
  --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;
  --r-btn:10px; --r-card:13px; --r-panel:16px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(20,20,30,.06); --shadow-2:0 8px 24px rgba(20,20,30,.08);
  --dur-micro:120ms; --dur-std:200ms; --dur-enter:320ms; --ease-std:cubic-bezier(.2,.7,.2,1);
}
/* DARK: re-point primitives (brightened for dark) + neutrals + AA-safe text. Aliases follow. */
[data-theme="dark"] {
  --brand-red:#FF5240; --brand-cyan:#1FC6D6; --brand-blue:#5A74D6;
  --brand-green:#A9CF55; --brand-orange:#FF9A40; --brand-yellow:#FFCB3D;
  --bg:#15161B; --surface:#1D1F26; --surface-2:#262932; --line:#2E313B;
  --ink:#ECEDF2; --muted:#A6A4AE; --faint:#74727C;
  --editor-bg:#0E1018; --editor-chrome:#181B22; --code-text:#C7CBE0;
  --brand-red-ink:#FF6B5A; --pass:#B6D86A; --fail:#FF6B5E; --hint:#F59A3C;
  --shadow-1:0 0 0 1px rgba(255,255,255,.03); --shadow-2:0 8px 30px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-red:#FF5240; --brand-cyan:#1FC6D6; --brand-blue:#5A74D6;
    --brand-green:#A9CF55; --brand-orange:#FF9A40; --brand-yellow:#FFCB3D;
    --bg:#15161B; --surface:#1D1F26; --surface-2:#262932; --line:#2E313B;
    --ink:#ECEDF2; --muted:#A6A4AE; --faint:#74727C;
    --editor-bg:#0E1018; --editor-chrome:#181B22;
    --brand-red-ink:#FF6B5A; --pass:#B6D86A; --fail:#FF6B5E; --hint:#F59A3C;
    --shadow-1:0 0 0 1px rgba(255,255,255,.03); --shadow-2:0 8px 30px rgba(0,0,0,.45);
  }
}