/* generated by packages/tokens/build.mjs — do not edit */

:root {
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Inter Variable", Inter, system-ui, sans-serif;
  --type-display-lg-family: "Instrument Serif", Georgia, serif;
  --type-display-lg-size: 3.5rem;
  --type-display-lg-line: 1.02;
  --type-display-lg-weight: 400;
  --type-display-lg-tracking: 0.005em;
  --type-display-family: "Instrument Serif", Georgia, serif;
  --type-display-size: 2.125rem;
  --type-display-line: 1.08;
  --type-display-weight: 400;
  --type-display-tracking: 0.005em;
  --type-title-family: "Inter Variable", Inter, system-ui, sans-serif;
  --type-title-size: 1.25rem;
  --type-title-line: 1.25;
  --type-title-weight: 600;
  --type-title-tracking: 0em;
  --type-body-family: "Inter Variable", Inter, system-ui, sans-serif;
  --type-body-size: 1rem;
  --type-body-line: 1.45;
  --type-body-weight: 400;
  --type-body-tracking: 0em;
  --type-body-strong-family: "Inter Variable", Inter, system-ui, sans-serif;
  --type-body-strong-size: 1rem;
  --type-body-strong-line: 1.45;
  --type-body-strong-weight: 600;
  --type-body-strong-tracking: 0em;
  --type-label-family: "Inter Variable", Inter, system-ui, sans-serif;
  --type-label-size: 0.8125rem;
  --type-label-line: 1.3;
  --type-label-weight: 500;
  --type-label-tracking: 0.01em;
  --type-caption-family: "Inter Variable", Inter, system-ui, sans-serif;
  --type-caption-size: 0.75rem;
  --type-caption-line: 1.35;
  --type-caption-weight: 400;
  --type-caption-tracking: 0.01em;
  --type-price-family: "Inter Variable", Inter, system-ui, sans-serif;
  --type-price-size: 1.25rem;
  --type-price-line: 1.2;
  --type-price-weight: 600;
  --type-price-tracking: 0em;
  --type-on-voice-tracking: 0.01em;
  --type-serif-scale: 1.08;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(29, 19, 22, 0.10);
  --color-ground-voice: #4a1626;
  --color-ground-shelf: #f0ece7;
  --color-surface-card: #ffffff;
  --color-on-voice: #ffffff;
  --color-on-voice-muted: #e6d6db;
  --color-on-accent: #ffffff;
  --color-ink: #1d1316;
  --color-ink-muted: #6b5a60;
  --color-accent: #4a1626;
  --color-border: #e3ddd6;
  --color-state-ok: #2f6b45;
  --color-state-error: #8a1f2b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground-voice: #4a1626;
    --color-ground-shelf: #1b1416;
    --color-surface-card: #241b1e;
    --color-on-voice: #ffffff;
    --color-on-voice-muted: #e6d6db;
    --color-on-accent: #1b1416;
    --color-ink: #f0ece7;
    --color-ink-muted: #b9aab0;
    --color-accent: #e6d6db;
    --color-border: #3a2e32;
    --color-state-ok: #8fcfa6;
    --color-state-error: #f0a3ab;
  }
}

:root[data-theme="dark"], [data-theme="dark"] {
  --color-ground-voice: #4a1626;
  --color-ground-shelf: #1b1416;
  --color-surface-card: #241b1e;
  --color-on-voice: #ffffff;
  --color-on-voice-muted: #e6d6db;
  --color-on-accent: #1b1416;
  --color-ink: #f0ece7;
  --color-ink-muted: #b9aab0;
  --color-accent: #e6d6db;
  --color-border: #3a2e32;
  --color-state-ok: #8fcfa6;
  --color-state-error: #f0a3ab;
}


/* ---------------------------------------------------------------------------
   Spike override (landing-variants only, not the tokens source).
   The brand colour for this experiment is #82182e; it replaces the voice
   ground (#4a1626) in every theme, and the light accent.
   Contrast, WCAG 2.x relative luminance, measured 2026-10-16:
     cream #f0ece7 on #82182e ........ 8.43:1  (AA body, pass)
     white #ffffff on #82182e ........ 9.91:1  (so #82182e on white is 9.91:1)
     #82182e on cream #f0ece7 ........ 8.43:1  (AA body, pass)
     on-voice-muted #e6d6db on #82182e 7.08:1  (AA body, pass)
   The dark-theme accent stays #e6d6db (12.96:1 on the dark shelf #1b1416);
   #82182e itself on #1b1416 is only 1.83:1, so it is never text on dark.
   --------------------------------------------------------------------------- */
:root {
  --grapes-brand: #82182e;
  --color-ground-voice: #82182e;
  --color-accent: #82182e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --color-ground-voice: #82182e; }
}
:root[data-theme="dark"], [data-theme="dark"] { --color-ground-voice: #82182e; }