/* Habitat design tokens, generated from design-pack/tokens.json */
:root {
  --surface-100: #ebebee;  /* App background: the whitish-gray ground the glass rail floats on. */
  --surface-000: #ffffff;  /* Main content area and solid cards. */
  --ink: #1c1a22;  /* Primary text and active icons on surface-000, surface-100 and glass. */
  --ink-muted: #5f5a6b;  /* Secondary text and resting icons on glass and surface-100. */
  --tile: #e2e2e7;  /* The nav toggle tile: a light gray square, a step darker than the white rail. */
  --tile-hover: #d8d8de;  /* Toggle tile while hovered. */
  --close-red: #d0261c;  /* The red X on the toggle tile (rail open). 4.1:1 on tile. */
  --tile-ink: #3a3a42;  /* The three menu bars on the toggle tile (rail collapsed). 8.7:1 on tile. */
  --tile-edge: rgba(28, 26, 34, 0.08);  /* Hairline inside the toggle tile so it stays visible on the gray background when the rail is collapsed. */
  --line: rgba(28, 26, 34, 0.10);  /* Hairline window and divider borders. */
  --glass-fill: rgba(255, 255, 255, 0.74);  /* Resting fill of the glass nav rail. Always paired with the glass blur. */
  --glass-fill-hover: rgba(255, 255, 255, 0.88);  /* Glass rail fill while the pointer is over it. */
  --glass-edge: rgba(255, 255, 255, 0.85);  /* 1px inner highlight border on glass surfaces. */
  --glass-chip: rgba(28, 26, 34, 0.06);  /* Hover chip behind a nav button: a faint ink tint, since the rail is nearly white. */
  --glass-chip-active: #ffffff;  /* Solid chip behind the current page's nav button. */
  --accent: #26389a;  /* Habitat dark blue. Current-page dot, focus rings, the dashboard meter and bars. 9.93:1 on surface-000. */
  --cover-placeholder: #dedee3;  /* Empty cover-picture area on the profile card until the person adds one. */
  --brand: var(--accent);  /* Habitat's brand colour, dark blue (same as accent): logo, primary chunky buttons, links. */
  --brand-edge: #17225e;  /* The darker ledge under primary chunky buttons (4px). */
  --btn-secondary-edge: #d8d8de;  /* Ledge under white secondary chunky buttons. */
  --streak: #7a45c9;  /* Streak flame, in Habitat purple. Icon only, never text. */
  --streak-bg: #efe8fa;  /* Soft purple fill behind the streak chip; text on it stays ink (14:1). */
  --xp: #3550c8;  /* XP bolt icon, in blue. Icon only, never text. */
  --stat-bg: #f6f6f8;  /* Stat tiles on the profile card. */
  --rank-pill-bg: #e6eaf8;  /* Rank pill fill (shown for Elite; the tint follows the rank family: grey, blue or purple). */
  --rank-pill-ink: #26389a;  /* Rank pill text, 8.27:1 on rank-pill-bg. */
  --purple: #7a45c9;  /* Habitat purple: the second brand colour. Streak, top ranks, highlights. 5.9:1 on white. */
  --purple-soft: #c4adf3;  /* Light purple for highlights inside icons and art. */
  --night: #12121c;  /* Habitat black: the Legend rank, dark cover art, strong accents. */
  --rank-rookie: #8a8d9c;  /* Rookie rank badge colour. Badges always carry their name too. */
  --rank-contender: #c9ccd8;  /* Contender rank badge colour. Badges always carry their name too. */
  --rank-challenger: #4a63d6;  /* Challenger rank badge colour. Badges always carry their name too. */
  --rank-elite: #26389a;  /* Elite rank badge colour. Badges always carry their name too. */
  --rank-master: #7a45c9;  /* Master rank badge colour. Badges always carry their name too. */
  --rank-grandmaster: #4a2590;  /* Grandmaster rank badge colour. Badges always carry their name too. */
  --rank-legend: #12121c;  /* Legend rank badge colour. Badges always carry their name too. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 18px;
  --shadow-glass: 0 10px 30px rgba(28, 26, 34, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-chip: 0 2px 8px rgba(28, 26, 34, 0.08);
  --shadow-ledge: 0 4px 0 #17225e;
  --blur-glass: 22px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Nunito", "Inter", system-ui, sans-serif;
}
.display { font: 700 40px/44px var(--font-sans); letter-spacing: -0.02em; }
.title { font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.body { font: 400 14px/20px var(--font-sans); }
.label { font: 500 13px/16px var(--font-sans); }
.caption { font: 500 12px/16px var(--font-sans); }
.game-hero { font: 900 28px/32px var(--font-display); }
.game-number { font: 800 15px/18px var(--font-display); }
.game-button { font: 800 15px/20px var(--font-display); }