/* ============================================================================
   PREVIOUSLY — DESIGN TOKENS · SINGLE SOURCE OF TRUTH (James, 2026-10-06)
   ----------------------------------------------------------------------------
   Every color, font, and base spacing value on the site lives here.
   NOTHING outside this file (and the documented EXCEPTIONS below) may use
   a raw color value — no hex, rgb(), rgba(), hsl() in stylesheets, <style>
   blocks, or inline style attributes. Use the variables.

   LOADING: this file MUST be the first stylesheet in every page's <head>,
   before theme-desert.css and all component stylesheets, so tokens resolve
   from first paint with zero flash.

   LINT: production-deploy-lock/design-token-gate.py fails the deploy if any
   raw color appears outside this file and the EXCEPTIONS list. James's words:
   "not like having to patch up each different color."

   Palette: Desert Golden Hour (James-approved 2026-10-06).
     Background #FAF6EE · Cards #FFFFFF · Text #2A1C11
     Accent #C2410C (burnt orange) · Depth #92400E
   ========================================================================== */

:root {
  /* ---- Desert palette anchors (canonical values — change here, change everywhere) ---- */
  --desert-bg: #FAF6EE;            /* warm cream — page background */
  --desert-card: #FFFFFF;          /* cards, sheets, modals, popups */
  --desert-pressed: #F3EDE0;       /* pressed / deepest inset / subtle fills */
  --desert-ink: #2A1C11;           /* primary text */
  --desert-ink-dim: rgba(42, 28, 17, .68);    /* secondary text */
  --desert-ink-faint: rgba(42, 28, 17, .52);  /* tertiary / hint text */
  --desert-rule: rgba(42, 28, 17, .14);        /* hairlines, idle borders */
  --desert-accent: #C2410C;        /* burnt orange — THE desert accent */
  --desert-accent-deep: #92400E;   /* depth — hover, pressed, gradients */
  --desert-accent-soft: rgba(194, 65, 12, .12);  /* soft wash (pills, active) */
  --desert-accent-faint: rgba(194, 65, 12, .07);
  --desert-accent-glow: rgba(194, 65, 12, .30);  /* focus rings, shadows */
  --desert-accent-glow-lg: rgba(194, 65, 12, .48);
  --desert-accent-ember: #E8762D;  /* luminous accent for dark wells */
  --desert-shadow: rgba(120, 84, 40, .14);  /* warm paper shadow base */
  --desert-glass: rgba(250, 246, 238, .90);  /* sticky bars over content */

  /* ---- Semantic aliases (prefer these in component CSS) ---- */
  --color-bg: var(--desert-bg);
  --color-surface: var(--desert-card);
  --color-surface-deep: var(--desert-pressed);
  --color-text: var(--desert-ink);
  --color-text-dim: var(--desert-ink-dim);
  --color-text-faint: var(--desert-ink-faint);
  --color-line: var(--desert-rule);
  --color-accent: var(--desert-accent);
  --color-accent-deep: var(--desert-accent-deep);
  --color-on-accent: #FFFFFF;      /* text on burnt-orange fills */

  /* ---- Status (light-surface legible, meaning preserved) ---- */
  --color-live: var(--desert-accent);
  --color-win: #2E7D4F;            /* 6.0:1 on cream */
  --color-warn: #8A5A12;           /* 6.1:1 on cream */
  --color-loss: #A83A6E;
  --color-info: #1D5FBF;

  /* ---- Shadows (warm sand depth, never black) ---- */
  --shadow-card: 0 18px 44px var(--desert-shadow);
  --shadow-card-hover: 0 14px 34px rgba(120, 84, 40, .20);
  --shadow-btn: 0 10px 34px var(--desert-accent-glow);
  --shadow-pop: 0 40px 120px rgba(120, 84, 40, .22), 0 0 0 1px rgba(194, 65, 12, .18);
  --shadow-bar: 0 8px 28px var(--desert-shadow);

  /* ---- Focus ---- */
  --focus-outline: 2px solid var(--desert-accent-deep);
  --focus-ring: 0 0 0 3px var(--desert-accent-glow);

  /* ---- Legacy aliases (noir-era variable names, remapped to desert) ----
     Old stylesheets reference these; they now resolve to desert values so
     nothing breaks while the migration completes. New code: use --color-*. */
  --pv-noir: var(--desert-bg);
  --pv-noir-2: var(--desert-card);
  --pv-noir-3: var(--desert-pressed);
  --pv-glass: var(--desert-glass);
  --pv-ivory: var(--desert-ink);
  --pv-ivory-dim: var(--desert-ink-dim);
  --pv-ivory-faint: var(--desert-ink-faint);
  --pv-rule: var(--desert-rule);
  --pv-red: var(--desert-accent);
  --pv-red-deep: var(--desert-accent-deep);
  --pv-red-ember: var(--desert-accent-ember);
  --pv-red-glow: var(--desert-accent-glow);
  --pv-live: var(--desert-accent);
  --pv-on-red: #FFFFFF;
  --pv-warn: var(--color-warn);
  --pv-muted-ok: var(--color-win);
  --text-on-dark: var(--desert-ink);
  --text-on-dark-muted: var(--desert-ink-dim);
  --text-on-dark-faint: var(--desert-ink-faint);
  --brand-bg: var(--desert-bg);
  --brand-ink: var(--desert-ink);
  --brand-action: var(--desert-ink);
  --brand-secondary: var(--desert-card);
  --surface-dark: var(--desert-bg);
  --surface-dark-raised: var(--desert-card);
  --surface-dark-soft: var(--desert-pressed);
  --surface-paper: var(--desert-bg);
  --surface-cream: var(--desert-card);
  --surface-sand: var(--desert-pressed);

  /* ---- Data-viz (league/team colors keep their meaning; light-adjusted) ---- */
  --lg-green: #2E7D4F;
  --lg-gold: #8A5A12;
  --lg-blue: #1D5FBF;
  --lg-pink: #A83A6E; --lg-pink-rgb: 168, 58, 110;

  /* ---- Brand (James-confirmed: DO NOT CHANGE these hues) ---- */
  --brand-red: #EC4634;            /* Rewind Red — wordmark glyph only */
  --brand-red-deep: #B73224;
  --brand-red-ember: #FF6B4A;

  /* ---- Social brand colors (third-party identities — never recolor) ---- */
  --social-facebook: #1877F2;
  --social-x: #000000;
  --social-instagram: #E1306C;
  --social-spotify: #1DB954; --social-spotify-rgb: 29, 185, 84;
  --social-youtube: #FF0000;
  --social-tiktok: #000000;

  /* ---- Typography ---- */
  --font-serif: "Georgia", "Times New Roman", serif;
  --font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;

  /* ---- RGB triplets (for alpha-preserving rgba(var(--x-rgb), a) usage) ---- */
  --desert-bg-rgb: 250, 246, 238;
  --desert-card-rgb: 255, 255, 255;
  --desert-pressed-rgb: 243, 237, 224;
  --desert-ink-rgb: 42, 28, 17;
  --desert-accent-rgb: 194, 65, 12;
  --desert-accent-deep-rgb: 146, 64, 14;
  --desert-accent-ember-rgb: 232, 118, 45;
  --desert-shadow-rgb: 120, 84, 40;
  --brand-red-rgb: 236, 70, 52;
  --well-bg-rgb: 10, 10, 11;
  --well-text-rgb: 244, 239, 230;
  --well-scrim-rgb: 10, 10, 11;
  --color-warn-rgb: 138, 90, 18;
  --color-win-rgb: 46, 125, 79;
  --color-info-rgb: 29, 95, 191;
}

/* ============================================================================
   DOCUMENTED EXCEPTIONS — raw colors allowed ONLY here and in the scopes below.
   The lint gate (design-token-gate.py) permits these exact values in these
   exact contexts. Everything else must use variables.
   ----------------------------------------------------------------------------
   1. DARK MEDIA WELLS — video players, image scrims, hero overlays on photos.
      A player is black in daylight too (YouTube in light mode). Text inside
      wells uses --well-text (#F4EFE6), never --desert-ink.
      Well tokens:
   ========================================================================== */
:root {
  --well-bg: #0A0A0B;
  --well-bg-soft: #141416;
  --well-text: #F4EFE6;
  --well-text-dim: rgba(244, 239, 230, .72);
  --well-text-faint: rgba(244, 239, 230, .55);
  --well-rule: rgba(244, 239, 230, .14);
  --well-accent: var(--desert-accent-ember);  /* luminous on dark */
  --well-scrim: rgba(10, 10, 11, .55);       /* modal scrims over page */
  --well-shadow: rgba(0, 0, 0, .45);         /* depth inside dark wells */
}
/* Well scopes (selectors allowed to use well tokens AND raw well colors):
   video, .pv-player, .pv-media-well, .pv-feature, body.gta-hub,
   .hero with photographic background + .shade overlay pattern,
   .pv-overlay (modal scrim), [data-well] */
[data-well],
.pv-player, .pv-media-well, .pv-feature, body.gta-hub,
.pv-overlay {
  --text-on-dark: var(--well-text);
  --text-on-dark-muted: var(--well-text-dim);
  --text-on-dark-faint: var(--well-text-faint);
}

/* EXCEPTION 2: games/gta/ — art-directed dark GTA VI hub page. Stays dark
   by design (James-approved). Uses well tokens; raw well colors permitted
   in that directory only. */
/* EXCEPTION 3: theme-desert.css body[data-theme="classic"] rollback scope —
   preserves the pre-flip noir values verbatim for ?theme=classic. Raw dark
   colors permitted inside that selector block only. */
/* EXCEPTION 4: Team brand colors in data files (team primary/secondary hex
   in JSON/manifests, e.g. sports/data/teams-directory.json) — data, not
   presentation. Rendered through team-color CSS variables, never raw. */