/* =========================================================================
   tokens.css — Design-Tokens
   Design-System: Apple-Chassis (product tiles, single accent, pill CTAs)
   übersetzt auf Feinkost/Olivenöl.
   Einziger Unterschied zum Apple-Original: Action Blue → Action Olive,
   Parchment warm statt kühl, Messing NUR beim Milenario.
   ========================================================================= */

:root {

  /* ---------- Brand & Accent ------------------------------------------ */
  /* Der einzige interaktive Farbton der ganzen Seite. Kein zweiter Akzent. */
  --color-primary:          #3f6b2b;  /* Action Olive · 6.3:1 auf Weiß      */
  --color-primary-focus:    #4a7d32;
  --color-primary-on-dark:  #a9d17f;  /* Links auf dunklen Tiles · 8.8:1    */
  --color-on-primary:       #ffffff;

  /* Öl-Gold — ausschließlich Farga Milenario. Haarlinie, nie Fläche.
     Der Ton kommt aus dem Öl selbst, nicht aus einer Messing-Assoziation.  */
  --color-gold:             #c9a227;
  --color-gold-dim:         rgba(201, 162, 39, .38);

  /* ---------- Surface -------------------------------------------------- */
  --color-canvas:           #ffffff;
  --color-canvas-parchment: #f1efe3;  /* Off-White mit Olivenstich          */
  --color-canvas-sage:      #e4e5d8;  /* helles Salbei — zweite helle Stufe */
  --color-surface-pearl:    #faf9f2;
  --color-surface-tile-1:   #1e2a15;  /* tiefes Olivgrün, nicht Schwarz     */
  --color-surface-tile-2:   #22301a;  /* Mikro-Schritt heller               */
  --color-surface-tile-3:   #18220f;  /* Mikro-Schritt dunkler              */
  --color-surface-olive:    #3a5228;  /* volles Olivgrün · Weiß 8.6:1       */
  --color-surface-black:    #0d1208;  /* Global-Nav — Schwarz mit Grünstich */
  --color-chip-translucent: rgba(214, 212, 204, .64);

  /* ---------- Text ----------------------------------------------------- */
  --color-ink:              #1a1f14;  /* Headlines + Body auf hell          */
  --color-on-dark:          #ffffff;
  --color-body-muted:       #c5cbb8;  /* Sekundärtext auf dunkel            */
  --color-ink-muted-80:     #333a2c;
  --color-ink-muted-48:     #767b6c;  /* Kleingedrucktes, deaktiviert       */

  /* ---------- Hairlines ------------------------------------------------ */
  --color-divider-soft:     rgba(0, 0, 0, .04);
  --color-hairline:         #ddd9c9;
  --color-hairline-on-dark: rgba(255, 255, 255, .14);

  /* ---------- Scrim ----------------------------------------------------- */
  /* Kein dekorativer Verlauf — ein Lesbarkeits-Schleier über Fotografie.
     Der unterste Stopp ist immer die VOLLE Farbe der Folgesektion, damit
     das Bild in sie übergeht statt an einer Kante abzureißen.            */
  --scrim-hero: linear-gradient(to top,
                  #1e2a15 0%,
                  rgba(16, 22, 10, .74) 26%,
                  rgba(16, 22, 10, .34) 58%,
                  rgba(16, 22, 10, .14) 78%,
                  rgba(16, 22, 10, .34) 100%);
  --scrim-band: linear-gradient(to top,
                  rgba(16, 22, 10, .78) 0%,
                  rgba(16, 22, 10, .24) 38%,
                  rgba(16, 22, 10, 0) 68%,
                  rgba(16, 22, 10, .30) 100%);

  /* ---------- Typografie ----------------------------------------------- */
  /* Kein Google-Fonts-CDN. system-ui löst auf Apple-Geräten echtes SF Pro
     auf, auf Windows Segoe UI Variable. Beides trägt die enge Laufweite.  */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --font-text:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;

  /* Skala: fluid, aber mit den Original-Zielwerten als Obergrenze.        */
  --fs-hero:      clamp(2rem,   1.05rem + 4.2vw,  3.5rem);   /* 32 → 56 */
  --fs-display-lg:clamp(1.75rem, 1.1rem + 2.7vw,  2.5rem);   /* 28 → 40 */
  --fs-display-md:clamp(1.5rem,  1.1rem + 1.8vw,  2.125rem); /* 24 → 34 */
  --fs-lead:      clamp(1.25rem, 1.0rem + 1.1vw,  1.75rem);  /* 20 → 28 */
  --fs-lead-airy: clamp(1.125rem,.98rem + 0.7vw,  1.5rem);   /* 18 → 24 */
  --fs-tagline:   clamp(1.125rem,1.0rem + 0.5vw,  1.3125rem);/* 18 → 21 */
  --fs-body:      1.0625rem;  /* 17px — nicht 16. Das ist der Lesetakt.   */
  --fs-caption:   0.875rem;   /* 14 */
  --fs-fine:      0.75rem;    /* 12 */
  --fs-micro:     0.625rem;   /* 10 */

  --lh-hero:      1.07;
  --lh-display:   1.10;
  --lh-lead:      1.14;
  --lh-body:      1.47;
  --lh-dense:     2.41;   /* Footer-Linkspalten. Kein Fehler.             */

  --ls-hero:      -0.0175em;  /* die „Apple tight"-Laufweite              */
  --ls-display:   -0.011em;
  --ls-body:      -0.022em;
  --ls-caption:   -0.016em;
  --ls-nano:      -0.01em;

  /* Gewichte-Leiter: 300 / 400 / 600 / 700. 500 fehlt bewusst.           */
  --fw-airy:      300;
  --fw-regular:   400;
  --fw-strong:    600;
  --fw-bold:      700;

  /* ---------- Spacing (Basis 8) ---------------------------------------- */
  --sp-xxs:  4px;
  --sp-xs:   8px;
  --sp-sm:  12px;
  --sp-md:  17px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-section: clamp(48px, 3rem + 3vw, 80px);

  /* ---------- Radien ---------------------------------------------------- */
  --r-none: 0;
  --r-xs:    5px;
  --r-sm:    8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-pill: 9999px;

  /* ---------- Elevation ------------------------------------------------- */
  /* Genau EIN Schatten im ganzen System — nur unter Produktbildern.       */
  --shadow-product: rgba(0, 0, 0, .22) 3px 5px 30px 0;
  --shadow-product-dark: rgba(0, 0, 0, .55) 3px 8px 42px 0;

  /* ---------- Layout ---------------------------------------------------- */
  --w-content: 980px;   /* textlastige Sektionen */
  --w-grid:   1440px;   /* Produktraster         */
  --nav-h:      44px;
  --subnav-h:   52px;
}