/* Preamble · Greenhouse tokens. Light is the default; data-theme="dark" on <html>, or the device's dark setting when no data-theme is set.
   Same names as the Preamble Greenhouse design system (tokens.json). Load after fonts.css, before components.css. */


:root {
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", Verdana, system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-24: 96px;
  --radius-pill: 999px;
  --radius-panel: 36px;
  --radius-tier: 28px;
  --radius-card: 22px;
  --radius-small: 20px;
  --radius-choice: 18px;
  --radius-field: 16px;
  --radius-icon: 12px;
  --target-min: 44px;
  --content-max: 1088px;
  --nav-width: 780px;
  --nav-height: 64px;
  --phone-header: 56px;
  --dock-height: 76px;
  --chars-small: 500;
  --chars-medium: 1500;
  --chars-large-mark: 3000;
  --chars-large-max: 5000;
}

:root, [data-theme="light"] {
  --bg: #EEF2EA;
  --bg-2: #F6F8F2;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --track: #E3EAE0;
  --tint: #DCEADB;
  --line: #D3DDCF;
  --line-strong: #73877A;
  --text: #15271B;
  --text-2: #3B4F40;
  --text-3: #56685A;
  --primary: #2D6A3E;
  --primary-hover: #22532F;
  --on-primary: #FFFFFF;
  --deep: #1E4A2B;
  --on-deep: #FFFFFF;
  --on-deep-2: #DCEADB;
  --on-deep-3: #B9D4BD;
  --tint-ink: #1E4A2B;
  --invert: #15271B;
  --on-invert: #FFFFFF;
  --link: #2D6A3E;
  --focus: #2D6A3E;
  --warm-bg: #FFF1E3;
  --warm: #7A3A1E;
  --danger: #A3321C;
  --danger-bg: #FBE9E4;
  --danger-line: #E3B8AC;
  --size-s: #2D6A3E;
  --size-m: #6FA27A;
  --size-l: #B9D4BD;
  --glass: #FFFFFFD9;
  --glass-line: #15271B14;
  --shadow-1: 0 6px 20px #15271B0F;
  --shadow-2: 0 10px 34px #15271B12;
  --shadow-float: 0 10px 30px #15271B24;
  --shadow-seg: 0 2px 8px #15271B1A;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0F1A13;
  --bg-2: #132019;
  --surface: #1A2A20;
  --raised: #33503D;
  --track: #1F3326;
  --tint: #24402D;
  --line: #2D4234;
  --line-strong: #6A8A73;
  --text: #E7EFE4;
  --text-2: #B9C8BB;
  --text-3: #98AA9B;
  --primary: #86C99A;
  --primary-hover: #9AD6AB;
  --on-primary: #0B1A10;
  --deep: #23452E;
  --on-deep: #F2F7F0;
  --on-deep-2: #CFE3D2;
  --on-deep-3: #A9C9B0;
  --tint-ink: #9AD6AB;
  --invert: #E7EFE4;
  --on-invert: #0F1A13;
  --link: #9AD6AB;
  --focus: #9AD6AB;
  --warm-bg: #3A2619;
  --warm: #F3C8A6;
  --danger: #F2A08C;
  --danger-bg: #3A1F18;
  --danger-line: #7A3F31;
  --size-s: #86C99A;
  --size-m: #4E8A5E;
  --size-l: #2F5A3C;
  --glass: #1A2A20E0;
  --glass-line: #E7EFE41A;
  --shadow-1: 0 6px 20px #00000059;
  --shadow-2: 0 10px 34px #00000066;
  --shadow-float: 0 10px 30px #00000080;
  --shadow-seg: 0 2px 8px #0000004D;
  color-scheme: dark;
}

/* Auto: no data-theme on <html> follows the device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1A13;
    --bg-2: #132019;
    --surface: #1A2A20;
    --raised: #33503D;
    --track: #1F3326;
    --tint: #24402D;
    --line: #2D4234;
    --line-strong: #6A8A73;
    --text: #E7EFE4;
    --text-2: #B9C8BB;
    --text-3: #98AA9B;
    --primary: #86C99A;
    --primary-hover: #9AD6AB;
    --on-primary: #0B1A10;
    --deep: #23452E;
    --on-deep: #F2F7F0;
    --on-deep-2: #CFE3D2;
    --on-deep-3: #A9C9B0;
    --tint-ink: #9AD6AB;
    --invert: #E7EFE4;
    --on-invert: #0F1A13;
    --link: #9AD6AB;
    --focus: #9AD6AB;
    --warm-bg: #3A2619;
    --warm: #F3C8A6;
    --danger: #F2A08C;
    --danger-bg: #3A1F18;
    --danger-line: #7A3F31;
    --size-s: #86C99A;
    --size-m: #4E8A5E;
    --size-l: #2F5A3C;
    --glass: #1A2A20E0;
    --glass-line: #E7EFE41A;
    --shadow-1: 0 6px 20px #00000059;
    --shadow-2: 0 10px 34px #00000066;
    --shadow-float: 0 10px 30px #00000080;
    --shadow-seg: 0 2px 8px #0000004D;
    color-scheme: dark;
  }
}

.display-xl { font-family: var(--font-display); font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.display-l { font-family: var(--font-display); font-size: 60px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.display-m { font-family: var(--font-display); font-size: 52px; line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.display-phone { font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.heading { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.price { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.lead { font-family: var(--font-body); font-size: 22px; line-height: 1.45; font-weight: 400; }
.body-l { font-family: var(--font-body); font-size: 20px; line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.5; font-weight: 400; }
.body-s { font-family: var(--font-body); font-size: 15px; line-height: 1.45; font-weight: 400; }
.label { font-family: var(--font-body); font-size: 15px; line-height: 1.3; font-weight: 700; }
.caption { font-family: var(--font-body); font-size: 13px; line-height: 1.4; font-weight: 400; }
.ai-reads { font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; font-weight: 400; }
.ai-reads-phone { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; font-weight: 400; }
.count { font-family: var(--font-mono); font-size: 13px; line-height: 1.2; font-weight: 400; }