/* ==========================================================================
   MTG COMMANDER DISCOVERY — DESIGN TOKENS
   ==========================================================================
   Extracted verbatim from the owner's three existing MTG sites so this app
   reads as a sibling, not a redesign:
     - mtg_stack.html                    (v2.13, most recent)
     - mtg_phases_v2.1.html
     - mtg_keywords_cheatsheet_v2.9.html (v2.9, the "Modern Slate" palette
       origin — see its own header comment, dated 2026-05-24)

   All three files ship byte-identical :root palettes and the identical
   Google Fonts <link> (Inter 400/500/600/700/800 + JetBrains Mono 500/700).
   That is not a coincidence to preserve loosely — it is the one fact this
   file must not drift from.

   ── NAMING MISMATCH, READ THIS BEFORE RENAMING ANYTHING ──────────────────
   The variable names below are holdovers from an earlier DARK theme that
   later got inverted to this light one (see the cheatsheet's own comment:
   "Variable names kept from the old dark theme for code stability; values
   inverted"). As a result, several names now describe the OPPOSITE of what
   they hold:
     --gold        is indigo-700 (#4338ca), not gold/amber.
     --gold-dim    is indigo-500 (#6366f1), not a dim gold.
     --parchment   is slate-800 (#1f2937) TEXT color, not a parchment
                   background — the old dark theme used it as ink-on-dark
                   body copy; here it is dark text on a light page.
     --ink / --ink-2 / --ink-3 are LIGHT backgrounds (off-white / white /
                   hover-tint), not dark "ink" surfaces.
   These names are preserved as-is for cross-site consistency (all three
   source sites, and any future one, share one mental model and one set of
   grep-able tokens). Do not "fix" the names — it would desync this file
   from its siblings. New tokens introduced for this project use plain,
   accurate names instead (see "NEW TOKENS" below) so nobody has to guess.
   ========================================================================== */

