/**
 * ALP Nutrition Design-System: Tokens
 * Richtung: hell, klar, lime-forward (an den Kunden-Mockups ausgerichtet, deutlich veredelt).
 * Single Source of Truth. Wird 1:1 ins Theme portiert.
 */

:root {
  /* ---- Farbe: Basis (hell & kühl) ---- */
  --ink: #16243F;            /* Navy: Headlines, Text, Kontrast */
  --ink-muted: #55637A;      /* Sekundärtext */
  --ink-subtle: #8492A6;     /* Meta/Captions (nur auf hellem Grund) */
  --paper: #FFFFFF;
  --bg: #ECF1F8;             /* kühler, heller Sektionsgrund (Mockup-Ton) */
  --bg-soft: #F5F8FC;        /* zarter Wechselgrund */
  --line: #E2E8F1;
  --line-soft: #EDF1F7;

  /* ---- Lime: die Markenfarbe (Logo-Akzent, Primär-CTA-Füllung) ---- */
  --lime: #A6C61C;
  --lime-deep: #8FAE0F;      /* Hover/Ränder */
  --lime-ink: #16243F;       /* Text auf Lime = Navy (hoher Kontrast) */
  --lime-soft: #EAF1CE;      /* Icon-Flächen, Highlight-Unterstrich */
  --lime-wash: #F3F7E3;

  --green-ok: #2E7D57;       /* funktionales Häkchen/Check */

  /* Kontextueller Grund für Fokus-Ring; pro Sektion setzbar */
  --surface: var(--paper);

  /* ---- Typo: NGC DIN (CI-Schrift des Kunden, ueberall) ----
   * Gelieferte Schnitte: Medium (500) und Bold (700) in Normalbreite,
   * dazu OnAir Condensed Bold und Din Regular Cond als Schmalschnitte.
   * Es gibt KEINEN Kursiv-Schnitt und keinen Regular in Normalbreite.
   * --serif bleibt als Name erhalten (Display-Rolle), zeigt aber auf dieselbe
   * Familie wie --sans, damit die gesamte Seite in der CI-Schrift laeuft.
   * Displaygroessen sind gegenueber Fraunces bewusst kleiner: NGC DIN laeuft
   * rund 18 % breiter und hat eine 16 % groessere x-Hoehe, wirkt also bei
   * gleicher Pixelgroesse deutlich groesser (im Browser nachgemessen).
   */
  --serif: 'NGC DIN', 'Segoe UI', Arial, Helvetica, sans-serif;
  --sans: 'NGC DIN', 'Segoe UI', Arial, Helvetica, sans-serif;
  --cond: 'NGC DIN Cond', 'NGC DIN', 'Arial Narrow', Arial, sans-serif;

  --fs-display: clamp(35px, 4.4vw, 54px);  /* Hero-H1 */
  --fs-h1: clamp(28px, 3.15vw, 40px);

  /* ---- Seitentitel: genau ZWEI Rollen, zentral gesetzt -------------------
     Vorher trug jeder Hero seine eigene clamp()-Regel; die H1 lagen bei 1440px
     zwischen 38px und 74px. Ab jetzt gilt:

     --fs-page-title      Seitentitel ueber die volle Rail. Steht allein, ohne
                          Bild daneben: Ueber uns, Qualitaet, Kontakt, FAQ,
                          Publikationen.
     --fs-page-title-col  Seitentitel in einer Spalte NEBEN einem Bild, also mit
                          rund halber Breite: Startseite und Produktseite.
                          Bewusst kleiner, sonst bricht die H1 dort auf mehr als
                          zwei Zeilen um (harte Vorgabe).

     Der Shop-Kopf ist kein Seitentitel, sondern eine Sektions-Ueberschrift und
     laeuft weiter auf --fs-h2. */
  --fs-page-title: clamp(36px, 4.6vw, 64px);
  --fs-page-title-col: clamp(31px, 3.2vw, 42px);
  --lh-page-title: 1.04;
  --ls-page-title: -0.02em;

  /* Statement-Band: die grosse Aussage auf dunklem, randlosem Grund
     (CTA-Band der Startseite, Standort-Baender auf Qualitaet und Kontakt).
     Dieselbe Rolle lief vorher auf 49px, 54px und 58px. */
  --fs-band-title: clamp(30px, 3.7vw, 52px);

  /* ================= TYPO-SKALA (verbindlich) =========================
     Stand 10.08.2026: Die Seite trug 8 verschiedene H3- und 13 verschiedene
     Absatz-Groessen, viele davon Zufallswerte mit einem halben Pixel
     Unterschied (17/17,5 - 15/15,5 - 13/13,5). Ab jetzt gilt genau diese
     Leiter. Neue Regeln benutzen ausschliesslich diese Tokens, keine
     freien px-Werte mehr.

       Ueberschriften   64 - 52 - 42 - 38 - 31 - 24 - 19 - 17 - 15
       Fliesstext       20 (Lead) - 17 (Body) - 15 (Meta) - 13,5 - 12

     Zwei H1-Groessen sind Absicht: neben einem Bild braucht der Titel
     weniger, sonst bricht er auf mehr als zwei Zeilen um. */
  --fs-h3-lg: clamp(24px, 2.2vw, 31px);   /* grosse Karte, z. B. Athletenname */
  --fs-h5: 17px;
  --fs-h6: 15px;
  --fs-micro: 13.5px;                     /* Fussnoten, Credits, Hinweiszeilen */
  --fs-nano: 12px;                        /* Tabellenkopf, Badges, dichte UI */
  --fs-h2: clamp(26px, 3vw, 38px);
  --fs-h3: clamp(19px, 1.8vw, 24px);
  --fs-h4: clamp(17px, 1.45vw, 19px);
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --fs-body: clamp(16px, 1.3vw, 17px);
  --fs-meta: 15px;
  --fs-eyebrow: 13.5px;
  --fs-data: 13.5px;         /* Datenlabels: Tabellen-Kopf, Eyebrow-Zeilen, Register-Indizes */

  /* ---- Spacing: 4pt-Skala ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px; --s8: 48px; --s9: 64px; --s10: 88px; --s11: 120px;
  --section-y: clamp(72px, 8vw, 112px);
  --gutter: 28px;

  /* ---- Radien (freundlich-premium, aber crisp) ---- */
  --r-surface: 18px;
  --r-media: 16px;
  --r-pill: 9999px;
  --r-chip: 10px;

  /* ---- Elevation: geschichtet (Hairline + weiche Ambient-Schatten), Stripe-Niveau ---- */
  --sh-hair: 0 0 0 1px rgba(22, 36, 63, .05);
  --sh-card: 0 0 0 1px rgba(22, 36, 63, .045), 0 1px 2px rgba(22, 36, 63, .05), 0 10px 28px -12px rgba(22, 36, 63, .13);
  --sh-card-hover: 0 0 0 1px rgba(22, 36, 63, .06), 0 2px 6px rgba(22, 36, 63, .07), 0 26px 52px -18px rgba(22, 36, 63, .22);
  --sh-lime: 0 1px 2px rgba(90, 110, 10, .18), 0 10px 22px -10px rgba(120, 145, 15, .45);
  --sh-soft: 0 12px 36px -16px rgba(22, 36, 63, .20);
  --sh-pop: 0 0 0 1px rgba(22, 36, 63, .05), 0 2px 6px rgba(22, 36, 63, .06), 0 40px 80px -28px rgba(22, 36, 63, .28);

  /* ---- Gruende: kuehle, dezente Verlaeufe statt platter Flaechen ---- */
  --grad-page: radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, var(--bg) 60%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, var(--bg-soft) 100%);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t-med: 240ms;
  --t-slow: 360ms;
  --t-reveal: 620ms;
}

