/* =========================================================================
   Tellerland — Design Tokens v1.0 (2026-11-02)
   Richtung: A «Leinen & Licht» + B «Tischordnung» + C-Akzente «Abendtafel»
   Präfix: --tl-*  (kompatibel mit bestehender tl_-Schicht im Horizon-Theme)
   Kontrastwerte: siehe 07_design_system.md §1 (WCAG 2.1 AA, berechnet)
   ========================================================================= */

:root {
  /* ---------- Farbe · Basis (helles Schema «Leinen») ---------- */
  --tl-color-bg:            #F4F0E8; /* Leinen — Seitenhintergrund, Packshot-Fond */
  --tl-color-surface:       #FBFAF7; /* Porzellanweiss — Karten, Buy-Box, Drawer */
  --tl-color-surface-alt:   #EAE4D8; /* Leinen dunkel — Modulflächen, Tabellenkopf */
  --tl-color-oak:           #C8A67A; /* Eiche — nur Fläche/Fotografie, nie Text */
  --tl-color-text:          #1F2620; /* Fliesstext            13.62:1 auf bg */
  --tl-color-muted:         #5E625A; /* Sekundärtext           5.48:1 auf bg */
  --tl-color-primary:       #2C392D; /* Tannengrün — CTA, Links 10.68:1 auf bg */
  --tl-color-primary-hover: #3A4A3B; /* Hover                   8.31:1 mit on-primary */
  --tl-color-on-primary:    #F4F0E8; /* Text auf Tannengrün    10.68:1 */
  --tl-color-accent:        #A8996B; /* Gold — NUR Dekor, 1px-Linien, Icons ≥ 24px, Text ≥ 24px auf Tannengrün (4.30:1) */
  --tl-color-accent-text:   #6F6038; /* Gold dunkel — Eyebrows/kleiner Goldtext 5.42:1 auf bg */
  --tl-color-border:        #D9D2C3; /* Dekorative Trennlinie (kein UI-Kontrast nötig) */
  --tl-color-border-strong: #8C8577; /* Formfelder, Chips, Stepper 3.22:1 auf bg (UI ≥ 3:1) */
  --tl-color-success:       #2E6B3F; /* «An Lager», Bestätigung   5.61:1 auf bg */
  --tl-color-warning:       #8A5A12; /* «Nachlieferung KW 48»     5.20:1 auf bg */
  --tl-color-error:         #A3352B; /* Fehlermeldungen           5.96:1 auf bg */
  --tl-color-focus:         #1E3A8A; /* Fokusring auf hellen Flächen 9.11:1 auf bg */

  /* ---------- Farbe · dunkles Schema «Tannengrün» (C-Akzente, Gastro-Band) ---------- */
  --tl-color-dark-bg:        #2C392D;
  --tl-color-dark-bg-deep:   #232E24;
  --tl-color-dark-text:      #F4F0E8; /* 10.68:1 */
  --tl-color-dark-muted:     #D9D3C5; /*  8.13:1 */
  --tl-color-dark-accent:    #A8996B; /*  4.30:1 → nur ≥ 24px oder ≥ 18.66px bold, UI-Linien */
  --tl-color-dark-line:      rgba(168,153,107,.45);
  --tl-color-focus-on-dark:  #F4F0E8;

  /* ---------- Serienfarben (nur Produkt-/Serienflächen) ---------- */
  --tl-series-weiss-bg:    #F4F0E8;
  --tl-series-goldrand-bg: #2C392D;
  --tl-series-kobalt-bg:   #E3E8F0; /* Eisblau; Text #1F2620 = 12.58:1 */
  --tl-series-kobalt-ink:  #1E3A8A;

  /* ---------- Typografie ---------- */
  --tl-font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;   /* 300, 300 italic */
  --tl-font-sans:  "Inter", "Helvetica Neue", Arial, system-ui, sans-serif; /* 400, 600 */
  /* 2 Familien · 4 Schnitte (Performance-Budget Phase 6) */

  /* Aktive Stile (max. 8 pro Seite) */
  --tl-type-display:  300 clamp(2.5rem, 1.6rem + 3.6vw, 5rem)/1.02 var(--tl-font-serif);   /* 40 → 80 */
  --tl-type-h2:       300 clamp(2rem, 1.5rem + 2vw, 3.25rem)/1.08 var(--tl-font-serif);     /* 32 → 52 */
  --tl-type-h3:       300 clamp(1.5rem, 1.3rem + .8vw, 1.875rem)/1.15 var(--tl-font-serif); /* 24 → 30 */
  --tl-type-body-l:   400 1.125rem/1.6 var(--tl-font-sans);  /* 18 */
  --tl-type-body-m:   400 1rem/1.6 var(--tl-font-sans);      /* 16 */
  --tl-type-body-s:   400 .875rem/1.5 var(--tl-font-sans);   /* 14 */
  --tl-type-caption:  400 .75rem/1.45 var(--tl-font-sans);   /* 12 */
  --tl-type-eyebrow:  600 .75rem/1 var(--tl-font-sans);      /* 12, +0.18em, uppercase */
  --tl-type-price:    300 1.375rem/1.1 var(--tl-font-serif); /* 22, tabular */
  --tl-type-label:    600 .9375rem/1 var(--tl-font-sans);    /* 15 — Buttons, Tabs */
  --tl-tracking-eyebrow: .18em;
  --tl-tracking-display: -.015em;

  /* ---------- Abstand (4er-Basis) ---------- */
  --tl-space-1: 4px;   --tl-space-2: 8px;   --tl-space-3: 12px;  --tl-space-4: 16px;
  --tl-space-5: 24px;  --tl-space-6: 32px;  --tl-space-7: 48px;  --tl-space-8: 64px;
  --tl-space-9: 96px;  --tl-space-10: 128px;
  --tl-section-pad: clamp(64px, 4rem + 4vw, 128px); /* symmetrisch oben/unten */

  /* ---------- Layout ---------- */
  --tl-container:        1360px;
  --tl-container-narrow:  720px;
  --tl-gutter:  clamp(16px, 1rem + .6vw, 24px);  /* 12 Spalten ≥ 1024 · 6 ≥ 640 · 2 < 640 */
  --tl-margin:  clamp(20px, 1rem + 2vw, 40px);
  --tl-header-h: 76px;

  /* ---------- Form ---------- */
  --tl-radius-xs: 2px;   /* Buttons, Inputs, Badges */
  --tl-radius-s:  4px;   /* Karten, Set-Karten */
  --tl-radius-pill: 999px; /* Privat/Gastronomie-Schalter, Filterchips */
  --tl-border-w: 1px;
  --tl-shadow-plate: 18px 26px 40px rgba(60,45,20,.22);  /* nur Fotografie/Illustration */
  --tl-shadow-drawer: -24px 0 48px rgba(31,38,32,.18);
  --tl-shadow-none: none;  /* Karten haben keinen Schatten; Trennung über Linie/Fläche */

  /* ---------- Bewegung ---------- */
  --tl-ease-out:   cubic-bezier(.2,.7,.2,1);
  --tl-ease-enter: cubic-bezier(.16,.84,.24,1);
  --tl-dur-fast:  150ms;  /* Farbe, Kontur */
  --tl-dur-base:  200ms;  /* Hover */
  --tl-dur-slow:  400ms;  /* Bild laden (blur → scharf), Drawer */
  --tl-dur-reveal: 600ms; /* Scroll-Reveal 12px */
  --tl-dur-hero:  900ms;  /* nur C-Akzent-Sektionen */

  /* ---------- Icons ---------- */
  --tl-icon-stroke: 1.5px;
  --tl-icon-s: 16px; --tl-icon-m: 20px; --tl-icon-l: 24px;
}

