/* Hearth & Key — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f6f0e6;
  --surface-raised: #fffcf7;
  --surface-sunk: #ece3d4;
  --line: #ddd0bc;
  --line-strong: #8d8677;
  --ink: #1c2621;
  --ink-muted: #5a6158;
  --forest: #1f4a3b;
  --forest-soft: #dce8df;
  --on-forest: #fffcf7;
  --clay: #a5421c;
  --clay-soft: #f7e1d4;
  --on-clay: #fffcf7;
  --honey: #a8740f;
  --sky: #c9dbe0;
  --mist: #a9c4b6;
  --pine: #2f5d4b;
  --dune: #e7c9a0;
  --sun: #e48a55;
  --glow: #f3d48f;
  --chalk: #fbf6ee;
  --bark: #6b4a32;
  --alert: #9b2c1c;
  --scrim: #1c262199;
  --link: var(--forest);
  --shadow-sm: 0 1px 2px #1c262114, 0 2px 6px #1c26210f;
  --shadow-md: 0 6px 16px #1c262114, 0 18px 40px -12px #1c262129;
  --shadow-lg: 0 24px 60px -18px #1c262140, 0 8px 18px #1c26211a;
  --focus-ring: 0 0 0 2px #f6f0e6, 0 0 0 4px #1f4a3b;
}
[data-theme="dark"] {
  --surface: #121815;
  --surface-raised: #1a221e;
  --surface-sunk: #0d1210;
  --line: #2c3832;
  --line-strong: #6f7a72;
  --ink: #f2ece1;
  --ink-muted: #a7aea3;
  --forest: #8cc5a8;
  --forest-soft: #1f3a30;
  --on-forest: #0f1f18;
  --clay: #f08c5f;
  --clay-soft: #3d2116;
  --on-clay: #1a0f0a;
  --honey: #f1c266;
  --sky: #23353b;
  --mist: #2c4a3e;
  --pine: #16302a;
  --dune: #5a4630;
  --sun: #f1c266;
  --glow: #f1c266;
  --chalk: #33413a;
  --bark: #2a1d14;
  --alert: #ff8a73;
  --scrim: #000000b3;
  --link: var(--forest);
  --shadow-sm: 0 1px 3px #00000099;
  --shadow-md: 0 10px 30px -6px #000000cc;
  --shadow-lg: 0 24px 60px -12px #000000e6;
  --focus-ring: 0 0 0 2px #121815, 0 0 0 4px #8cc5a8;
}
:root {
  --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: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 36px;
  --radius-full: 9999px;
  --duration-quick: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Albert Sans", "Helvetica Neue", system-ui, sans-serif;
}
.hero { font-family: var(--font-display); font-size: 104px; line-height: 0.95; font-weight: 400; letter-spacing: -0.025em; font-variation-settings: 'opsz' 144; }
.title-1 { font-family: var(--font-display); font-size: 56px; line-height: 1.02; font-weight: 400; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96; }
.title-2 { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 400; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48; }
.title-3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: 'opsz' 24; }
.quote { font-family: var(--font-display); font-size: 28px; line-height: 1.3; font-weight: 300; font-style: italic; font-variation-settings: 'opsz' 36; }
.lead { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.kicker { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; }