/* Night game tokens and shared page chrome (docs/design/BRAND.md). Dark is the default; light follows the device setting. */
:root {
  color-scheme: dark light;
  --bg:#0E1116; --surface:#171B22; --surface-sunk:#12161C;
  --border:#262C36; --border-strong:#2A313C; --divider:#1D222B;
  --text:#F4F6EF; --text-body:#D7DCE4; --text-sub:#B7BFCC; --text-muted:#8E98A7; --placeholder:#7D8796;
  --chip-text:#C9D0DA;
  --accent:#B5E844; --accent-text:#B5E844; --on-accent:#0E1116;
  --hot:#FF5A4E; --hot-text:#FF8A80; --live-text:#FF5A4E; --sky-text:#7CC8FF;
  --cta-bg:#F4F6EF; --cta-text:#0E1116;
  --glow-a:rgba(244,246,239,.16); --glow-b:rgba(244,246,239,.10);
  --card-shadow:0 30px 80px rgba(0,0,0,.5);
  --moment-bg:rgba(181,232,68,.10); --moment-border:rgba(181,232,68,.35);
  --body-weight:400;
  --display:"Big Shoulders Display", Impact, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#F5F6F1; --surface:#FFFFFF; --surface-sunk:#ECEEE7;
    --border:#DADDD4; --border-strong:#CDD1C6; --divider:#E3E5DE;
    --text:#0E1116; --text-body:#111418; --text-sub:#262C36; --text-muted:#3F4752; --placeholder:#8A929E;
    --chip-text:#262C36;
    --accent-text:#3F6B00;
    --hot-text:#C2382C; --live-text:#C2382C; --sky-text:#1A6FB0;
    --cta-bg:#0E1116; --cta-text:#FFFFFF;
    --glow-a:rgba(181,232,68,.16); --glow-b:rgba(181,232,68,.40);
    --card-shadow:0 30px 80px rgba(30,40,20,.12);
    --moment-bg:rgba(181,232,68,.40); --moment-border:rgba(140,180,0,.55);
    --body-weight:500;
  }
}

* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; padding:0 max(16px, 4vw);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 55% 45% at 88% -8%, var(--glow-a), transparent 70%),
    radial-gradient(ellipse 45% 40% at 8% -10%, var(--glow-b), transparent 70%);
  background-repeat:no-repeat; background-size:100% 820px;
  color:var(--text); font-family:Barlow, "Helvetica Neue", Arial, sans-serif; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a { color:var(--text); }
:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
::placeholder { color:var(--placeholder); opacity:1; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Bam plus ’bout wordmark, top left of the nav. */
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand img { height:46px; width:auto; display:block; }
.brand span { font-family:var(--display); font-weight:900; font-size:34px; letter-spacing:.5px; line-height:1; }