/* ── Reset ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { background: var(--bg-void); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; min-height: 100dvh; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Design tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds — deep indigo-black */
  --bg-void:    #07070F;
  --bg-base:    #0C0C18;
  --bg-surface: #111120;
  --bg-raised:  #191926;

  /* Borders — slightly blue-tinted */
  --border:        rgba(180, 180, 255, 0.07);
  --border-strong: rgba(180, 180, 255, 0.15);

  /* Accent — vermillion/F1 orange. CTAs and live indicators only */
  --accent:      #FF5500;
  --accent-dim:  rgba(255, 85, 0, 0.08);
  --accent-text: #FFFFFF;

  /* Semantic */
  --win:     #00D4AA;
  --loss:    #FF3030;
  --warn:    #FFB800;
  --neutral: #50506A;

  /* Tier colours */
  --tier-bronze:   #CD7F32;
  --tier-silver:   #A0A8B8;
  --tier-gold:     #FFD700;
  --tier-platinum: #5FD4D4;
  --tier-elite:    #B066FF;
  --tier-apex:     #FF5500;

  /* Text */
  --text:       #E8E8F0;
  --text-dim:   #44445E;
  --text-muted: #14141E;

  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* Spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Radius — zero */
  --r: 0px;

  /* Transitions */
  --t-fast: 70ms cubic-bezier(0, 0, 0.2, 1);
  --t-std:  150ms cubic-bezier(0, 0, 0.2, 1);
}

/* ── Tier colour inheritance ────────────────────────────────────────────────── */
[data-tier="Bronze"]   { --tier-color: var(--tier-bronze); }
[data-tier="Silver"]   { --tier-color: var(--tier-silver); }
[data-tier="Gold"]     { --tier-color: var(--tier-gold); }
[data-tier="Platinum"] { --tier-color: var(--tier-platinum); }
[data-tier="Elite"]    { --tier-color: var(--tier-elite); }
[data-tier="Apex"]     { --tier-color: var(--tier-apex); }

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.u-tabnum { font-variant-numeric: tabular-nums; }
.u-mono   { font-family: var(--font-mono); }
.u-win    { color: var(--win); }
.u-loss   { color: var(--loss); }

:focus-visible             { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }