/* Oddsprey v2 design tokens. Dark first, light in parity.

   The theme is the existing mechanism: _head resolves it before first paint and writes
   data-theme="dark|light" on <html>. The selectors below are attribute selectors, not :root only,
   so any element can re-scope the palette (the styleguide renders both themes side by side).

   One accent. Emerald means primary and positive. Amber only warns, never links. Red only loss. */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0F14;
  --surface: #121921;
  --surface-2: #18212B;
  --line: #243040;
  --text: #E8EDF2;
  --muted: #8B98A5;
  --accent: #34D399;
  --accent-fill: #34D399;         /* buttons and bars: the brand emerald in both themes */
  --accent-ink: #052E1F;          /* text on an emerald fill */
  --accent-soft: rgba(52, 211, 153, .12);
  --warn: #FBBF24;
  --warn-soft: rgba(251, 191, 36, .12);
  --loss: #F87171;
  --loss-soft: rgba(248, 113, 113, .12);
  --bar-rest: #2C3A4A;            /* draw / away segments of a probability bar */
  --header-glass: rgba(11, 15, 20, .72);
  --hero-fade: linear-gradient(90deg, rgba(11, 15, 20, .92) 0%, rgba(11, 15, 20, .55) 55%, rgba(11, 15, 20, 0) 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);

  /* Gamblers. Osprey is the house, Falcon the aggressive one, Owl the conservative one. */
  --g-osprey: #34D399;
  --g-osprey-soft: rgba(52, 211, 153, .14);
  --g-falcon: #A78BFA;
  --g-falcon-soft: rgba(167, 139, 250, .14);
  --g-owl: #38BDF8;
  --g-owl-soft: rgba(56, 189, 248, .14);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F5F7FA;
  --surface-2: #EDF1F5;
  --line: #E3E8EE;
  --text: #0B0F14;
  --muted: #5B6875;
  /* Emerald text on white needs a darker step to pass 4.5:1. Fills keep the brand emerald. */
  --accent: #047857;
  --accent-fill: #34D399;
  --accent-ink: #052E1F;
  --accent-soft: rgba(16, 185, 129, .12);
  --warn: #A14A07;
  --warn-soft: rgba(251, 191, 36, .18);
  --loss: #B91C1C;
  --loss-soft: rgba(248, 113, 113, .14);
  --bar-rest: #D5DCE4;
  --header-glass: rgba(255, 255, 255, .78);
  --hero-fade: linear-gradient(90deg, rgba(11, 15, 20, .88) 0%, rgba(11, 15, 20, .5) 55%, rgba(11, 15, 20, 0) 100%);
  --shadow: 0 1px 2px rgba(11, 15, 20, .06), 0 8px 24px rgba(11, 15, 20, .06);

  --g-osprey: #059669;
  --g-osprey-soft: rgba(52, 211, 153, .16);
  --g-falcon: #7C3AED;
  --g-falcon-soft: rgba(167, 139, 250, .18);
  --g-owl: #0284C7;
  --g-owl-soft: rgba(56, 189, 248, .16);
}

/* No script, no stored choice: follow the machine. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #FFFFFF; --surface: #F5F7FA; --surface-2: #EDF1F5; --line: #E3E8EE;
    --text: #0B0F14; --muted: #5B6875; --accent: #047857; --accent-fill: #34D399;
    --accent-soft: rgba(16, 185, 129, .12); --warn: #A14A07; --warn-soft: rgba(251, 191, 36, .18);
    --loss: #B91C1C; --loss-soft: rgba(248, 113, 113, .14); --bar-rest: #D5DCE4;
    --header-glass: rgba(255, 255, 255, .78);
    --g-osprey: #059669; --g-falcon: #7C3AED; --g-owl: #0284C7;
  }
}

:root {
  /* Inter when the visitor has it installed, then the platform UI face. The CSP allows fonts
     from 'self' only, so no web font is fetched. */
  --font: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 4px scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-sm: 8px; --r: 12px; --r-lg: 14px; --r-pill: 999px;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 48px;

  --wrap: 1180px;
  --header-h: 60px;
  --tabbar-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}