/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:       #0f0f0f;
  --surface:  #1a1a1a;
  --surface2: #242424;
  --surface3: #2e2e2e;

  /* Borders */
  --border:   #2e2e2e;
  --border2:  #3a3a3a;

  /* Typography */
  --text:   #f0ede8;
  --text2:  #c8c4bc;
  --muted:  #888;

  /* Brand colours */
  --accent:  #c8a96e;   /* primary gold */
  --accent2: #e8c98e;   /* lighter gold (hover / highlight) */
  --teal:    #7cb9a8;   /* secondary teal */
  --danger:  #e05252;

  /* Medal colours (leaderboard) */
  --gold:   #f5d76e;
  --silver: #c0c0c0;
  --bronze: #cd7f32;

  /* Misc */
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0,0,0,.5);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none }

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px }