/* ============================================================
   Web World Wide — Admin design tokens (v3 redesign)
   ------------------------------------------------------------
   SINGLE SOURCE OF TRUTH. Loads first (after fonts.css) so every
   var() downstream resolves here. Replaces the old three-way token
   tangle (_www-tokens.css + the :root blocks inside admin.css and
   _www-overrides.css).

   Design language: a calm, modern, light working surface — neutral
   cool-gray canvas, crisp white cards, a confident brand-blue accent,
   refined sans typography (NO pixel/VT323 in the admin chrome). The
   homepage editor's PREVIEW canvas (.pv-*) deliberately mirrors the
   intentionally-retro public site and keeps its own fonts — it is not
   admin chrome and is out of scope here.

   ACCENT CONTRAST RULE (WCAG AA, do not break):
     --accent (#1450c8, 7.6:1 on white)  → text, links, and ANY fill
                                            that carries white text
                                            (buttons, badges, pills).
     --accent-bg (#1e68f0, ~3.5:1)        → DECORATION ONLY: bars,
                                            sparks, pips, indicators.
                                            Never put text on it.
     --accent-fill-hover (#0f3e9c)        → hover tier for white-text
                                            fills (stays ≥4.5:1).
   The admin renders light only; common.js force-sets data-theme="light".
   No dark theme block exists by design.
   ============================================================ */

:root,
[data-theme="light"] {
  /* ---- Brand ---------------------------------------------- */
  --sky: #1e68f0;
  --sky-deep: #1450c8;
  --sky-far: #a8c8f0;
  --cloud: #ffffff;

  /* ---- Ink scale (text) — AA-tuned on white + the page canvas */
  --ink: #0e2960; /* headings / primary text — ~13:1 on white */
  --ink-soft: #2a4a90; /* body / secondary — ~7:1 */
  --ink-mute: #4d64a0; /* labels / meta — 4.95:1 on canvas (AA floor) */
  --ink-faint: #92a3c8; /* decorative / placeholder — never load-bearing */

  /* ---- Surfaces — neutral cool-gray app, crisp white cards */
  --bg-page: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f5f7fb; /* hover / inset rows */
  --surface-3: #eef2f8; /* wells, track backgrounds, chips */

  /* ---- Hairlines ----------------------------------------- */
  --line-www: rgb(14 41 96 / 0.12);
  --line-strong-www: rgb(14 41 96 / 0.22);

  /* ---- Accent family (two-tier AA, see rule above) -------- */
  --accent: var(--sky-deep);
  --accent-bg: var(--sky);
  --accent-deep: #103a8e;
  --accent-fill-hover: #0f3e9c;
  --accent-soft: rgb(30 104 240 / 0.1);
  --accent-line: rgb(30 104 240 / 0.3);
  --accent-glow: rgb(30 104 240 / 0.28);
  --accent-on: #ffffff;
  --selection: rgb(30 104 240 / 0.2);

  /* Warm "cherry" — kept for any decorative warm pip; never text-bearing */
  --cherry: #ec5a2b;
  --cherry-deep: #c8430f;
  --cherry-strong: #b04708;

  /* ---- Status (each: AA text tier · bright decoration tier · soft bg) */
  --ok: #1f9d6b;
  --ok-strong: #1a7e56;
  --ok-bright: #28b083;
  --ok-soft: rgb(31 157 107 / 0.14);
  --ok-glow: rgb(31 157 107 / 0.28);
  --warn: #b87a16;
  --warn-strong: #8c5a0a;
  --warn-bright: #d68f1e;
  --warn-soft: rgb(214 143 30 / 0.16);
  --warn-glow: rgb(214 143 30 / 0.3);
  --danger: #c93a2a;
  --danger-strong: #b02f20;
  --danger-bright: #d94a3a;
  --danger-soft: rgb(217 74 58 / 0.14);
  --danger-glow: rgb(217 74 58 / 0.3);

  /* ---- Typography — stacks (self-hosted, see fonts.css) ---- */
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-site: "Cormorant Garamond", "Apple Garamond", Garamond, Georgia, serif;
  --font-data: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* font-pixel kill-switch: VT323's old role (tracked uppercase labels)
     is now refined uppercase Hanken. Re-pointing this one var converts
     every chrome var(--font-pixel) reference to clean type at once. The
     public-site preview hardcodes "VT323" directly and is unaffected. */
  --font-pixel: var(--font-ui);

  /* ---- Type ramp (size · line-height · weight tokens) ----- */
  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-label: 12px; /* uppercase tracked labels (was VT323) */
  --fs-micro: 11px; /* Space Mono meta / counts */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-label: 0.06em; /* label/eyebrow letter-spacing */

  /* ---- Spacing (4px base) -------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Radius -------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Elevation — soft, neutral, single-direction -------- */
  --shadow-card-xs: 0 1px 1px rgb(14 41 96 / 0.05);
  --shadow-card-sm: 0 1px 2px rgb(14 41 96 / 0.06);
  --shadow-card: 0 1px 2px rgb(14 41 96 / 0.05), 0 4px 12px rgb(14 41 96 / 0.05);
  --shadow-pop: 0 12px 34px rgb(14 41 96 / 0.16), 0 2px 6px rgb(14 41 96 / 0.08);
  --shadow-button: 0 1px 1px rgb(14 41 96 / 0.06);
  --shadow-button-hover: 0 2px 8px rgb(14 41 96 / 0.14);

  /* ---- z-index scale (one ladder; remap all magic numbers) */
  --z-base: 0;
  --z-raised: 10; /* .shell */
  --z-sticky: 100; /* .topbar, sticky editor toolbar */
  --z-nav-backdrop: 800;
  --z-nav-drawer: 810;
  --z-drawer: 900; /* media + comments right-sheets */
  --z-dropdown: 1000; /* slash menu, popovers */
  --z-modal: 1100; /* .modal, dialogs */
  --z-cmdk: 1200;
  --z-toast: 1300;
  --z-skiplink: 1400;

  /* ========================================================
     LEGACY ALIASES — bridge so kept per-view CSS (editor.css,
     comments.css, media.css, dashboard.css, settings.css …) keeps
     resolving while it is migrated to canonical tokens. Removed in
     the final cleanup once `grep` shows zero references.
     ======================================================== */
  --line: var(--line-www);
  --line-strong: var(--line-strong-www);
  --fg: var(--ink);
  --fg-dim: var(--ink-soft);
  --fg-mute: var(--ink-mute);
  --bg: var(--bg-page);
  --bg-elev: var(--surface);
  --bg-card: var(--surface);
  --bg-deep: var(--surface-3);
  --paper: var(--surface);
  --paper-warm: var(--surface-3);
  --mono: var(--font-data);
  --font-mono-www: var(--font-data);
  --sans: var(--font-ui);
  --serif: var(--font-read);
  --r-sm: var(--radius-sm); /* a stray ref in the old nav-toggle rule */
  /* surfaces were opaque in v2; map any legacy glass name to a solid */
  --glass: var(--surface);
  --glass-strong: var(--surface);
  --glass-soft: var(--surface-2);
  --glass-warm: var(--surface-3);
  --glass-tint: var(--surface);
  --glass-border: var(--line-www);
  --glass-highlight: rgb(255 255 255 / 0.6);
  --glass-shadow: var(--shadow-card);
  /* legacy status aliases */
  --sun: var(--ok-bright);
  --sun-deep: #3aa982;
  --sun-strong: var(--ok-strong);
  --grass: var(--ok);
  --fg-on-accent: var(--accent-on);
}