/* Dunkles Schema als Utility für C-Akzent-Sektionen & Gastro-Band */
.tl-scheme-dark {
  --tl-color-bg: var(--tl-color-dark-bg);
  --tl-color-surface: var(--tl-color-dark-bg-deep);
  --tl-color-text: var(--tl-color-dark-text);
  --tl-color-muted: var(--tl-color-dark-muted);
  --tl-color-primary: var(--tl-color-dark-text);
  --tl-color-on-primary: var(--tl-color-dark-bg-deep);
  --tl-color-border: var(--tl-color-dark-line);
  --tl-color-border-strong: var(--tl-color-dark-accent);
  --tl-color-focus: var(--tl-color-focus-on-dark);
  --tl-color-accent-text: var(--tl-color-dark-muted); /* kleiner Text nie Gold auf Grün */
}

/* Basisregeln, die überall gelten */
html { -webkit-text-size-adjust: 100%; }
:where(h1,h2,h3) { hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; text-wrap: balance; }
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--tl-color-focus); outline-offset: 2px;
}
.tl-num { font-variant-numeric: tabular-nums lining-nums; }

@media (prefers-reduced-motion: reduce) {
  :root { --tl-dur-fast: 0ms; --tl-dur-base: 0ms; --tl-dur-slow: 0ms; --tl-dur-reveal: 0ms; --tl-dur-hero: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}