/* ============================================================================
   Sportsbook reskin v2 — "pitch & floodlight".
   Dark-graphite base, twin accents: betting green (action / price / value)
   and betting yellow (attention / responsible-wagering / age). App shell with
   a fixed left sidebar, a slim top navbar and two right slide-out drawers.
   ============================================================================ */
:root {
  /* Background stack — dark grey graphite. Never pure black. */
  --bg-000: #15171c;          /* page */
  --bg-050: #1b1e24;          /* cards, sidebar, topbar */
  --bg-100: #23272f;          /* hovered cards */
  --bg-150: #2b303a;          /* chips, raised */
  --bg-200: #343a45;          /* chip hover */
  --bg-300: #424955;          /* dividers, strong borders */

  /* Foreground */
  --fg-000: #f3f6f1;          /* primary text */
  --fg-100: #d6dbd2;          /* secondary text */
  --fg-300: #98a1a0;          /* tertiary, meta */
  --fg-500: #6a7270;          /* muted */
  --fg-700: #444b50;

  /* Accent 1 — betting green. Primary action, prices, active, links. */
  --accent:      #1fbf68;
  --accent-soft: #169a52;
  --accent-ink:  #04160c;     /* text on green */

  /* Accent 2 — betting yellow. Highlights, RG emphasis, badges, focus rings. */
  --accent-2:      #f5c518;
  --accent-2-soft: #cf9f0a;
  --accent-2-ink:  #1a1500;   /* text on yellow */

  /* Functional */
  --up:    #2fc275;           /* price drift up */
  --down:  #e0603f;           /* price drift down */
  --rule:  #2a2f37;
  --rule-soft: #21262d;

  --shadow-1: 0 0 0 1px var(--rule), 0 1px 0 var(--rule-soft);
  --shadow-2: 0 18px 38px -22px rgba(0,0,0,.6);
  --shadow-3: 0 26px 64px -30px rgba(0,0,0,.72);

  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 12px;

  --wrap: 1320px;
  --gutter: 22px;

  /* Shell metrics */
  --sidebar-w: 248px;         /* fixed left sidebar */
  --rail-w: 248px;            /* legacy alias (sidebar) */
  --slip-w: 360px;            /* right drawer width */
  --topbar-h: 60px;

  --font-display: "Söhne Halbfett", "Neue Haas Grotesk Display", "GT America", "Space Grotesk", "IBM Plex Sans Condensed", system-ui, sans-serif;
  --font-body:    "Söhne Buch", "Inter Tight", "Neue Haas Grotesk Text", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Non-user-visible variable name (does not render a forbidden string in HTML). */
  --pulse-color: var(--accent);

  /* Translucent accent washes reused across components. */
  --green-wash: rgba(31, 191, 104, .16);
  --green-line: rgba(31, 191, 104, .42);
  --yellow-wash: rgba(245, 197, 24, .16);
}