/*
 * tokens.css — Design-Tokens · Lilith Bio-Ghee Manufaktur
 * ============================================================================
 * LAYOUT-PRINZIPIEN (destilliert aus czechghee.com, neu interpretiert)
 * ----------------------------------------------------------------------------
 *  1. RUHIGER VERTIKAL-RHYTHMUS — Vollbreite Sektionen mit großzügigem
 *     Weißraum. Jede Sektion atmet. Scrollen wirkt unaufgeregt & „premium",
 *     nie gedrängt. (--section-y trägt diesen Rhythmus überall.)
 *
 *  2. ABWECHSELNDE BILD/TEXT-KOMPOSITION — Sektionen wechseln zwischen
 *     freigestelltem Produktbild, Lifestyle-Foto und zentriertem Textblock;
 *     rhythmischer Links/Rechts-Versatz (.split, .split--reverse).
 *
 *  3. TRUST ZUERST — Siegel & Auszeichnungen (Bioland, EG-Öko, Gold Trophy
 *     2022, EU-Förderung) als eigene, ruhige Leiste direkt unter dem Hero.
 *     Vertrauen vor Verkauf.
 *
 *  4. SELBSTBEWUSSTER, ZENTRIERTER HERO — Logo oben links, große Headline,
 *     wenige klare CTAs, Siegel darunter, freigestelltes Produktfoto und
 *     dezente goldene Akzent-Formen.
 *
 *  5. ZURÜCKHALTENDE PALETTE, DAS FOTO SPRICHT — warme Creme-/Gold-Töne
 *     lassen Produktfotos und das Ghee-Gold leuchten; ein kräftiges
 *     Botanik-Grün setzt erdige Bioland-Akzente.
 *
 *  Gegenüber dem Original verbessert: Pill-Buttons mit klaren Hover-States,
 *  kräftigere/erdigere Akzente (Bioland) und sanfte Scroll-Reveals
 *  (IntersectionObserver, prefers-reduced-motion respektiert).
 * ============================================================================
 */

:root {
  /* — Farbpalette: warme Bio-Manufaktur (Ghee-Gold / Creme / erdiges Grün) — */
  --c-cream:        #f7efdf; /* Seiten-Hintergrund, warmer Buttercreme-Ton     */
  --c-cream-2:      #efe1c7; /* alternierender Sektions-Hintergrund            */
  --c-paper:        #fffdf7; /* Karten / erhöhte Flächen                       */
  --c-gold:         #d9a23f; /* Signatur-Gold (Ghee)                          */
  --c-gold-deep:    #bf8728; /* Gold dunkler — Hover / Text-auf-Hell           */
  --c-gold-soft:    #f1d493; /* helles Gold — Highlights, dezente Flächen      */
  --c-espresso:     #29200f; /* Tinte / Fließtext (warmes Fast-Schwarz)        */
  --c-cocoa:        #5d4a31; /* gedämpfter Text / Sekundär                     */
  --c-forest:       #36492a; /* kräftiger Botanik-Akzent (Bioland)            */
  --c-forest-deep:  #283821; /* Grün dunkler                                   */
  --c-moss:         #647f42; /* helleres Grün — Links-Hover, kleine Akzente    */
  --c-terracotta:   #b1502c; /* Gewürz-Akzent (sehr sparsam: Sale, Highlights) */
  --c-line:         rgba(41, 32, 15, 0.14); /* Trennlinien / Rahmen           */
  --c-line-soft:    rgba(41, 32, 15, 0.08);
  --c-footer-bg:    #232f1b; /* tiefes Waldgrün — Footer                       */
  --c-footer-ink:   #ece4cf; /* Footer-Text                                    */
  --c-footer-muted: #a9ac8f; /* Footer-Sekundärtext                           */

  /* — Semantische Aliase — */
  --bg:             var(--c-cream);
  --ink:            var(--c-espresso);
  --muted:          var(--c-cocoa);
  --accent:         var(--c-gold);
  --accent-strong:  var(--c-forest);
  --surface:        var(--c-paper);

  /* — Typografie (selbst gehostet, DSGVO-konform, mit robusten Fallbacks) — */
  --font-display: "Fraunces", "Fraunces 72", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluider Typo-Maßstab (clamp: mobil → desktop) */
  --fs-2xs:  clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-xs:   clamp(0.78rem, 0.74rem + 0.20vw, 0.875rem);
  --fs-sm:   clamp(0.90rem, 0.86rem + 0.20vw, 0.95rem);
  --fs-base: clamp(1.00rem, 0.96rem + 0.22vw, 1.08rem);
  --fs-md:   clamp(1.12rem, 1.04rem + 0.40vw, 1.28rem);
  --fs-lg:   clamp(1.35rem, 1.18rem + 0.75vw, 1.65rem);
  --fs-xl:   clamp(1.70rem, 1.36rem + 1.50vw, 2.50rem);
  --fs-2xl:  clamp(2.15rem, 1.65rem + 2.40vw, 3.50rem);
  --fs-3xl:  clamp(2.70rem, 1.90rem + 4.00vw, 5.00rem);
  --fs-hero: clamp(2.90rem, 1.70rem + 5.60vw, 6.30rem);

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.62;
  --tracking-wide:  0.14em; /* Eyebrows / Labels in Versalien */
  --tracking-wider: 0.22em;

  /* — Spacing-Skala (fluid) — */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.30rem);
  --space-2xs: clamp(0.50rem, 0.46rem + 0.20vw, 0.65rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.30vw, 1.00rem);
  --space-sm:  clamp(1.00rem, 0.90rem + 0.50vw, 1.40rem);
  --space-md:  clamp(1.50rem, 1.30rem + 0.90vw, 2.20rem);
  --space-lg:  clamp(2.20rem, 1.80rem + 1.80vw, 3.40rem);
  --space-xl:  clamp(3.20rem, 2.50rem + 3.00vw, 5.20rem);
  --space-2xl: clamp(4.50rem, 3.40rem + 4.50vw, 7.50rem);
  --section-y: clamp(4.00rem, 3.10rem + 4.60vw, 8.00rem); /* vertikaler Sektionsrhythmus */

  /* — Layout — */
  --container:        1240px;
  --container-wide:   1440px;
  --container-narrow: 820px;
  --gutter:           clamp(1.1rem, 3vw, 2.5rem);
  --header-h:         clamp(64px, 5vw, 84px);

  /* — Radien — */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   34px;
  --r-pill: 999px;

  /* — Schatten (warm getönt) — */
  --shadow-sm:   0 1px 2px rgba(41, 32, 15, 0.05), 0 2px 8px rgba(41, 32, 15, 0.05);
  --shadow-md:   0 8px 28px rgba(41, 32, 15, 0.10);
  --shadow-lg:   0 26px 64px rgba(41, 32, 15, 0.16);
  --shadow-gold: 0 16px 38px rgba(191, 135, 40, 0.30);

  /* — Motion — */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast:  0.2s;
  --dur:       0.4s;
  --dur-slow:  0.7s;

  /* — Ebenen — */
  --z-base:    1;
  --z-reveal:  5;
  --z-overlay: 90;
  --z-header:  100;
  --z-menu:    110;
}

/* Schmaler Maßstab auf sehr kleinen Screens leicht straffen */
@media (max-width: 480px) {
  :root { --section-y: clamp(3rem, 8vw, 5rem); }
}