/* Leo the Legend Design System — generated from tokens.json */
:root, [data-theme="day"] {
  --sky: #9fd7ff;
  --surface: #ffffff;
  --panel: #f6f7fb;
  --ink: #1b2233;
  --ink-muted: #1f4f7a;
  --line: #cfdeeb;
  --hill: #6dbf5c;
  --hill-deep: #5fb04f;
  --hill-light: #7fc96a;
  --accent: #ffd23f;
  --accent-deep: #c99a12;
  --on-accent: #1b2233;
  --good: #5fd068;
  --alert: #e0453a;
  --pop-orange: #ff7a1a;
  --pop-blue: #2d9cdb;
  --focus-ring: var(--ink);
  --shadow-card: 0 16px 44px rgba(10, 20, 40, 0.3);
  --shadow-hud: 0 6px 20px rgba(0, 0, 0, 0.18);
  --shadow-button: 0 4px 0 #c99a12;
  --shadow-button-lift: 0 4px 0 #c99a12, 0 10px 22px rgba(255, 210, 63, 0.25);
}
[data-theme="night"] {
  --sky: #1b2233;
  --surface: #242d42;
  --panel: #2c3650;
  --ink: #f6f7fb;
  --ink-muted: #b9cde4;
  --line: #3c4a66;
  --on-accent: #1b2233;
  --focus-ring: var(--ink);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-chip: 6px;
  --radius-button: 14px;
  --radius-card: 22px;
  --radius-icon: 112px;
  --radius-pill: 999px;
  --outline: 2px;
  --outline-heavy: 3px;
  --font-display: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-numerals: "Arial Black", "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
.hero-title { font-family: var(--font-display); font-size: 72px; line-height: 76px; font-weight: 900; letter-spacing: 0.01em; }
.section-title { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 900; letter-spacing: 0.01em; }
.card-title { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 800; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }
.button { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 800; }
.caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.hud-number { font-family: var(--font-numerals); font-size: 34px; line-height: 34px; font-weight: 900; }