/* ============================================================
   ARCANA — Design Tokens
   Single source of truth. Load before all other stylesheets.
   ============================================================ */
:root {
  /* — Ground: candlelit near-black, midnight-indigo undertone — */
  --ink-900: #0A0B11;
  --ink-800: #0F1118;
  --ink-700: #161A26;

  /* — Gold ramp — */
  --gold-100: #F6E7B2;
  --gold-200: #E7C878;
  --gold-300: #C8A24C;
  --gold-400: #9A7B36;
  --gold-500: #6E5527;
  --gold-600: #4A3A1C;

  /* — Text — */
  --parchment:     #E8DFC8;
  --parchment-dim: #B9B299;
  /* Body copy sits just under the label parchment. Paragraph text is set in a
     light serif whose thin strokes read dimmer than any measured ratio, so it
     gets its own value — lifted to #E5DCC4 (~14.7:1 on --ink-900, up from the
     earlier #D7CEB4 ~12.5:1) so the running text stops reading grey at 15px. */
  --text-body:     #E5DCC4;

  /* — Jewel accents — */
  --lapis:     #34508C;
  --oxblood:   #7C262B;
  --verdigris: #357D6E;

  /* — Reversed-state accent (canonical) —
     The upright/reversed duality is gold vs verdigris across the app.
     Derived from --verdigris so all four stay in one hue family;
     replaces the ad-hoc greens (#80a880, rgba(60,80,60,…)) the reading
     and card-detail pages each improvised. */
  --reversed:      var(--verdigris);                                           /* base hue */
  --reversed-pale: color-mix(in srgb, var(--verdigris) 55%, var(--parchment)); /* labels on dark */
  --reversed-tint: color-mix(in srgb, var(--verdigris) 9%, transparent);       /* box fills */
  --reversed-line: color-mix(in srgb, var(--verdigris) 38%, transparent);      /* borders */

  /* — Suit accents (canonical; consumed by .suit-tile + cards.js) —
     Values match what the tiles render today, so adopting these is a
     no-op visually. The two golds mirror the gold ramp on purpose. */
  --suit-major:     #C8A24C;  /* gold  — mirrors --gold-300 */
  --suit-wands:     #9A7B36;  /* fire  — mirrors --gold-400 */
  --suit-cups:      #5D8AA8;  /* water — muted lapis */
  --suit-swords:    #A89968;  /* air   — pale tarnished gold */
  --suit-pentacles: #5A8060;  /* earth — muted verdigris */

  /* — Font roles (consolidated — see F4). Each role is a one-line change. — */
  --font-display: 'Cinzel', serif;               /* titles, labels, eyebrows, nav */
  --font-body:    'EB Garamond', Georgia, serif; /* body copy & descriptions */
  --font-accent:  'Cormorant Garamond', serif;   /* card names & small-caps labels */
  --font-mono:    'JetBrains Mono', monospace;    /* technical meta */

  /* — Type scale (perfect-fourth) — */
  --step--1: 0.8rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.563rem;
  --step-3:  1.953rem;
  --step-4:  2.441rem;
  --step-display: clamp(3.5rem, 8vw, 7rem);

  /* — Spacing (8px base) — */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* — Tracking — */
  --track-label:   0.2em;
  --track-display: 0.01em;

  /* — Letterspaced-caps scale —
     43 rules across the app set `text-transform: uppercase` + `letter-spacing`,
     and almost none set a weight — so five distinct roles (brand, nav, eyebrow,
     field label, caption) all landed in one 8–12px register and read as a single
     flat tier. These steps separate them on TWO axes at once:

       size   descends 16.8 → 8.6px  (wider than before, so adjacent tiers no
              longer share the same 9–12px register)
       weight ladders 700/600/500/400 across the Cinzel range already loaded, so
              tiers at similar sizes still read apart by stroke weight alone

     Tracking runs opposite to size on purpose: the widest tracking goes to the
     smallest, quietest marker (the eyebrow), because wide-tracked caps read as
     "section marker" while tight-tracked caps read as "text you scan". */
  --caps-1-size: 1.05rem; --caps-1-track: .3em;  --caps-1-weight: 700; /* brand      */
  --caps-2-size: .85rem;  --caps-2-track: .16em; --caps-2-weight: 500; /* nav, tabs  */
  --caps-3-size: .75rem;  --caps-3-track: .45em; --caps-3-weight: 600; /* eyebrow    */
  /* Tiers 4 and 5 split on CONTENT vs SCAFFOLDING, not on where they sit:
     tier 4 is caps that carry meaning (keywords, orientation), tier 5 is the
     words that only frame other words ("ELEMENT", captions, footer). They now
     part on both size AND weight (11.2px/600 vs 8.6px/400), so the card's
     keyword line no longer flattens into the field labels beneath it. */
  --caps-4-size: .7rem;   --caps-4-track: .16em; --caps-4-weight: 600; /* content   */
  --caps-5-size: .54rem;  --caps-5-track: .14em; --caps-5-weight: 400; /* scaffolding*/
}