/* Alle Werte gemessen am Original, siehe reference/computed-styles.json und PLAN.md. */

:root {
  /* Farben */
  --c-forest: #1e2e1e;
  --c-forest-ink: #283e28;
  --c-forest-ink-55: rgb(40 62 40 / 0.55);
  --c-sage: #a8c8a0;
  --c-sage-bright: #8db87e;
  /*
    Grün, Grau und Koralle sind gegenüber dem Original abgedunkelt, damit
    Kleintext und Buttons WCAG AA erreichen. Das Original liegt bei 2,3–4,4:1.
    Die Originalwerte stehen jeweils daneben.
  */
  --c-green: #527c56;        /* Original #56825A — 4,18:1 auf Creme */
  --c-green-on-sage: #496f4d; /* Überschrift auf Salbeifläche */
  --c-green-20: rgb(86 130 90 / 0.2);
  --c-green-soft: #7a9a84;
  --c-heading: #3d4a42;
  --c-body: #5e6d63;
  --c-muted: #6d7672;        /* Original #8A9590 — 3,10:1 auf Weiß */
  --c-line: #d4ddd7;
  --c-coral: #ff7f50;
  --c-coral-text: #b95c3a;   /* Koralle als Kleintext, Original #FF7F50 — 2,50:1 */
  --c-sage-label: #617e56;   /* Hellsalbei als Kleintext auf Weiß, Original #8DB87E — 2,26:1 */
  --c-coral-tint: rgb(255 127 80 / 0.08);
  --c-coral-line: rgb(255 127 80 / 0.2);
  --c-cream: #fff7f0;
  --c-white: #fff;

  /* Schriftfamilien */
  --ff-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* Schriftgrade mit zugehöriger Zeilenhöhe */
  --fs-eyebrow: 0.7rem;      /* 11.2px */
  --fs-fine: 0.75rem;        /* 12px   */
  --fs-xs: 0.8rem;           /* 12.8px */
  --fs-small: 0.82rem;       /* 13.12px */
  --fs-meta: 0.9rem;         /* 14.4px */
  --fs-body: 1rem;           /* 16px   */
  --fs-lead: 1.2rem;         /* 19.2px */
  --fs-name: 1.25rem;        /* 20px   */
  --fs-h4: 1.3rem;           /* 20.8px */
  --fs-h3: 1.4375rem;        /* 23px   */
  --fs-h3-lg: 1.5rem;        /* 24px   */
  --fs-price: 1.8rem;        /* 28.8px */
  --fs-h2: 2rem;             /* 32px   */
  --fs-h1: 2.4rem;           /* 38.4px */
  --fs-display: 3rem;        /* 48px   */

  --lh-tight: 1.2;
  --lh-normal: 1.6;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --ls-normal: 0.5px;
  --ls-wide: 2.24px;

  /*
    Abstände, nach ihrem Wert benannt. 25px ist zu 24px zusammengefasst.
    14, 15 und 16px bleiben getrennt: 14 ist das Button-Polster, 15 der
    Spaltenabstand, 16 das Polster kleiner Karten — drei verschiedene Rollen.
  */
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-50: 50px;
  --sp-100: 100px;

  /* Maße */
  --container: 1120px;
  --container-narrow: 820px;
  --gutter: var(--sp-20);
  --section-pad-y: var(--sp-100);
  --header-pad-y: 25px;
  --r-sm: 4px;
  --r-md: 12px;
  --r-pill: 10px;

  /* Bewegung */
  --motion: 200ms ease;
}

/*
  Breakpoints des Originals als max-width: 1119 / 1023 / 767 / 479.
  Mobile first gespiegelt: 480 / 768 / 1024 / 1120.
  Der einzige Bruch mit Layoutwirkung liegt bei 1120px — darunter ist die Seite
  einspaltig mit Burger-Menü. Custom Properties taugen nicht als Medienbedingung,
  darum stehen die Werte in den Sektionsdateien ausgeschrieben.
*/

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 1ms; }
}