/* IntroFirst — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #faf8f4;
  --paper-shade: #f3f2ec;
  --surface: #fdfdfb;
  --line: #e3e1d8;
  --ink: #0f2a2c;
  --ink-soft: #435c61;
  --muted: #5f6e75;
  --forest: #2a7260;
  --forest-deep: #1f5a4b;
  --on-forest: #ffffff;
  --sage-100: #dce7dd;
  --sage-300: #a2baaf;
  --mint: #cfe3d4;
  --sand: #f2eadc;
  --honey: #dab483;
  --slate: #414e53;
  --moss: #4c7f5f;
  --amber: #c27410;
  --danger: #b3412f;
  --focus: var(--forest);
  --shadow-card: 0 1px 2px rgba(15,42,44,0.05), 0 6px 20px rgba(15,42,44,0.04);
  --shadow-lift: 0 2px 6px rgba(15,42,44,0.08), 0 12px 32px rgba(15,42,44,0.08);
}
[data-theme="dark"] {
  --paper: #0f1715;
  --paper-shade: #141e1b;
  --surface: #18231f;
  --line: #2b3833;
  --ink: #e9efeb;
  --ink-soft: #b4c3bd;
  --muted: #8e9e98;
  --forest: #5fb39a;
  --forest-deep: #7cc6ae;
  --on-forest: #0c1f1a;
  --sage-100: #1f3029;
  --sage-300: #4f6b60;
  --mint: #24392f;
  --sand: #2a2620;
  --honey: #c9a06b;
  --slate: #9aaab0;
  --moss: #6fa883;
  --amber: #f0b04f;
  --danger: #f08a74;
  --focus: var(--forest);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-lift: 0 4px 16px rgba(0,0,0,0.5);
}
: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: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; }
.display { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.015em; }
.h1 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.h3 { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; }
.body-lg { font-family: var(--font-text); font-size: 17px; line-height: 27px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 15px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-text); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 400; }
.address { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }