/* ============================================================
   FIXED TOKENS
   Values that must NOT change with the theme.

   Rank tiers are the clearest case: gold has to read as gold on
   every theme, or the leaderboard stops meaning anything. Themes
   own the app's look; these own the game's vocabulary.
   ============================================================ */

:root {
  /* medal + tier colours — identity, not decoration */
  --tier-gold: #f5c842;
  --tier-gold-2: #ffd966;
  --tier-silver: #b8bfc9;
  --tier-bronze: #cd7f32;
  --tier-emerald: #22c55e;
  --tier-shadow: #7c6fff;
  --tier-viper: #fb923c;
  --tier-reaper: #e81a2a;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 18px;
  --s-6: 24px;
  --s-7: 32px;

  /* layout */
  --app-w: 480px;
  --hdr-h: 61px;
  --nav-h: 64px;

  /* z ladder — keep every new layer in here so they can't fight */
  --z-bg: 0;
  --z-app: 1;
  --z-sticky: 30;
  --z-tabs: 40;
  --z-hdr: 50;
  --z-nav: 60;
  --z-orb: 65;
  --z-sheet-overlay: 70;
  --z-sheet: 71;
  --z-gate: 100;
  --z-toast: 200;

  /* the hexagon used for every avatar */
  --hex: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* Legacy aliases.
   The old single-file build named tokens after the default theme's
   colours (--color-crimson, --color-violet…), which stopped making
   sense the moment a green theme existed. Names are semantic now.
   These aliases keep any old snippet you paste in working. */
:root {
  --color-void: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-rim: var(--rim);
  --color-rim-2: var(--rim-strong);
  --color-crimson: var(--accent);
  --color-crimson-2: var(--accent-2);
  --color-crimson-dim: var(--accent-dim);
  --color-violet: var(--support);
  --color-emerald: var(--support-2);
  --color-bone: var(--text);
  --color-ash: var(--text-dimmer);
  --color-ash-2: var(--text-dim);
  --color-gold: var(--tier-gold);
  --color-silver: var(--tier-silver);
  --color-bronze: var(--tier-bronze);
}