/*
 * Firefighter Pfister — design tokens
 *
 * GENERATED by design/tokens/generate_tokens.py — do not edit by hand.
 *
 * Names map 1:1 to the Figma variables. Responsive tokens interpolate
 * fluidly between the mobile stop (375px) and the desktop stop (1440px);
 * the Figma tablet stop is a checkpoint on that ramp, not a hard step.
 */

:root {
  /* ---- Primitives — five hues. Do not add colours. ---- */
  --bone-100: #FAF9F7;
  --bone-200: #F1EDE8;
  --bone-300: #E2DCD4;
  --smoke-400: #948C84;
  --smoke-500: #6E6862;
  --char-700: #3D3733;
  --char-800: #2A2422;
  --ash-900: #141110;
  --ember-100: #FFE9CC;
  --ember-500: #FF9615;
  --ember-600: #E07A05;
  --ember-700: #AE3F0E;

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* ---- Type families ---- */
  --font-display: "Onest", system-ui, -apple-system, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ---- Line heights (relative, so they ride the fluid ramp) ---- */
  --lh-h1: 1;
  --lh-h2: 1.08;
  --lh-h3: 1.15;
  --lh-h4: 1.25;
  --lh-h5: 1.3;
  --lh-h6: 1.35;
  --lh-body: 1.65;
  --lh-lead: 1.55;
  --lh-small: 1.55;
  --lh-nav: 1.2;
  --lh-eyebrow: 1.2;
  --lh-caption: 1.45;
  --lh-drawer: 1.4;

  /* ---- Tracking ---- */
  --tr-h1: -0.02em;
  --tr-h2: -0.015em;
  --tr-h3: -0.01em;
  --tr-h4: -0.005em;
  --tr-flat: 0;
  --tr-nav: 0.06em;
  --tr-eyebrow: 0.12em;

  /* ---- Responsive scale ---- */
  --type-h1: clamp(42px, 1.3130rem + 5.5980vw, 64px);
  --type-h2: clamp(32px, 1.2844rem + 3.0534vw, 44px);
  --type-h3: clamp(26px, 1.1479rem + 2.0356vw, 34px);
  --type-h4: clamp(22px, 1.1961rem + 0.7634vw, 25px);
  --type-h5: clamp(19px, 1.1279rem + 0.2545vw, 20px);
  --type-h6: clamp(16px, 0.9404rem + 0.2545vw, 17px);
  --type-body: clamp(18px, 1.0654rem + 0.2545vw, 19px);
  --type-small: 15px;
  --type-eyebrow: clamp(12px, 0.6904rem + 0.2545vw, 13px);
  --type-nav: 16px;
  --type-lead: clamp(19px, 1.0086rem + 0.7634vw, 22px);
  --layout-container: 100%;
  --layout-container-wide: 100%;
  --layout-gutter: clamp(16px, 0.0458rem + 4.0712vw, 32px);
  --layout-section-y: clamp(56px, 1.5916rem + 8.1425vw, 88px);
  --layout-measure: 358px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: clamp(12px, 0.5115rem + 1.0178vw, 16px);
  --space-md: clamp(20px, 1.0115rem + 1.0178vw, 24px);
  --space-lg: clamp(24px, 1.0229rem + 2.0356vw, 32px);
  --space-xl: clamp(32px, 1.0458rem + 4.0712vw, 48px);
  --space-2xl: clamp(48px, 1.5687rem + 6.1069vw, 72px);
  --space-3xl: clamp(64px, 1.6145rem + 10.1781vw, 104px);
}

/*
 * Second segment of the ramp: tablet -> desktop.
 *
 * A single ramp across the whole range would undershoot every token whose
 * tablet and desktop values are equal — the spacing scale plateaus there.
 * Two segments hit all three Figma stops exactly and stay smooth between.
 */
@media (min-width: 768px) {
  :root {
    --type-h1: clamp(64px, 3.7143rem + 0.5952vw, 68px);
    --type-h2: clamp(44px, 1.8929rem + 1.7857vw, 56px);
    --type-h3: clamp(34px, 1.6964rem + 0.8929vw, 40px);
    --type-h4: clamp(25px, 1.3482rem + 0.4464vw, 28px);
    --type-h5: clamp(20px, 1.1071rem + 0.2976vw, 22px);
    --type-h6: clamp(17px, 0.9911rem + 0.1488vw, 18px);
    --type-body: clamp(19px, 1.1161rem + 0.1488vw, 20px);
    --type-small: clamp(15px, 0.8661rem + 0.1488vw, 16px);
    --type-eyebrow: 13px;
    --type-nav: clamp(16px, 0.9286rem + 0.1488vw, 17px);
    --type-lead: clamp(22px, 1.2321rem + 0.2976vw, 24px);
    --layout-container: 100%;
    --layout-container-wide: 100%;
    --layout-gutter: clamp(32px, 1.4286rem + 1.1905vw, 40px);
    --layout-section-y: clamp(88px, 3.2143rem + 4.7619vw, 120px);
    --layout-measure: 640px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: clamp(32px, 1.4286rem + 1.1905vw, 40px);
    --space-xl: clamp(48px, 1.8571rem + 2.3810vw, 64px);
    --space-2xl: clamp(72px, 2.7857rem + 3.5714vw, 96px);
    --space-3xl: clamp(104px, 3.6429rem + 5.9524vw, 144px);
  }
}

@media (min-width: 1000px) {
  :root {
    --layout-container: 800px;
    --layout-container-wide: 1280px;
    --layout-measure: 680px;
  }
}

/*
 * Semantic tokens.
 *
 * Applied on [data-theme] rather than :root alone so any subtree can be
 * flipped — the nav and footer run dark inside light pages.
 */
:root,
[data-theme="light"] {
  --bg-page: var(--bone-100);
  --bg-raised: var(--bone-200);
  --bg-inverse: var(--ash-900);
  --text-primary: var(--ash-900);
  --text-secondary: var(--smoke-500);
  --text-inverse: var(--bone-100);
  --text-accent: var(--ember-600);
  --text-eyebrow: var(--smoke-500);
  --mature-ground: var(--ember-700);
  --mature-ink: var(--bone-100);
  --border-subtle: var(--bone-300);
  --border-strong: var(--smoke-500);
  --accent-solid: var(--ember-500);
  --accent-hover: var(--ember-600);
}

[data-theme="dark"] {
  --bg-page: var(--ash-900);
  --bg-raised: var(--char-800);
  --bg-inverse: var(--bone-100);
  --text-primary: var(--bone-100);
  --text-secondary: var(--smoke-400);
  --text-inverse: var(--ash-900);
  --text-accent: var(--ember-500);
  --text-eyebrow: var(--ember-500);
  --mature-ground: var(--ember-500);
  --mature-ink: var(--ash-900);
  --border-subtle: var(--char-700);
  --border-strong: var(--smoke-400);
  --accent-solid: var(--ember-500);
  --accent-hover: var(--ember-600);
}