/* ════════════════════════════════════════════════
   Design Tokens
   Single source of truth for colour, spacing, type, motion.
   Only `--*` declarations belong here.
════════════════════════════════════════════════ */
:root {
  /* ── Surface ──────────────────────────────── */
  --bg:         #f4f6f8;
  --bg2:        #edf0f3;
  --bg3:        #e2e7ec;
  --card:       #ffffff;

  /* ── Border ───────────────────────────────── */
  --border:     #d4dae0;
  --border2:    #c0c9d2;

  /* ── Text ─────────────────────────────────── */
  --text:       #1a2530;
  --text2:      #4a5a68;
  --text3:      #7a8d9c;

  /* ── Brand: Green (primary action) ────────── */
  --green:      #6aae3a;
  --green-bg:   #edf7e6;
  --green-bdr:  #b8dda0;

  /* ── Brand: Silver (logo, neutral text) ───── */
  --silver:     #8a9aaa;
  --silver-bg:  #eef1f4;
  --silver-dk:  #3d5060;

  /* ── Semantic: Amber (warning, action req'd) ─ */
  --amber-bg:   #fff8ec;
  --amber-bdr:  #e8c870;
  --amber-txt:  #7a5800;

  /* ── Semantic: Red (error, negative) ─────── */
  --red-bg:     #fff0ed;
  --red-bdr:    #f0b8a8;
  --red-txt:    #8a2a10;

  /* ── Semantic: Blue (info) ─────────────────── */
  --blue-bg:    #edf4ff;
  --blue-bdr:   #a8c4e8;
  --blue-txt:   #1a4070;

  /* ── Reward: Gold (XP, badges) ─────────────── */
  --gold:       #f0a800;
  --gold-bg:    #fffbec;
  --gold-bdr:   #f0d070;

  /* ── Layout ───────────────────────────────── */
  --radius-sm:  3px;
  --radius:     4px;

  /* ── Motion ───────────────────────────────── */
  --transition: 150ms ease;
}