/* ============================================================================
   lakis-tokens.css — EINZIGE Quelle für Farbe, Typo-Skala, Radius, Bewegung.
   Entschieden: docs/adr/ADR-0001-design-tokens.md (Owner, 2026-09-14)
   Rollout:     plans/2026-09-14-design-token-rollout.md
   Messbasis:   design-system/MESSPROTOKOLL-2026-08-22.md

   Regel (CLAUDE.md §Verbindliche Quellen 8): neue Styles greifen auf diese
   Variablen zu — keine neuen Einzelwerte für Farbe, Dauer oder Radius.

   Schritt 2 = nur Variablen. Diese Datei ändert nichts Sichtbares, solange
   kein Selektor sie liest. Die Umstellung folgt in Schritt 3-6.
   Lädt in layout/theme.liquid VOR lakis-custom.css.
   ========================================================================== */

:root {
  /* ---- Farbe: 3 Triaden + Burgunder = 10 Vollton-Tokens (ADR-0001 §1) ----
     Zuordnung der 42 gemessenen Live-Werte → Token (Rollout Schritt 3-5):
       #FFF9F0 #FFFAF2 #FFFAF3 #FFFDF8 #FFF8ED #FFF7E9 #FDF7EA #FFFFFF → --c-creme-light
       #F7F0E5 #F0E4D4                                               → --c-creme
       #EADFCE #D8C7B1                                               → --c-creme-dark
       #241711 #241914 #24160F #2A1811 #261811 #32261F #4B3D2E       → --c-ink / --c-ink-deep (Flächen)
       #3A2A21 #6E6258                                               → --c-ink-soft
       #9A5E2D #94651F #8C551F #A8761F                               → --c-gold
       #C68A56 #D7B66B #E8C46F #EDC36D #EAD08A #E7C76F              → --c-gold-light
       43111A (Rot-Variante, illegal per FARBWELT/audit-theme-colors) → --c-burgunder                   */
  --c-creme-light: #FBF6EC;   /* Papier: helle Sektionsgründe, Karten, Inputs */
  --c-creme:       #F4ECDF;   /* Seitengrund (MASTER --cream) */
  --c-creme-dark:  #EFE3D2;   /* Text und Linien auf Dunkel, tiefe Creme-Flächen */

  --c-ink-deep:    #17100C;   /* Footer und tiefe Flächen */
  /* Der eine Kontrastblock der Startseite geht eine Stufe tiefer als --c-ink-deep.
     Owner-Entscheid 2026-09-14 nach A/B am realen Seitenkontext: Warm-Tief statt
     Near-Black (#0E1311). Begründung aus der Abnahme: Burgunder und Kupfer sind
     warme Farben und stehen auf einem kühlen Grund fremd — der tiefere Ton bleibt
     in der Kakao-Familie. Das ist der zwölfte Vollton; das Budget des Plans (≤12)
     ist damit ausgeschöpft, ein dreizehnter braucht einen eigenen Entscheid. */
  --c-kontrast:    #160F0A;   /* = --espresso-deep (FARBWELT §2). War #1A1008, ein Privat-Dunkel nur fuer diese Sektion — 20.09.2026 auf den Token gezogen. */
  --c-ink:         #22190F;   /* Fließtext, Überschriften (MASTER --ink) */
  --c-ink-soft:    #3A2A21;   /* Sekundärflächen auf Dunkel, Chips auf Ink */

  --c-gold-hell:   #EAD08A;   /* Helles Gold NUR auf Dunkel: Eyebrows, Akzentschrift, Verlaufs-Startpunkt.
                                 Ergaenzt 21.09.2026 — der Wert stand 6x hart in newsletter/elba/kontrastblock,
                                 weil die Leiter oben aufhoerte (dE 27,8 zu --c-gold-light, also ein echter
                                 eigener Ton, keine Dublette). */
  --c-gold-light:  #C9923A;   /* Akzent AUF Dunkel (MASTER --gold-hover) */
  --c-gold:        #9B5E2B;   /* Eyebrows, Links, Icons auf Creme (≥14px, MASTER --gold-eyebrow) */
  --c-gold-deep:   #8A4F22;   /* Kupfer: Preise, Linien-Akzente (MASTER --gold-b) */

  /* Konfigurator-Gold, ergaenzt 21.09.2026. KEINE Dubletten, sondern eine geschlossene
     eigene Welt: beide Werte kommen ausschliesslich in lakis-pralinen-konfigurator und
     lakis-tartufi-konfigurator vor (zusammen 48 Vorkommen in 2 Dateien). Sie sind gelber
     als die Hauptleiter (dE 10,8 bzw. 10,7 zu --c-gold-light) — das ist Absicht, nicht
     Zufall, deshalb angeglichen statt eingeebnet. Der Name bindet sie an ihren Ort:
     ausserhalb der Konfiguratoren gehoert die Hauptleiter benutzt. */
  --c-gold-konfig:      #C9A43F;
  --c-gold-konfig-hell: #D7A95A;

  --c-warmgrau:      #6E625B; /* Gedaempfter Fliesstext/Linien, waermer als --c-ink-soft.
                                 Ergaenzt 21.09.2026 — deckt #75645B, #6E625B, #6E6258 ab (dE untereinander
                                 1,8–2,8, also fuer das Auge derselbe Ton). --c-ink-soft lag mit dE 24 zu weit weg. */
  --c-warmgrau-hell: #D3C2B1; /* Helles Warmgrau: Linien und Flaechen auf Creme.
                                 Ergaenzt 21.09.2026 — deckt #CDBBAE und #D9C8B0 ab (je dE 3,6 zum Mittelwert). */

  --c-burgunder:   #4A0E1B;   /* EINZIGE Aktionsfarbe: Primär-CTA gefüllt */
  --c-burgunder-hover: #7A1A2E; /* elfter Vollton, bewusst: Button-Feedback über Farbe, nicht Elevation */

  /* Gold-Verläufe für kursive Akzentschrift. Die Werte sind UNVERAENDERT aus den
     Sektionen uebernommen — sie stehen nur nicht mehr verstreut. Drei Verlaeufe fuer
     drei Gruende: heller Grund, dunkler Grund, Schimmer. Kein vierter ohne Not. */
  --grad-gold-creme:    linear-gradient(96deg,#B8873B,#8A4F22);
  --grad-gold-dunkel:   linear-gradient(96deg,var(--c-gold-hell),var(--c-gold-light));
  --grad-gold-schimmer: linear-gradient(96deg,#F2E3A8 0%,#CFA64E 24%,#FAEFC8 47%,#B9893A 68%,#ECD99D 100%);

  /* Alpha-Ableitungen (keine eigenen Volltöne, zählen nicht ins 10er-Budget) */
  --c-ink-70:      rgba(34, 25, 15, .70);   /* Body gedämpft */
  --c-ink-55:      rgba(34, 25, 15, .55);   /* Meta */
  --c-line:        rgba(34, 25, 15, .14);   /* Linien/Ränder auf Creme */
  --c-line-strong: rgba(34, 25, 15, .28);   /* Sekundär-Button-Rahmen */
  --c-line-on-dark: rgba(239, 227, 210, .14); /* Linien auf Ink */
  --c-creme-on-dark-70: rgba(239, 227, 210, .70); /* gedämpfter Text auf Ink */

  /* ---- Schrift ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Jost', system-ui, Arial, sans-serif;
  /* system-ui vor Arial ist Absicht: Jost hat keinen Pfeil „→" (Aktionslinks, `content:" →"`);
     der Pfeil kommt aus dem Fallback. Live rendert er seit je aus system-ui; Arial zeichnet ihn
     lang und dünn (Pixel-Diff Schritt 3). Sauber wird das erst mit einem SVG-Pfeil in Schritt 5. */

  /* ---- Typo-Skala: feste Stufen, kein clamp() (ADR-0001 §5) ----
     Desktop-Werte hier, Mobile-Werte im Block unten (767px = Krown-Breakpoint). */
  --fs-display-1: 72px;   /* H1 — genau eine pro Seite */
  --fs-display-2: 48px;   /* Section-H2 */
  --fs-display-3: 32px;   /* H3, große Kartentitel */
  --fs-display-4: 24px;   /* H4, Produktnamen (Fraunces Italic) */
  --fs-body-lg:   18px;   /* Lead, Sub-Zeilen */
  --fs-body:      15px;   /* Fließtext, UI */
  /* Buttons: 14px ist der Sollwert des Messprotokolls und liegt bewusst zwischen
     den Body-Stufen 15 und 13. Eine eigene Stufe, kein Streuwert: das Label trägt
     den Preis („In den Warenkorb · €6,50") und muss in eine Zeile passen — bei 15px
     brach es in schmalen Karten um. */
  --fs-cta:       14px;
  --fs-meta:      13px;   /* Meta, Eyebrows, Chips */

  --lh-display: 1.1;
  --lh-body:    1.6;
  --ls-label:   .14em;    /* Uppercase-Labels (MASTER §3) */

  /* ---- Radius: Assemblys Zuweisungslogik (Messprotokoll §5) ---- */
  --r-image: 0;           /* Produkt-/Stimmungsbilder: volle Fläche */
  --r-ui:    4px;         /* Buttons, Inputs, Karten */
  --r-pill:  999px;       /* NUR Warenkorb-Pille und Preis-Chip */
  --r-kreis: 50%;         /* Runde Elemente: Icon-Kreise, Zierkreise.
                             Ergaenzt 21.09.2026 — 50% stand 5x hart in den Sektionen und war damit
                             die fuenfte Schreibweise neben 999px/99px/99px!important/var(--r-pill). */

  /* ---- Bewegung: 3 Dauern, 1 Kurve, 1 Skalierung (ADR-0001 §3-4) ---- */
  --t-tap:    120ms;      /* direktes Feedback: Button-Farbe, Fokus */
  --t-move:   240ms;      /* Hover, Zustandswechsel, Drawer */
  --t-reveal: 600ms;      /* Bild-Zoom, Scroll-Reveal */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --scale-hover: 1.04;    /* Bild-Zoom im overflow:hidden-Container, kein translateY, kein Schatten */

  /* ---- Layout (aus lakis-custom übernommen, unverändert) ---- */
  --container:      1320px;
  --container-wide: 1560px;
  --gutter:         clamp(20px, 5vw, 72px);
  /* Die Fugen des vertikalen Rhythmus (MASTER.md §6).
     Gemessen am 21.09.2026: 81 verschiedene clamp()-Formeln fuer
     Abschnittspolsterung im Theme — 53 Varianten von "gross", 28 von "klein".
     Zwischen clamp(62px,8vw,104px) und clamp(64px,8vw,108px) liegt kein
     sichtbarer Unterschied; das waren keine Entscheidungen, sondern
     Mehrfacherfindungen desselben Werts.
     ⚠ Diese beiden Tokens gab es laengst und KEINE Sektion benutzte sie —
     dasselbe Muster wie bei --cds-radius-card (14px, ebenfalls ungenutzt).
     Der Rollout zieht die Sektionen schrittweise hierher.
     Waechter: npm run theme:fugen:audit */
  --section-space:  clamp(64px, 7vw, 112px);
  --section-space-compact: clamp(44px, 5vw, 72px);
  /* Dritte Stufe, aus der Messung: eine Haeufung um 42px, die bisher keinen
     Namen hatte (28 Formeln zwischen 32 und 64px Obergrenze). */
  --section-space-tight: clamp(24px, 3vw, 42px);
}

/* Mobile: genau ein Wert je Stufe (ADR-0001 §5; H1 72→40 als Startpunkt, im Rollout verifizieren) */
@media screen and (max-width: 767px) {
  :root {
    --fs-display-1: 40px;
    --fs-display-2: 32px;
    --fs-display-3: 26px;
    --fs-display-4: 21px;
    --fs-body-lg:   17px;
    --fs-body:      15px;
    --fs-cta:       14px;
    --fs-meta:      13px;
  }
}

/* Reduced Motion zentral: 0.01ms statt 0 — bei 0s feuert kein transitionend,
   JS das darauf wartet (Drawer, Modals) bliebe hängen. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-tap:    .01ms;
    --t-move:   .01ms;
    --t-reveal: .01ms;
    --scale-hover: 1;
  }
}