/* The Sports King · Odds — design tokens (site/DESIGN.md). P2.6: neutral, untinted greys with white-alpha layers
   (dark) / black-alpha layers (light). GOLD = interface state only (active nav bar, sorted column, selected book, primary
   button, Book selector, focus). GREEN = money only (EV, best price, profit, "Open at" CTA). */
:root {
  color-scheme: dark;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hero: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* hero figures only */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --tracking-caps: .08em; --tracking-nav: .14em;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 12px; --r-pill: 999px;
  --sidebar: 224px; --sidebar-rail: 64px; --topbar: 56px; --tabbar: 56px; --content-max: 1680px;
  --row-3: 64px; --row-1: 48px; --row-compact: 40px;
  --z-sticky: 5; --z-head: 20; --z-drawer: 60; --z-pop: 70; --z-tip: 80; --z-toast: 90;
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: .14s;

  /* dark: no hue tint; layers are white at low alpha */
  --bg-0: #08090A;          /* table bodies, drawers */
  --bg: #0B0C0E;            /* page */
  --bg-side: #111214;       /* sidebar */
  --bg-1: #131416;          /* panels */
  --bg-2: #1A1C1F;          /* chrome: header rows, inputs */
  --bg-elev: #232529;       /* popovers, tiles, badges */
  --bg-3: rgba(255, 255, 255, .035);   /* hover */
  --bg-4: rgba(255, 255, 255, .07);    /* selected */
  --line: rgba(255, 255, 255, .08);
  --line-row: rgba(255, 255, 255, .06);
  --line-2: #303338;
  --line-input: rgba(255, 255, 255, .15);
  --text: #F4F5F6;
  --text-2: rgba(244, 245, 246, .70);
  --text-3: #898D94;
  --text-4: rgba(244, 245, 246, .42);
  --head-blur: rgba(26, 28, 31, .78);
  --bar-blur: rgba(11, 12, 14, .85);
  --brand: #F0C445;         /* The Sports King gold: interface state */
  --brand-2: #FFD866;
  --brand-ink: #1A1404;
  --brand-soft: rgba(240, 196, 69, .08);
  --brand-soft-2: rgba(240, 196, 69, .14);
  --brand-line: rgba(240, 196, 69, .45);
  --glow: 0 0 14px rgba(240, 196, 69, .22);
  --pos: #5BE34A;           /* money: +EV, best price, profit */
  --pos-2: #45C236;
  --pos-text: #7CF06A;
  --pos-soft: rgba(91, 227, 74, .14);
  --pos-cell: rgba(91, 227, 74, .10);
  --pos-line: rgba(91, 227, 74, .40);
  --neg: #F2585B; --neg-text: #FF7A7C; --neg-soft: rgba(242, 88, 91, .14); --neg-line: rgba(242, 88, 91, .40);
  --warn: #F5A524; --warn-soft: rgba(245, 165, 36, .13);
  --flash-up: rgba(91, 227, 74, .22); --flash-down: rgba(245, 158, 11, .25);
  --toplight: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-float: 0 18px 48px -16px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
  --scrim: rgba(0, 0, 0, .55);
  --skeleton: #1A1C1F; --skeleton-hi: #232529;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(240, 196, 69, .6);
}

/* light: the same logic mirrored -- neutral greys, black-alpha layers, no blue cast; colours darkened for contrast */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #FFFFFF; --bg: #F5F5F6; --bg-side: #FAFAFA; --bg-1: #FFFFFF; --bg-2: #F2F2F3; --bg-elev: #EBEBEC;
  --bg-3: rgba(0, 0, 0, .03); --bg-4: rgba(0, 0, 0, .06);
  --line: rgba(0, 0, 0, .09); --line-row: rgba(0, 0, 0, .065); --line-2: #D4D5D7; --line-input: rgba(0, 0, 0, .16);
  --text: #111214; --text-2: rgba(17, 18, 20, .72); --text-3: #6B6E74; --text-4: rgba(17, 18, 20, .40);
  --head-blur: rgba(242, 242, 243, .82); --bar-blur: rgba(250, 250, 250, .88);
  --brand: #B98A12; --brand-2: #9C7409; --brand-ink: #FFFFFF;
  --brand-soft: rgba(185, 138, 18, .08); --brand-soft-2: rgba(185, 138, 18, .14); --brand-line: rgba(185, 138, 18, .50);
  --glow: 0 0 12px rgba(185, 138, 18, .20);
  --pos: #2E9E22; --pos-2: #23801A; --pos-text: #23801A; --pos-soft: rgba(46, 158, 34, .11); --pos-cell: rgba(46, 158, 34, .08);
  --pos-line: rgba(46, 158, 34, .45);
  --neg: #CF2F35; --neg-text: #C02A30; --neg-soft: rgba(207, 47, 53, .09); --neg-line: rgba(207, 47, 53, .40);
  --warn: #A86400; --warn-soft: rgba(214, 135, 0, .12);
  --flash-up: rgba(46, 158, 34, .18); --flash-down: rgba(214, 135, 0, .20);
  --toplight: inset 0 1px 0 rgba(255, 255, 255, .8);
  --shadow-float: 0 18px 48px -18px rgba(17, 18, 20, .28), 0 0 0 1px var(--line);
  --scrim: rgba(17, 18, 20, .30);
  --skeleton: #EDEDEE; --skeleton-hi: #F6F6F7;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(185, 138, 18, .55);
}