:root {
  /* ── Inherited palette (verbatim from all three source sites) ── */
  --ink: #f6f7f9;            /* page background — cool off-white */
  --ink-2: #ffffff;          /* card / panel background — pure white, always bordered */
  --ink-3: #eef0f3;          /* hover / active tint, subtle recessed fills */
  --parchment: #1f2937;      /* primary text — Tailwind slate-800 */
  --parchment-dim: #4b5563;  /* secondary text — slate-600 */
  --parchment-mute: #6b7280; /* tertiary / meta text — slate-500 */
  --gold: #4338ca;           /* primary accent — indigo-700 (links, active states, focus) */
  --gold-dim: #6366f1;       /* secondary accent — indigo-500 (decoration, hover, large text) */
  --rule: #d1d5db;           /* hairline border / divider — gray-300 */

  /* Category accents (level/phase/tag color-coding across the source sites) */
  --c-evergreen: #059669;    /* emerald-600 */
  --c-deciduous: #d97706;    /* amber-600 */
  --c-action: #db2777;       /* pink-600 */
  --c-set: #2563eb;          /* blue-600 */
  --c-ability-word: #64748b; /* slate-500 */
  --c-recent: #ea580c;       /* orange-600 */

  /* ── NEW TOKENS (this project) ──────────────────────────────────────────
     Everything below is new — introduced because the new site needs things
     the three source sites never built (a11y-hardened borders, a type
     scale as reusable tokens, spacing/radius/shadow/motion scales, and a
     bespoke color-identity system). Plainly named on purpose. */

  /* Accessibility-hardened variants — see research/04-design-system.md §5
     for the measured contrast ratios that motivated these. The originals
     above are UNCHANGED; these are additive, opt-in upgrades used only
     where the audit found a real AA failure. */
  --rule-strong: #838a94;         /* 3.3–3.5:1 on ink/ink-2 — use for borders
                                      that are the ONLY boundary cue on an
                                      interactive control (inputs, buttons,
                                      chips, combobox, slider track). Keep
                                      plain --rule for decorative hairlines
                                      (section dividers, card top rules)
                                      where no boundary-contrast rule applies. */
  --c-evergreen-text: #047857;    /* emerald-700 — 5.48:1. Use instead of
                                      --c-evergreen whenever the color paints
                                      actual small text/labels, not just a
                                      border or dot. */
  --c-deciduous-text: #b45309;    /* amber-700 — 5.02:1. Text-safe deciduous. */
  --c-recent-text: #c2410c;       /* orange-700 — 5.18:1. Text-safe recent. */
  /* c-action, c-set, c-ability-word, gold all already clear 4.5:1 as text —
     no text-safe variant needed. See the audit for the full table. */
  --gold-on-dark: #a5b4fc;        /* indigo-300 — 7.36:1 on --parchment used
                                      as a dark surface (e.g. .toast). Plain
                                      --gold-dim only clears 3.29:1 there,
                                      which fails body text on a dark chip. */

  /* Color-identity (WUBRG) pip palette — deliberately NOT a copy of
     Scryfall's mana-symbol colors (their pale cream/blue/black/red/green
     circles). See research/04-design-system.md §2 for the full rationale.
     Chosen to (a) sit in the same "Tailwind 600/700 jewel tone on white"
     register as the category accents above, (b) stay visually distinct
     from every accent already in use, and (c) clear 4.5:1 on white as
     actual small text (these paint a letterform, not just a swatch). */
  --mana-w: #57534e;  /* stone-600 — warm neutral, "order/parchment", 7.63:1 */
  --mana-u: #0369a1;  /* sky-700   — cyan-leaning blue, 5.93:1 (kept distinct
                          from --c-set's indigo-leaning blue) */
  --mana-b: #262626;  /* neutral-800 — near-black, 15.13:1 */
  --mana-r: #dc2626;  /* red-600 — the only true red in the whole palette, 4.83:1 */
  --mana-g: #15803d;  /* green-700 — true grassy green, 5.02:1 (kept distinct
                          from --c-evergreen's teal-leaning emerald) */
  --mana-c: #475569;  /* slate-600 — colorless, 7.58:1 */

  /* ── Typography ── */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Source material uses a fine-grained, hand-tuned scale (13.5px, 14.5px,
     15.5px all occur) rather than a strict ratio — these tokens capture the
     real, repeated stops. Component CSS may still nudge a half-pixel where
     the source did; that is fidelity, not drift. */
  --fs-2xs: 9px;     /* si-tag, cflag, kwb micro-badges */
  --fs-xs: 10px;     /* filter-btn, version-pill, eyebrow-adjacent labels */
  --fs-sm: 11px;     /* band-more, source-note, modal-meta, counters */
  --fs-sm-alt: 12px; /* legend, section-num */
  --fs-base-tight: 13px;   /* chip-name, si-name */
  --fs-base: 14px;         /* ctag, secondary body */
  --fs-body: 16px;         /* root body copy */
  --fs-md: 17px;           /* subtitle */
  --fs-lg: 18px;           /* band-name */
  --fs-xl: 20px;           /* lvl-title */
  --fs-2xl: 22px;          /* section-title */
  --fs-3xl: 28px;          /* modal-name (compact) */
  --fs-4xl: 30px;          /* modal-name (roomy) */
  --fs-hero: clamp(28px, 5vw, 52px); /* h1.title */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;   /* hero title, modal-name */
  --lh-snug: 1.2;     /* perm-name and other tight labels */
  --lh-label: 1.4;    /* small mono labels */
  --lh-body: 1.5;     /* compact paragraphs */
  --lh-base: 1.55;    /* default body copy (matches <body>) */
  --lh-relaxed: 1.6;  /* modal-section paragraphs */

  --ls-tight: 0.01em;
  --ls-snug: 0.02em;
  --ls-wide: 0.05em;
  --ls-wider: 0.08em;
  --ls-label: 0.12em;   /* uppercase micro-labels (step-btn, filter-btn) */
  --ls-label-lg: 0.18em;
  --ls-eyebrow: 0.3em;  /* modal-eyebrow */
  --ls-eyebrow-lg: 0.4em; /* masthead eyebrow */

  /* ── Spacing ── (organic rhythm from the source sites, named not forced
     onto a rigid 4/8 grid — these are the stops that actually recur) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 24px;
  --space-12: 32px;
  --space-13: 40px;
  --space-14: 48px;
  --space-16: 64px;
  --space-18: 80px;

  /* ── Radii ── (flat "architectural" UI chrome at 1–4px; rounder chrome
     reserved for elevated art/popover surfaces; the special asymmetric
     value mimics an actual Magic card's printed corner curvature) */
  --radius-hairline: 1px;  /* .modal-rule, some print-era cards */
  --radius-sm: 2px;        /* dominant UI radius: buttons, inputs, badges, chips */
  --radius-md: 3px;        /* panels: stack-col, perm, teach-card, la-card */
  --radius-lg: 4px;        /* larger inputs / comboboxes (new) */
  --radius-xl: 7px;        /* la-art image corners */
  --radius-2xl: 9px;       /* card-loupe / elevated popovers */
  --radius-full: 50%;      /* dots, pips, circular controls */
  --radius-card: 4.75% / 3.5%; /* real MTG card corner ratio — use ONLY on
                                   488:680 portrait card art, never on UI chrome */

  /* ── Shadows ── (subtle, slate-tinted — never pure black on this light
     theme; the one exception, --shadow-loupe, intentionally goes darker
     because it sits in a floating "zoom" layer above everything else) */
  --shadow-card-hover: 0 6px 22px rgba(31, 41, 55, 0.07);
  --shadow-art: 0 1px 4px rgba(0, 0, 0, 0.22);
  --shadow-art-hover: 0 12px 28px rgba(31, 41, 55, 0.18), 0 0 0 1px rgba(67, 56, 202, 0.18);
  --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(67, 56, 202, 0.06);
  --shadow-loupe: 0 30px 72px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-popover: 0 10px 30px rgba(31, 41, 55, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ── Motion ── */
  --transition-fast: 0.15s ease;      /* dominant hover transition */
  --transition-base: 0.18s ease-out;  /* fades */
  --transition-pop: 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1); /* modal/stack "pop" */

  /* ── Z-index scale ── */
  --z-controls: 100;   /* sticky top-nav / filter controls */
  --z-dropdown: 500;   /* combobox listbox */
  --z-modal: 1000;
  --z-loupe: 1100;      /* card zoom / preview popover, above modals */
  --z-toast: 1200;      /* favorite add/remove toast */

  /* ── Breakpoints (reference only — CSS custom properties cannot be used
     as @media conditions in the browser support this project targets, so
     these exist for JS/documentation parity with the actual @media values
     used throughout base.css). ── */
  --bp-sidebar-collapse: 900px;
  --bp-mobile: 720px;
  --bp-compact: 480px;
}