/* Spindle tokens: Gatefold. White pages, deep ink, a champagne gold used sparingly, and the system's own foil,
   stickers and vinyl as the luxury layer. Light theme only.
   petrol keeps its name and its job (brand text, labels, selected) and is a quiet deep teal.
   violet keeps its job (links, focus, small accents) and is the text-safe gold ink.
   Gatefold adds: --gold, --on-gold, --gold-soft, --gold-ink (accent fills), --medal-* (score stickers), --on-foil,
   --vinyl-color, --font-text (interface text) and --font-logo (the wordmark). */
:root, [data-theme="light"] {
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --band: #f4f4f6;
  --line: #e5e5e9;
  --line-strong: #86868f;
  --ink: #141418;
  --ink-muted: #5b5b64;
  --petrol: #174a52;
  --on-petrol: #ffffff;
  --petrol-soft: #e3eef0;
  --gold: #d6b56a;
  --on-gold: #141418;
  --gold-soft: #f8f1df;
  --gold-ink: #76601f;
  --violet: #76601f;
  --on-violet: #ffffff;
  --violet-soft: #f8f1df;
  --danger: #b42318;
  --on-danger: #ffffff;
  --danger-soft: #fdecea;
  --foil-silver: #e8e9ee;
  --foil-violet: #e0dbf5;
  --foil-ice: #d8e8f2;
  --on-foil: #141418;
  --medal-gold-1: #fff3c4;
  --medal-gold-2: #e2b04a;
  --medal-gold-3: #a87a1f;
  --medal-silver-1: #ffffff;
  --medal-silver-2: #c4c8d0;
  --medal-silver-3: #8b929c;
  --medal-bronze-1: #ffe1c7;
  --medal-bronze-2: #d08c55;
  --medal-bronze-3: #ad6c3b;
  --vinyl-color: #7d2331;
  --progress-1: #9a7b2c;
  --progress-2: #174a52;
  --progress-3: #141418;
  --ring-aurora-1: #d6b56a;
  --ring-aurora-2: #efe0b4;
  --ring-aurora-3: #174a52;
  --ring-foil-1: #d4c8fe;
  --ring-foil-2: #a6e4c8;
  --ring-foil-3: #f5e3b0;
  --ring-sage-1: #174a52;
  --ring-sage-2: #3f8f8a;
  --ring-sage-3: #b9e0dc;
  --ring-arcane-1: #9a7b2c;
  --ring-arcane-2: #d6b56a;
  --ring-arcane-3: #fbf3da;
  --ring-silver-1: #141418;
  --ring-silver-2: #86868f;
  --ring-silver-3: #e5e5e9;
  --focus: var(--violet);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  /* Self-host the three families from Fontsource: @fontsource/gloock, @fontsource-variable/hanken-grotesk,
     @fontsource/caprasimo. The stacks name both the plain and the Fontsource "Variable" family. */
  --font-display: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --font-text: "Hanken Grotesk", "Hanken Grotesk Variable", "Helvetica Neue", system-ui, sans-serif;
  --font-label: var(--font-text);
  --font-logo: "Caprasimo", "Cooper Black", Georgia, serif;
}
.display-xl { font-family: var(--font-display); font-size: clamp(52px, 8vw, 96px); line-height: 0.98; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.display { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); line-height: 1; font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; }
.headline { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.title { font-family: var(--font-text); font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
.body { font-family: var(--font-text); font-size: 17px; line-height: 1.55; font-weight: 400; }
.body-strong { font-family: var(--font-text); font-size: 17px; line-height: 1.55; font-weight: 600; }
.label { font-family: var(--font-label); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }
.sticker { font-family: var(--font-text); font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: 0.01em; }
.wordmark { font-family: var(--font-logo); font-size: 26px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; }