/*
  Design-Tokens, siehe 00_PLANUNG/design-direction.md, Abschnitt Farbarchitektur
  (Runde 2: erweiterte Palette). Alle fünf tragenden Farben stammen aus den
  drei Vitalstoff-Broschüren, entweder direkt aus dem dominanten Panel-Ton
  oder aus den warmen Sandtönen der Fotografien. Jede Text/Fläche-Kombination
  ist gegen WCAG geprüft, die Werte stehen als Kommentar bei der Rolle, nicht
  nur im Planungsdokument.
*/

:root {
  /* Grundfläche: Creme aus dem Broschüren-Panel */
  --color-surface: #e7e3dc;
  --color-surface-elevated: #f3f0e9;
  --color-surface-sage-tint: #d2d8c4; /* helles Salbei für Sektions-Bänder */
  --color-surface-forest: #33402c; /* tiefes Waldgrün für dramatische Bänder */
  --color-surface-inverse: #33402c; /* Footer, invertierte Sektionen */

  /* Text */
  --color-text: #241c14; /* 13.1:1 auf --color-surface */
  --color-text-muted: #6b5f51; /* 4.9:1 auf --color-surface */
  --color-text-on-inverse: #e7e3dc; /* 8.6:1 auf --color-surface-forest */

  /* Akzent: Marken-Olivgrün aus dem Broschüren-Panel (#7c7d62), für den
     Einsatz als Fläche mit Text um zehn Prozent aufgehellt, damit dunkler
     Text darauf 4.7:1 statt nur 4.0:1 erreicht. Als reine Flächenfarbe ohne
     Text bleibt der ungesättigte Ursprungston sichtbar, der Unterschied ist
     mit bloßem Auge nicht wahrnehmbar. */
  --color-accent: #888a6c;
  --color-accent-hover: #767857;
  --color-accent-text: #33402c; /* Waldgrün als Linkfarbe auf Creme, 8.6:1 */
  --color-accent-text-hover: #1e2617; /* dunkler bei Hover, Kontrast wird dadurch nur größer */
  --color-on-accent: var(--color-text); /* 4.71:1 */

  /* Linkfarben auf dunklem Grund (Footer, invertierte Sektion) */
  --color-link-on-inverse: var(--color-surface-sage-tint); /* 7.52:1 auf Waldgrün */
  --color-link-on-inverse-hover: var(--color-text-on-inverse); /* 8.59:1, heller bei Hover */

  /* Textfarbe auf der primären Handlungsfläche. Seit Runde 8 ist der primäre
     Button Waldgrün (--color-surface-forest); weißer Text darauf erreicht rund
     10:1, siehe design-direction.md, Runde 7. */
  --color-on-primary: #ffffff;

  /* Status, bewusst andere Farbtöne als Akzent und Primär */
  --color-success: #4b6b4e;
  --color-error: #a6432e;
  --color-warning: #6b5217; /* 5.8:1 auf --color-surface, geprüft für Text und Rahmen */
  --color-warning-on-inverse: #e0c177; /* 6.3:1 auf --color-surface-forest */
  --color-focus: #2f6f8f;

  /* Typografie: Rollen */
  --font-display: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --text-heading: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  --text-subheading: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-body: 1.0625rem;
  --text-body-lg: 1.125rem; /* 18px, für den großen Hero-CTA, siehe --radius-button-lg */
  --text-label: 0.875rem;
  --text-meta: 0.8125rem;

  /* Eigene Rolle für die Startseiten-Headline, siehe design-direction.md,
     Runde 5. Sie trägt allein den ersten Bildschirm und darf deshalb deutlich
     über --text-display liegen, ohne die Überschriften der übrigen Seiten
     mitzuvergrößern. Die Obergrenze ist an der längsten Zeile der realen
     Headline geprüft, nicht geschätzt. */
  --text-hero: clamp(2.375rem, 1.55rem + 3.4vw, 4.1875rem);
  --line-height-hero: 1.0;
  --letter-spacing-hero: -0.021em;

  --line-height-display: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;

  /* Abstand, Basis 8px */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Radius: kontrolliert, keine Kapselform. Buttons erhalten eine eigene,
     leicht abgerundete Kante, siehe design-direction.md, Runde 4: ein
     Test mit vollständig eckiger Kante (Radius 0) wirkte dem Auftraggeber
     zufolge zu hart, die kleinste kontrollierte Stufe passt besser zum
     ruhigen, redaktionellen Ton als sowohl die Pillenform als auch die
     scharfe Kante. Flächen wie Karten und Statusmeldungen behalten ihre
     eigene, etwas großzügigere Rundung. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-button: var(--radius-sm);
  /* Große Handlungsflächen bekommen eine eigene, weichere Kante, siehe
     design-direction.md, Runde 6. Regel: der Radius skaliert mit der Größe
     des Buttons. Ein kleiner Button in einer Karte bleibt bei --radius-button
     (4px), damit er klar zur Karte kontrastiert; der alleinstehende, große
     Hero-CTA bekommt --radius-button-lg (18px), damit die Kante zur Fläche
     des Buttons passt und premium statt hart wirkt. Der Wert bleibt klar
     unter der Kapselform (halbe Buttonhöhe ~30px), verletzt also die
     Anti-Template-Regel gegen Pill Buttons nicht. */
  --radius-button-lg: 1.125rem;
  --radius-portrait: 1.75rem;

  /* Schatten: sparsam, als Tiefeninformation */
  --shadow-sm: 0 1px 2px rgba(36, 23, 16, 0.08);
  --shadow-md: 0 4px 16px rgba(36, 23, 16, 0.12);
  /* Enger, wenig gestreuter Schatten für den Button-Hover: eine eckige
     Fläche mit einem stark verlaufenden Schatten aus --shadow-md wirkt
     unsauber, weil die weiche Streuung der harten Kante widerspricht. */
  --shadow-button-hover: 0 3px 8px rgba(36, 23, 16, 0.2);

  /* Bewegung: Rhythmusfamilien aus animation-plan.md, Runde 2 bewusst
     lebendiger als der ursprüngliche, sehr zurückhaltende Startwert */
  --duration-state: 160ms;
  --duration-spatial: 320ms;
  --duration-moment: 600ms;
  --duration-reveal: 900ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  --content-max-width: 68rem;
  --text-max-width: 38rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-state: 1ms;
    --duration-spatial: 1ms;
    --duration-moment: 1ms;
    --duration-reveal: 1ms;
  }
}