/* ==========================================================================
   CodeForge 8.0 — Design tokens
   Ported 1:1 from the approved prototype (design/prototype/index.html).
   Light palette lives on :root; dark is applied either automatically via
   prefers-color-scheme (guarded so an explicit "light" choice always wins)
   or explicitly via :root[data-theme="dark"]. Theme selection ('system' |
   'light' | 'dark') is persisted in localStorage 'codeforge.theme' and
   applied to <html data-theme> by js/app.js (removed entirely for 'system').
   ========================================================================== */
:root{
  --ground:#e6e9f0; --mica:#eef0f5; --layer:#f9fafc; --card:#ffffff; --card-hover:#f6f7fa;
  --subtle:rgba(15,23,42,.05); --subtle-2:rgba(15,23,42,.08);
  --stroke:rgba(15,23,42,.10); --stroke-strong:rgba(15,23,42,.20); --stroke-card:rgba(15,23,42,.08);
  --text:#16181d; --text-2:#454a56; --text-3:#626776; --text-on-accent:#ffffff;
  --accent:#0a6e8a; --accent-hover:#085e76; --accent-press:#074f63; --accent-soft:rgba(10,110,138,.10); --accent-text:#085e76;
  --pro:#9a5b00; --pro-strong:#c77700; --pro-soft:rgba(199,119,0,.12); --pro-fg:#ffffff;
  --ai:#6a3ccc; --ai-soft:rgba(106,60,204,.10);
  --ok:#0f7a3e; --ok-soft:rgba(15,122,62,.10);
  --warn:#8a5800; --warn-soft:rgba(214,146,0,.14);
  --err:#c42b1c; --err-soft:rgba(196,43,28,.09);
  --syn-key:#1d5fb8; --syn-str:#0f7a3e; --syn-num:#a14f00; --syn-bool:#8a3fc7; --syn-null:#6b7080; --syn-punct:#5b606c;
  --shadow-card:0 1px 2px rgba(15,23,42,.05);
  --shadow-flyout:0 8px 16px rgba(15,23,42,.10),0 1px 3px rgba(15,23,42,.08);
  --shadow-dialog:0 32px 64px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.10);
  --shadow-window:0 24px 60px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);
  --scrim:rgba(15,20,30,.32);

  --font-ui:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Cascadia Code","Cascadia Mono",ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
  --fs-caption:12px; --fs-body:14px; --fs-body-strong:14px; --fs-subtitle:20px; --fs-title:28px; --fs-display:40px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --r-control:4px; --r-card:8px; --r-overlay:8px; --r-window:10px; --r-pill:999px;
  --z-nav:10; --z-flyout:40; --z-dialog:60; --z-toast:80;
  --dur-fast:120ms; --dur:200ms; --ease:cubic-bezier(.16,1,.3,1);
  --titlebar-h:40px; --nav-w:272px; --rail-w:56px;
  color-scheme:light;

  /* ---- backward-compat aliases for js/tools/** and other not-yet-migrated
     files that still reference the old v7 token names. Keep these in sync
     with the tokens above so legacy component CSS in tools.css renders
     consistently with the new design system without needing per-rule edits. */
  --bg-base:var(--ground); --bg-surface:var(--mica); --bg-elevated:var(--layer);
  --bg-hover:var(--card-hover); --bg-active:var(--subtle-2); --bg-input:var(--card);
  --border-subtle:var(--stroke-card); --border-default:var(--stroke); --border-strong:var(--stroke-strong);
  --text-primary:var(--text); --text-secondary:var(--text-2); --text-muted:var(--text-3); --text-inverse:var(--text-on-accent);
  --accent-dim:var(--accent-soft);
  --success:var(--ok); --success-dim:var(--ok-soft);
  --warning:var(--warn); --warning-dim:var(--warn-soft);
  --error:var(--err); --error-dim:var(--err-soft);
  --info:var(--accent);
  --border-radius:var(--r-control); --border-radius-lg:var(--r-card);
  --shadow-sm:var(--shadow-card); --shadow-md:var(--shadow-flyout); --shadow-lg:var(--shadow-dialog);
  --transition-fast:var(--dur-fast) var(--ease); --transition-med:var(--dur) var(--ease);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0b0c10; --mica:#1b1c22; --layer:#212229; --card:#2a2b33; --card-hover:#30313a;
    --subtle:rgba(255,255,255,.055); --subtle-2:rgba(255,255,255,.085);
    --stroke:rgba(255,255,255,.09); --stroke-strong:rgba(255,255,255,.18); --stroke-card:rgba(255,255,255,.06);
    --text:#f1f2f5; --text-2:#c3c6cf; --text-3:#9a9eac; --text-on-accent:#05232c;
    --accent:#5cc8e6; --accent-hover:#7ad4ec; --accent-press:#4bb4d1; --accent-soft:rgba(92,200,230,.14); --accent-text:#7ad4ec;
    --pro:#f2b441; --pro-strong:#f2b441; --pro-soft:rgba(242,180,65,.14); --pro-fg:#2a1a00;
    --ai:#b89cff; --ai-soft:rgba(184,156,255,.14);
    --ok:#6fd896; --ok-soft:rgba(111,216,150,.12);
    --warn:#f2c14e; --warn-soft:rgba(242,193,78,.13);
    --err:#ff9185; --err-soft:rgba(255,145,133,.12);
    --syn-key:#86c8ff; --syn-str:#a3e39a; --syn-num:#ffbd73; --syn-bool:#d9adff; --syn-null:#9ba1ae; --syn-punct:#aeb2bd;
    --shadow-card:0 1px 2px rgba(0,0,0,.3);
    --shadow-flyout:0 8px 24px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);
    --shadow-dialog:0 32px 64px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
    --shadow-window:0 24px 70px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5);
    --scrim:rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0b0c10; --mica:#1b1c22; --layer:#212229; --card:#2a2b33; --card-hover:#30313a;
  --subtle:rgba(255,255,255,.055); --subtle-2:rgba(255,255,255,.085);
  --stroke:rgba(255,255,255,.09); --stroke-strong:rgba(255,255,255,.18); --stroke-card:rgba(255,255,255,.06);
  --text:#f1f2f5; --text-2:#c3c6cf; --text-3:#9a9eac; --text-on-accent:#05232c;
  --accent:#5cc8e6; --accent-hover:#7ad4ec; --accent-press:#4bb4d1; --accent-soft:rgba(92,200,230,.14); --accent-text:#7ad4ec;
  --pro:#f2b441; --pro-strong:#f2b441; --pro-soft:rgba(242,180,65,.14); --pro-fg:#2a1a00;
  --ai:#b89cff; --ai-soft:rgba(184,156,255,.14);
  --ok:#6fd896; --ok-soft:rgba(111,216,150,.12);
  --warn:#f2c14e; --warn-soft:rgba(242,193,78,.13);
  --err:#ff9185; --err-soft:rgba(255,145,133,.12);
  --syn-key:#86c8ff; --syn-str:#a3e39a; --syn-num:#ffbd73; --syn-bool:#d9adff; --syn-null:#9ba1ae; --syn-punct:#aeb2bd;
  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --shadow-flyout:0 8px 24px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);
  --shadow-dialog:0 32px 64px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --shadow-window:0 24px 70px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.5);
  color-scheme:dark;
}