/* Design tokens — docs/03-design-system.md + docs/13-visual-art-direction.md.
   Palette v3 (2026-09-18): the editorial system built for the homepage
   (colours/fonts sampled from emotionalerhunger.de's live computed styles,
   not guessed from screenshots) is now the sitewide default, promoted here
   from the former body.page-home override block so every page, modal and
   form shares one theme. --color-accent-warm holds a darkened version of
   the gold: the true gold (#D69500) only clears WCAG AA as a background
   (dark ink text on top) or as text on a dark panel — as running text on a
   light page it fails contrast, so eyebrow/link/accent-phrase text uses the
   darker, AA-safe gold instead. */
:root {
  /* Colour */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text: #160224;
  --color-text-secondary: #5F5168;
  --color-primary: #160224;
  --color-primary-deep: #0F0118;
  --color-tint: #F4F4F4;
  --color-accent: #D69500;
  --color-accent-warm: #8F6400;
  --color-neutral-surface: #F4F4F4;
  --color-border: #F2F2F2;
  /* Form-field border: --color-border darkened 20% so fields read clearly on the page. */
  --color-field-border: #C2C2C2;
  /* Soft lavender used only for the footer playbook signup band, so it stands out from the site's neutral light backgrounds. */
  --color-lavender-soft: #EEE8F8;
  /* Fixed always-dark ink, independent of --color-text/--color-bg theming —
     used only where a component intentionally needs a dark chrome background
     (footer, the one contrast section) regardless of the active page theme. */
  --color-ink: #0B0C0D;
  /* Not in the original docs/03 palette — placeholder form-error red pending design review. */
  --color-error: #B3261E;
  --color-success: #1F7A3D; /* toast confirmations; white text on it is about 5.4:1 */

  /* Typography — Libre Baskerville (headings) + Montserrat (body). "The
     Seasons", the reference site's paid display face, isn't licensed, so
     Libre Baskerville — which the reference also legitimately licenses via
     Google Fonts for its own accents — stands in everywhere a heading font
     is needed. */
  --font-heading: "Libre Baskerville", Georgia, serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid heading scale (docs/13 §2) */
  --text-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --text-numeral: clamp(2.1rem, 1.5rem + 2.4vw, 3.75rem); /* decorative step numbers; was the old --text-h2 */
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --text-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-stat: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);

  /* Fixed scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-eyebrow: 0.8125rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Section / grid rhythm (docs/13 §3-4) */
  --section-padding: clamp(4rem, 3rem + 4vw, 8rem);
  --grid-gutter: clamp(1rem, 0.75rem + 1vw, 2rem);
  --container-max-width: 1360px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
}

/* Slightly smaller H1 on phones only; tablet and desktop keep the fluid size above. */
@media (max-width: 640px) {
  :root {
    --text-display: 2rem;
  }
}