/* ══════════════════════════════════════════════════════
   DESIGN TOKENS
   ──────────────────────────────────────────────────────
   Four layers, resolved top to bottom:
     1. raw palette per theme, on :root[data-theme=...]
     2. semantic roles every component uses (--panel, --ink, --signal ...)
     3. per-theme AA corrections (light needs darker accents as text)
     4. compatibility aliases for the pre-2026-09 token names, kept until
        every rule is rewritten on the semantic layer (then deleted)
   Light is the default: a page with no data-theme attribute (no JS, print)
   renders light. boot.js sets the attribute before first paint from the
   stored preference; theme.js flips it.
   ══════════════════════════════════════════════════════ */

/* ── 1. Raw palette ─────────────────────────────────── */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --surface-bg: #F7F4EC;
  --surface-1: #F3EEE2;
  --surface-2: #EFEADA;
  --surface-3: #E9E1CC;
  --surface-4: #E3D9BD;
  --border: #E3DCC8;
  --text: #28241B;
  --text-muted: #6E6344;
  --text-dim: #A3987B;
  --accent: #9A7010;
  --accent-bright: #8F670A;
  --success: #15803D;
  --warning: #A16207;
  --danger: #B91C1C;
  --info: #1D4ED8;
  --focus-ring: #9A7010;
  --shadow-lg: 0 6px 20px rgba(40, 36, 27, .16);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-bg: #0a0907;
  --surface-1: #12100d;
  --surface-2: #1d1a17;
  --surface-3: #282521;
  --surface-4: #2f2b26;
  --border: #383530;
  --text: #eeece8;
  --text-muted: #96928c;
  --text-dim: #8a857d;
  --accent: #f0c040;
  --accent-bright: #f7d970;
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;
  --info: #58a6ff;
  --focus-ring: #f0c040;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ── 2. Semantic roles ──────────────────────────────── */
:root {
  /* surfaces */
  --void: var(--surface-bg);
  --panel: var(--surface-1);
  --raised: var(--surface-2);
  --hover: var(--surface-3);
  /* text */
  --ink: var(--text);
  --muted: var(--text-muted);
  --dim: color-mix(in srgb, var(--text-dim) 50%, var(--text));
  /* lines */
  --line: var(--border);
  --line-soft: color-mix(in srgb, var(--border) 55%, var(--surface-bg));
  --line-input: color-mix(in srgb, var(--border) 40%, var(--text));
  /* the one accent */
  --signal: var(--accent);
  --signal-soft: var(--accent-bright);
  --signal-ink: var(--surface-bg);
  --signal-tint: color-mix(in srgb, var(--accent) 14%, transparent);
  /* state colours: only for state, never decoration */
  --green: var(--success);
  --amber: var(--warning);
  --ember: var(--danger);
  --blue: var(--info);
  --green-tint: color-mix(in srgb, var(--success) 12%, transparent);
  --amber-tint: color-mix(in srgb, var(--warning) 12%, transparent);
  --ember-tint: color-mix(in srgb, var(--danger) 12%, transparent);
  --blue-tint: color-mix(in srgb, var(--info) 12%, transparent);
  /* chart roles: data colours read through foundation.js PALETTE */
  --chart-actual: var(--ink);
  --chart-projected: var(--signal);
  --chart-band: color-mix(in srgb, var(--signal) 18%, transparent);
  --chart-hist: var(--dim);
  --chart-grid: color-mix(in srgb, var(--line-input) 35%, transparent);
  --chart-tick: var(--muted);
  --marker-today: var(--blue);
  --marker-early: var(--green);
  --marker-event: var(--ember);
  --series-1: var(--signal);
  --series-2: var(--blue);
  --series-3: var(--green);
  /* type */
  --display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-label: 11px;
  --fs-meta: 12px;
  --fs-body: 13px;
  --fs-body-lg: 14px;
  --fs-h2: 18px;
  --fs-h2-lg: 22px;
  --fs-h1: clamp(26px, 2.6vw, 34px);
  --track-label: .08em;
  /* shape and motion */
  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-sheet: 16px;
  --control-h: 36px;
  --touch: 44px;
  --elevation: var(--shadow-lg);
  --scrim: color-mix(in srgb, var(--text) 45%, transparent);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  /* layout */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 40px;
  --gutter: 12px;
  --topbar-height: calc(56px + env(safe-area-inset-top, 0px));
  --rail-width: 232px;
  --rail-collapsed: 64px;
  --bottom-nav: calc(60px + env(safe-area-inset-bottom, 0px));
  --layer-rail: 20;
  --layer-topbar: 30;
  --layer-nav: 35;
  --layer-popover: 100;
  --layer-toast: 110;
  --layer-sheet: 200;
  --layer-skip: 300;
}

