/* ═══════════════════════════════════════════════
   TOKENS.CSS — Design variables & reset
   PropBetEdge NBA
═══════════════════════════════════════════════ */
:root {
  /* NBA Brand — Blue */
  --sport:#1252AA;
  --sport-b:#1E6FD9;
  --sport-bright:#4A9BF5;
  --sport-l:#EBF2FF;
  --sport-d:#0A3270;
  --sport-glow:rgba(30,111,217,.15);

  /* Aliases */
  --nfl:#1B5E20; --nfl-b:#43A047; --nfl-bright:#66BB6A; --nfl-l:#E8F5E9;
  --mlb:#B8721A; --mlb-l:#FEF3E2;
  --nba:#1252AA; --nba-l:#EBF2FF;
  --nhl:#0B6B4C; --nhl-l:#E1F5EE;

  --ink:#0C0B09; --ink2:#3D3830; --ink3:#8A857E; --ink4:#C4BFB8;
  --paper:#F6F4F0; --white:#FFFFFF; --surface:#FDFCFA;
  --dark:#090A0D; --dark2:#0D1018; --dark3:#101520;
  --line:rgba(0,0,0,.06); --line2:rgba(0,0,0,.11);
  --line-light:rgba(255,255,255,.07); --line-light2:rgba(255,255,255,.12);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:0 24px 64px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.1);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px;
  --ticker-h:40px; --nav-h:62px; --tabs-h:46px;
  --offset:calc(var(--ticker-h) + var(--nav-h) + var(--tabs-h));
  --font-display:'Barlow Condensed',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'DM Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:var(--font-body);cursor:pointer}
input{font-family:var(--font-body)}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(14px,-20px)}66%{transform:translate(-10px,12px)}}
@keyframes roll{to{transform:translateX(-50%)}}
@keyframes bounce{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}
@keyframes countdown-tick{0%{transform:translateY(-4px);opacity:0}100%{transform:translateY(0);opacity:1}}