:root {
  --bg: #0a1622;
  --bg-2: #0e1d2e;
  --surface: #16273a;
  --surface-2: #1c3148;
  --surface-3: #122032;
  --card-bg: #16273a;

  --navy: #2a3a52;
  --slate: #5a6b8a;
  --slate-bright: #8ea3c4;
  --silver: #d8dce0;

  --cerulean: #6f9bc9;
  --cerulean-soft: rgba(142, 163, 196, .14);
  --punch: #e0344a;
  --punch-2: #e05a5a;
  --punch-bright: #ff7a82;
  --punch-soft: rgba(224, 52, 74, .14);
  --ok: #4ade80;
  --gold: #e9c44c;

  --ink: #eef2f6;
  --ink-strong: #ffffff;
  --ink-soft: #c2cbda;
  --ink-mute: #9aa7bd;
  --line: rgba(216, 220, 224, .12);
  --line-soft: rgba(216, 220, 224, .06);

  --rank-wood: #8a6240;
  --rank-iron: #aeb4bc;
  --rank-gold: #e9c44c;
  --rank-obsidian: #6b5e7d;
  --rank-legend: #8a5cb8;
  --rank-champion: #c0392b;

  --font-display: "Sora", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "Inter", system-ui, Arial, sans-serif;

  --fs-hero: clamp(2.6rem, 6.2vw, 4.6rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --lh-tight: 1.1;
  --lh-body: 1.6;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --container: 1180px;
  --container-narrow: 760px;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow: 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --glow-cerulean: 0 0 24px rgba(142, 163, 196, .3);
  --glow-punch: 0 0 24px rgba(224, 52, 74, .45);
  --ring: 0 0 0 3px rgba(142, 163, 196, .65);

  --speed: .2s;
  --speed-slow: .5s;
  --ease: cubic-bezier(.32, .72, .31, 1);

  --header-h: 72px;
}