/* ═══════════════════════════════════════════════
   DESIGN TOKENS — tokens.css
   Single source of truth for cairoyepez.com
   Cairo Yepez · cyepez1.github.io

   Linked by every page, before style.css (and
   games-shared.css on games pages). Do not add
   :root blocks anywhere else.

   RECONCILIATION NOTES (historical, Phase 1–2)
   ────────────────────
   Canonical values defined in CLAUDE.md win over
   per-file :root blocks.

   --blue-margin conflict resolved:
     index.html inline had --blue-margin: #7080c0  ← rogue
     games-shared.css and CLAUDE.md both use #a8b4e8 ← canonical adopted
   style.css uses --blue-margin-light: #a8b4e8 (same
   value, different name). Both names kept here for
   backward compat until Phase 2 cleanup.

   Extras below the canonical block are real tokens
   found in the wild (actively used). They belong
   here rather than scattered across three files.
═══════════════════════════════════════════════ */

:root {

  /* ── CANONICAL (CLAUDE.md source of truth) ── */
  --cream:              #f0e8d5;   /* paper background          */
  --cream-dark:         #e2d8c2;
  --maroon:             #6b0f1a;   /* masthead, primary accents */
  --maroon-light:       #8b1a28;
  --olive:              #5a5430;
  --olive-light:        #8a8050;
  --ink:                #1a1410;   /* body text                 */
  --blue-margin:        #a8b4e8;   /* ruled-margin rule         */
  --paper:              #faf6ed;   /* card surface              */

  /* ── ALIASES ── */
  /* style.css uses this name for the same value as --blue-margin */
  --blue-margin-light:  #a8b4e8;

  /* ── EXTRAS — main site (index.html inline) ── */
  --maroon-faint:       #f5eae8;
  --scanline:           rgba(0, 0, 0, 0.07);

  /* ── EXTRAS — games section (games-shared.css) ── */
  --cream-mid:          #ede4cf;
  --maroon-dim:         rgba(107, 15, 26, 0.12);
  --ink-light:          #3a2f25;
  --blue-margin-dim:    rgba(168, 180, 232, 0.25);
  --paper-ruled:        repeating-linear-gradient(
                          180deg,
                          transparent,
                          transparent 23px,
                          rgba(160, 180, 220, 0.13) 23px,
                          rgba(160, 180, 220, 0.13) 24px
                        );

  /* ── CATEGORY TINTS — games section ── */
  --tint-starwars:      #3d2a12;
  --tint-halo:          #0d1f35;
  --tint-openworld:     #1a2d14;
  --tint-indie:         #2a1a35;
  --tint-shooters:      #2d1212;
  --tint-builder:       #1a2818;

  /* ── FUSION 2026 — saturated spot-color accents ── */
  /* Golden Age saturation, held inside the site's warm print temperature.
     Spot-color discipline: one or two moments per viewport, never fields.
     See docs/DESIGN-DIRECTION-2026.md §1. */
  --gold:          #c9920e;   /* spot gold — badges, stamps, "new!" energy     */
  --gold-dark:     #8f6708;
  --teal-ink:      #1d5f5a;   /* the one cool accent — link/visited pairing,
                                 tinted table headers; teal-as-ink, not cyan   */
  --rust:          #b23a1d;   /* saturated warm pop between maroon and gold    */

  /* ── FUSION 2026 — skeuomorphic bevel/gloss (ink-drawn, not plastic) ── */
  --bevel-hi:      rgba(250, 246, 237, 0.85);  /* paper-light top/left edge    */
  --bevel-lo:      rgba(26, 20, 16, 0.35);     /* ink-shade bottom/right edge  */
  --gloss:         linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%);
  --inset-well:    inset 1px 1px 3px rgba(26, 20, 16, 0.25);

  /* ── FUSION 2026 — table-grid chrome ── */
  --grid-rule:     2px solid var(--ink);       /* bold outer table borders     */
  --grid-rule-in:  1px solid var(--cream-dark);/* interior cell rules          */
  --cell-shade:    #e9dfc9;                    /* alternating row/header tint  */
  --titlebar:      var(--maroon);              /* module-box header strip      */

}

/* ── GAMES DARK SURFACE (2026-07-06) ──
   The games section sits on a warm near-black ground (#0e0c0a, same tone as
   .g-banner) instead of cream. Scoped remap: games page templates carry
   class="g-dark" on <body>; the main site is unaffected. The ground may
   become an image later — this is the flat-color interim.
   Panels go dark ("one dark room"), text goes warm cream.
   --cream is NOT remapped: it doubles as the light foreground on the maroon
   masthead/footer/banner — the page ground is set on body in games-shared.css.
   --maroon-light and --teal-ink are punched up inside this scope so accent
   text stays readable; --maroon, --olive, --gold, --tint-* are untouched. */
body.g-dark {
  --cream-mid:    #171310;   /* row hover / callout fill           */
  --cream-dark:   #2e2822;   /* borders & rules (above-surface)    */
  --paper:        #181310;   /* card/panel surface                 */
  --ink:          #e8e0cf;   /* body text → warm cream             */
  --ink-light:    #b9ae96;   /* secondary text                     */
  --cell-shade:   #221c15;   /* table-header/alt-row band          */
  --maroon-light: #c0424f;   /* readable maroon accent on dark     */
  --teal-ink:     #3f9a93;   /* readable teal accent on dark       */
  --bevel-hi:     rgba(250, 246, 237, 0.22);
  --bevel-lo:     rgba(0, 0, 0, 0.65);
  --inset-well:   inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}