/* Mount 7 Paragliding design tokens. Source: tokens.json. Day theme is default; Night follows prefers-color-scheme or data-theme="dark". */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Schibsted+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root {
  --ground: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #eef1f6;
  --ink: #2e3236;
  --ink-muted: #5b5f63;
  --line: #dde2ea;
  --line-strong: #878b8f;
  --lime: #cfd857;
  --lime-text: #5c6410;
  --on-lime: #2e3236;
  --storm: #3e4a6b;
  --on-storm: #ffffff;
  --storm-violet: #5a4b78;
  --link: #5a4b78;
  --sky: #9ec9e8;
  --cloud: #eef1f6;
  --lilac: #bc9fcb;
  --slate: #2e3236;
  --on-slate: #ffffff;
  --flyable: #3a7d16;
  --caution: #94590b;
  --grounded: #b3261e;
  --focus-ring: #5a4b78;
  --shadow-1: 0 1px 2px rgba(46,50,54,0.08), 0 2px 8px rgba(46,50,54,0.06);
  --shadow-2: 0 8px 28px rgba(46,50,54,0.16);
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-sans: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1c1f22;
    --surface: #26292d;
    --surface-sunken: #141619;
    --ink: #f1f3f6;
    --ink-muted: #aeb4bd;
    --line: #373b40;
    --line-strong: #6e7378;
    --lime: #cfd857;
    --lime-text: #cfd857;
    --on-lime: #2e3236;
    --storm: #3e4a6b;
    --on-storm: #ffffff;
    --storm-violet: #5a4b78;
    --link: #b9a8e0;
    --sky: #9ec9e8;
    --cloud: #2a2f3a;
    --lilac: #bc9fcb;
    --slate: #101214;
    --on-slate: #f1f3f6;
    --flyable: #6fcf5a;
    --caution: #e3a63c;
    --grounded: #f2857b;
    --focus-ring: #b9a8e0;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2: 0 8px 28px rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #1c1f22;
  --surface: #26292d;
  --surface-sunken: #141619;
  --ink: #f1f3f6;
  --ink-muted: #aeb4bd;
  --line: #373b40;
  --line-strong: #6e7378;
  --lime: #cfd857;
  --lime-text: #cfd857;
  --on-lime: #2e3236;
  --storm: #3e4a6b;
  --on-storm: #ffffff;
  --storm-violet: #5a4b78;
  --link: #b9a8e0;
  --sky: #9ec9e8;
  --cloud: #2a2f3a;
  --lilac: #bc9fcb;
  --slate: #101214;
  --on-slate: #f1f3f6;
  --flyable: #6fcf5a;
  --caution: #e3a63c;
  --grounded: #f2857b;
  --focus-ring: #b9a8e0;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.5);
  color-scheme: dark;
}

.display-xl { font-family: var(--font-display); font-size: 88px; line-height: 0.92; font-weight: 800; letter-spacing: -0.01em; }
.display-l { font-family: var(--font-display); font-size: 56px; line-height: 0.95; font-weight: 800; }
.heading { font-family: var(--font-display); font-size: 32px; line-height: 1.05; font-weight: 700; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; }
.body-l { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.data { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }