/* Cairn Card — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f5f1ea;
  --surface-raised: #ffffff;
  --surface-sunken: #ece6dc;
  --line: #ddd5c8;
  --line-strong: #8a8378;
  --ink: #1e2a2f;
  --ink-muted: #5a686d;
  --granite: #1e2a2f;
  --on-granite: #f5f1ea;
  --on-granite-muted: #a0abae;
  --glacier: #3fb8b4;
  --on-glacier: #1e2a2f;
  --glacier-ink: #0f6b6f;
  --glacier-soft: #d3efec;
  --alpenglow: #f07a4a;
  --alpenglow-hover: #e66a38;
  --on-alpenglow: #1e2a2f;
  --alpenglow-ink: #b8431c;
  --alpenglow-soft: #fce1d3;
  --pine: #2f5d50;
  --pine-soft: #d9e7e0;
  --gold: #e9b44c;
  --on-gold: #1e2a2f;
  --gold-soft: #f7e7c4;
  --stone-soft: #e7e1d7;
  --focus-ring: var(--glacier-ink);
  --card-ground: #1e2a2f;
  --card-stone: #2b3c42;
  --card-summit: #f07a4a;
  --card-paper: #f5f1ea;
  --card-paper-muted: #5a686d;
  --card-edge: #ffffff14;
  --shadow-card: 0 1px 2px #1e2a2f14, 0 6px 18px #1e2a2f12;
  --shadow-lift: 0 2px 4px #1e2a2f26, 0 18px 40px #1e2a2f33;
}
[data-theme="dark"] {
  --surface: #141c20;
  --surface-raised: #1e2a2f;
  --surface-sunken: #0f1518;
  --line: #2e3b41;
  --line-strong: #6c7b81;
  --ink: #f5f1ea;
  --ink-muted: #a0abae;
  --granite: #263439;
  --on-granite: #f5f1ea;
  --on-granite-muted: #a0abae;
  --glacier: #3fb8b4;
  --on-glacier: #1e2a2f;
  --glacier-ink: #5cc9c4;
  --glacier-soft: #123a3c;
  --alpenglow: #ff8a5b;
  --alpenglow-hover: #ff9b72;
  --on-alpenglow: #141c20;
  --alpenglow-ink: #ff9d74;
  --alpenglow-soft: #46241a;
  --pine: #8cc2ae;
  --pine-soft: #1c3630;
  --gold: #e9b44c;
  --on-gold: #1e2a2f;
  --gold-soft: #3d3116;
  --stone-soft: #2a363c;
  --focus-ring: var(--glacier-ink);
  --card-ground: #1e2a2f;
  --card-stone: #2b3c42;
  --card-summit: #f07a4a;
  --card-paper: #f5f1ea;
  --card-paper-muted: #5a686d;
  --card-edge: #ffffff14;
  --shadow-card: 0 1px 2px #00000066, 0 6px 18px #00000059;
  --shadow-lift: 0 2px 4px #00000080, 0 18px 40px #00000080;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --font-display: "Archivo Expanded", "Archivo Black", "Arial Black", sans-serif;
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.hero { font-family: var(--font-display); font-size: 64px; line-height: 60px; font-weight: 800; letter-spacing: -0.01em; }
.title { font-family: var(--font-display); font-size: 36px; line-height: 38px; font-weight: 800; }
.heading { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0.01em; }
.lead { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.04em; }
@font-face { font-family: "Archivo Expanded"; src: url("../fonts/ArchivoExpanded-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }