/* ============================================================================
   tokens.css — THE canonical chrome token block (DESIGN_SYSTEM.md §3).
   Loaded FIRST by index.html, wizard.html, and home.html. One block, no
   per-page drift (audit SYS-1). The card keeps its own scale in card.css.
   Also home to the shared focus recipe (SYS-2) and scrollbar recipe (SE-20).
   ========================================================================== */

:root {
  /* control sizes + radii */
  --ctl-sm: 24px; --ctl-md: 30px; --ctl-lg: 38px;
  /* PANEL RHYTHM (Sam-approved 2026-07-25, DESIGN_SYSTEM §6b-3). Named by ROLE, not by size,
     so a new field cannot invent its own spacing: pick the relationship, not a number. */
  --gap-label: 4px;    /* a label to the control it names            */
  --gap-hint:  7px;    /* a control to the hint that explains it     */
  --gap-ctl:   9px;    /* one control to the next, unrelated control */
  --pad-sec:   11px 14px 13px;   /* a panel section's own padding    */
  --r-ctl: 6px; --r-sm: 6px; --r-md: 8px; --r-pill: 999px;

  /* type ramp — 6 sizes + one chip-internal micro size (audit CHL-7) */
  --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12.5px;
  --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 20px;

  /* surfaces & text */
  --ui-bg:    #0f172a;
  --bar-bg:   #0a0f1a;
  --panel-bg: #1e293b;
  --panel-2:  #162032;
  --panel-3:  #223049;
  --border:   #334155;
  --border-lt:#e2e8f0;
  --divider:  #2a3852;
  --text:     #f1f5f9;
  --text-2:   #94a3b8;
  --label:    #b4c0d0;

  /* color roles */
  --accent:   #7c3aed;
  --accent-hover: #6d28d9;
  --accent-a06: rgba(124,58,237,0.06);
  --accent-a12: rgba(124,58,237,0.12);
  --accent-a18: rgba(124,58,237,0.18);
  --accent-a25: rgba(124,58,237,0.25);
  --accent-a40: rgba(124,58,237,0.40);
  --success:  #34d399;
  --warning:  #fbbf24;
  --danger:   #f87171;
  --sel-clr:  rgba(124,58,237,0.25);

  /* layout */
  --header-h: 50px;
  --panel-w:  346px;

  font-family: 'DM Sans', system-ui, sans-serif;

  /* ── legacy aliases (wizard/home migration, audit SYS-1) ─────────────────
     Old per-page token names now resolve to the canonical values. New code
     must use the canonical names; these aliases are scheduled for removal
     once no rule references them (breadcrumb discipline). */
  --bg:      var(--ui-bg);
  --panel:   var(--panel-bg);
  --panel2:  var(--panel-2);
  --text2:   var(--text-2);
  --accent2: var(--accent-hover);
  --green:   var(--success);
  --red:     var(--danger);
}

/* ── focus recipe (DESIGN_SYSTEM §4, audit SYS-2) — everywhere, all pages ── */
:where(button, [role="button"], a, select, input, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}

/* ── scrollbar recipe (audit SE-20) — dark, thin, all chrome surfaces ────── */
* { scrollbar-width: thin; scrollbar-color: #3b4a63 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #3b4a63; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #4a5b78; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }