/*
 * SportsGods canonical design tokens.
 * Single source of truth — see DESIGN.md for the human-readable spec.
 *
 * Dark is the default. Light mode is opt-in via [data-theme="light"]
 * on <html>; shared.js reads sg_theme from localStorage on load.
 *
 * Color naming follows the existing CSS-var convention used across
 * the inline <style> blocks. Aliases (--accent, --accent-2, --danger)
 * are added so the dynamic tier-gate / usage-counter components
 * rendered by js/shared.js resolve correctly.
 */

:root {
  /* Surface stack */
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface-2: #1a1a24;
  --surface-3: #22222e;

  /* Text */
  --text: #f0f0f5;
  --text-2: #8888a0;
  --text-3: #9494b5;

  /* Borders */
  --border: rgba(255,255,255,.06);
  --border-hover: rgba(255,255,255,.12);

  /* Semantic accents — desaturated from the original neon green so the
     CTA buttons, brand mark, and stat pills don't dominate the page. */
  --green: #18a957;
  --green-dim: rgba(24,169,87,.1);

  --red: #ef4444;
  --red-dim: rgba(239,68,68,.1);

  --blue: #60a5fa;
  --blue-dim: rgba(96,165,250,.1);

  --gold: #f59e0b;
  --gold-dim: rgba(245,158,11,.1);

  /* Demo banner gradient — desaturated from #7c3aed→#2c7be5 so it reads
     as "system notice" rather than "pay attention to me right now". */
  --purple: #8b6cd8;
  --purple-dim: rgba(139,108,216,.1);
  --demo-grad-start: #6c4ec3;
  --demo-grad-end: #3a6dc5;

  /* Aliases used by js/shared.js (tier-gate icon, CTA gradient, usage counter) */
  --accent: var(--green);
  --accent-2: #2bb867;
  --danger: var(--red);

  /* Sticky nav backgrounds (translucent over page bg) */
  --nav-bg: rgba(10,10,15,.85);
  --nav-bg-mobile: rgba(10,10,15,.95);

  /* Cursor-inspired elevation. Multi-layer shadow for emphasized cards;
     single-layer subtle outline for low-elevation surfaces. The hairline
     ring (last shadow) substitutes for a 1px border so cards still read
     as elevated even on the same-color surface beneath them. Ring
     opacity bumped to .08 in dark mode after parity audit — at .04/.05
     the ring was nearly invisible against #12121a surfaces. */
  --shadow-elevated: 0 28px 70px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-subtle: 0 0 0 1px rgba(255,255,255,.08), 0 18px 36px -18px rgba(0,0,0,.5);

  /* Canonical radius scale — pages currently mix 4 / 8 / 10 / 12 / 14 /
     18 ad-hoc. New rules should pick from this. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* Layout rhythm. Section gap matches the Cursor spec's 43-67px range
     while staying close to the existing 56-72px pattern in index.html. */
  --section-gap: 64px;
  --card-padding: 22px;
  --element-gap: 8px;

  /* Wide-content max-width — replaces the 1100px ad-hoc value used by
     the homepage sections, top-nav, analytics leaderboard, etc. 1280
     gives ~16% more horizontal room on a 1920px monitor without
     stretching content past a comfortable read measure (text columns
     stay capped at ch units regardless). */
  --page-max-width: 1280px;
}

[data-theme="light"] {
  /* Light surface: shifted from cool gray (#f7f8fa) to warm parchment
     (#f7f7f4) for a softer, more "studio" feel — matches Cursor's
     Canvas Parchment exactly. Surface tints follow with a parallel
     warm shift so cards still read as one tier above the page. */
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --surface-3: #e2e1db;

  --text: #15151c;
  --text-2: #4b4b60;
  --text-3: #6a6a82;

  --border: rgba(15,20,40,.08);
  --border-hover: rgba(15,20,40,.16);

  /* Light-mode green: darkened from #0f8744 to pass WCAG AA 4.5:1
     against the warm-off-white surfaces (#f7f7f4 + #efeee9). Previous
     value tested at 3.95-4.28:1 across ROI numbers, eyebrow labels,
     and inline CTAs — verified via axe-core 2026-05-17 capture. */
  --green: #0a6632;
  --green-dim: rgba(10,102,50,.1);

  /* Light-mode --red and --gold darkened to pass WCAG AA 4.5:1 on the
     warm surface tints (#efeee9, #ebdeda). Previous values landed at
     4.41-4.44:1 on bold .lm-roi and .loss chips. */
  --red: #a31f25;
  --red-dim: rgba(163,31,37,.08);

  --blue: #1f5fc7;
  --blue-dim: rgba(31,95,199,.08);

  --gold: #8a4d00;
  --gold-dim: rgba(138,77,0,.1);

  --purple: #5e36b8;
  --purple-dim: rgba(94,54,184,.08);
  --demo-grad-start: #5733a8;
  --demo-grad-end: #2a5fb5;

  --accent: var(--green);
  --accent-2: #0a6f37;
  --danger: var(--red);

  --nav-bg: rgba(247,248,250,.86);
  --nav-bg-mobile: rgba(247,248,250,.95);

  /* Light-mode shadow stack — softer than dark since the surface is
     bright ivory. Matches Cursor's parchment elevation rhythm. */
  --shadow-elevated: 0 28px 70px rgba(0,0,0,.14), 0 14px 32px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05);
  --shadow-subtle: 0 0 0 1px rgba(0,0,0,.06), 0 18px 36px -18px rgba(0,0,0,.18);
}

/* Tabular numerals + slashed zero on every piece of numeric chrome.
   - tabular-nums fixes digit width so live-updating odds, ROI %, win
     rate, scores, and clocks don't reflow when digits change.
   - slashed-zero turns the 0 into 0̸ so it never visually collides
     with O at small sizes — crucial in dense leaderboard rows.
   Inter and JetBrains Mono both ship these features; effect is a
   no-op on non-numeric text, so this is safe to broaden. */
.mono,
[class*="mono"],
.stat-val,
.stat-context,
.badge,
.score-line,
.final-score,
.price,
.odds,
.tr-kpi .v,
.tr-sport-row .num,
.tr-sport-row .meta,
.a-metric .val,
.a-metric .ctx,
.a-play .price,
.a-book .bk-odds,
.summary-pill .val,
.summary-window .val,
[id^="stat"],
[id$="ROI"],
[id$="WinRate"] {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Respect reduced-motion preferences — kills the live-pulse and
   easing animations for users who've opted out at the OS level. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