/* ---- Per-Produkt-Akzentsystem ----
 * --acc       Vollton (Label, Rule, Detail)
 * --acc-text  AA-sichere Textvariante (>= 4,5:1 auf Weiss)
 * --panel     Pastell-Panel hinter dem Produkt (Mockup-Look)
 * --panel-2   zweiter Verlaufston des Panels
 */
[data-accent] {
  --panel:   color-mix(in oklab, var(--acc) 15%, #FFFFFF);
  --panel-2: color-mix(in oklab, var(--acc) 6%, #FFFFFF);
  --acc-soft: color-mix(in oklab, var(--acc) 12%, #FFFFFF);
  --tint-wash: color-mix(in oklab, var(--acc) 5%, #F5F8FC);
  /* Akzent-Gradient (CTA), Glow, Fokus-Ring, Halo hinter dem Produkt */
  --acc-grad: linear-gradient(135deg, color-mix(in oklab, var(--acc-text) 82%, #000) 0%, var(--acc-text) 52%, color-mix(in oklab, var(--acc) 65%, var(--acc-text)) 100%);
  --acc-glow: 0 1px 2px rgba(22, 36, 63, .18), 0 14px 30px -10px color-mix(in oklab, var(--acc-text) 52%, transparent);
  --acc-ring: 0 0 0 3px color-mix(in oklab, var(--acc) 20%, transparent);
  --halo: radial-gradient(78% 68% at 50% 22%, color-mix(in oklab, var(--acc) 13%, #fff) 0%, color-mix(in oklab, var(--acc) 4%, #fff) 46%, #ffffff 78%);
}
[data-accent="sport"]    { --acc: #2E7D57; --acc-text: #256A49; }
[data-accent="protect"]  { --acc: #2D4E86; --acc-text: #2D4E86; }
[data-accent="beauty"]   { --acc: #A83048; --acc-text: #9E2A3B; }
[data-accent="curcumin"] { --acc: #CE8A2C; --acc-text: #8F5F13; }
[data-accent="eisen"]    { --acc: #C05C77; --acc-text: #9C4258; }
[data-accent="carnitin"] { --acc: #2E7C8C; --acc-text: #276B79; }