/* ── 3. Per-theme AA corrections ────────────────────── */
/* On cream the raw gold (4.1:1), green (4.3) and amber (4.3) fail AA as
   text; mixing them toward the ink brings each past 4.5 while the chart's
   2 px projected line keeps the raw accent (3:1 is enough for a line). */
:root,
:root[data-theme="light"] {
  --signal: color-mix(in srgb, var(--accent) 80%, var(--text));
  --signal-soft: color-mix(in srgb, var(--accent-bright) 80%, #000);
  --green: color-mix(in srgb, var(--success) 85%, var(--text));
  --amber: color-mix(in srgb, var(--warning) 85%, var(--text));
  --chart-projected: var(--accent);
}
:root[data-theme="dark"] {
  --signal: var(--accent);
  --signal-soft: var(--accent-bright);
  --green: var(--success);
  --amber: var(--warning);
  --chart-projected: var(--signal);
  --dim: var(--text-dim);
  --scrim: rgba(0, 0, 0, .55);
}

/* ── 4. Compatibility aliases (delete when no rule uses them) ── */
:root {
  --bg: var(--void);
  --surface: var(--panel);
  --surface2: var(--raised);
  --surface3: var(--hover);
  --border-light: var(--line-soft);
  --text2: color-mix(in srgb, var(--ink) 88%, var(--void));
  --text3: var(--dim);
  --blue-bright: var(--blue);
  --blue-dim: var(--blue-tint);
  --gold: var(--signal);
  --gold-bright: var(--signal-soft);
  --gold-dim: var(--signal-tint);
  --green-bright: var(--green);
  --green-dim: var(--green-tint);
  --red: var(--ember);
  --red-dim: var(--ember-tint);
  --orange: var(--amber);
  --orange-bright: var(--amber);
  --orange-dim: var(--amber-tint);
  --purple: var(--muted);
  --purple-dim: var(--raised);
  --radius-sm: var(--radius-lg);
  --transition: var(--dur) var(--ease-out);
  --shadow: var(--elevation);
  --shadow-sm: none;
  --glow-blue: none;
  --glow-gold: none;
  --font-mono: var(--mono);
  --fs-1: var(--fs-meta);
  --fs-2: var(--fs-body);
  --fs-3: var(--fs-body-lg);
  --fs-4: var(--fs-body-lg);
  --fs-5: var(--fs-h2);
  --fs-6: var(--fs-h2-lg);
}

/* ── Print is always light ──────────────────────────── */
@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
    --surface-bg: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f5f5f5;
    --surface-3: #ebebeb;
    --surface-4: #e3e3e3;
    --border: #c8c8c8;
    --text: #111111;
    --text-muted: #555555;
    --text-dim: #8a8a8a;
    --accent: #7a5a0c;
    --accent-bright: #6b4f0a;
    --success: #1a6f30;
    --warning: #8a6b00;
    --danger: #a32a23;
    --info: #1a4f9c;
    --shadow-lg: none;
    --dim: var(--text-dim);
  }
}