/* ==========================================================================
   Jeddeloh – Design-Tokens (CSS Custom Properties) · SINGLE SOURCE OF TRUTH
   Werte 1:1 aus dem Altsystem-Theme + fluide Erweiterungen (vormals responsive.css).
   Dies ist die EINE kanonische Token-Quelle (u. a. für Claude Design /design-sync).
   Reihenfolge: fonts.css → design-tokens.css → theme.css → components.css →
   responsive.css → app.css → /theme.css.
   - responsive.css enthält KEINE Token-Definitionen mehr (nur Selektoren/Layout).
   - /theme.css überschreibt zur Laufzeit ausschließlich die als „brandbar"
     markierten Tokens (siehe app/theme/service.py · DEFAULTS, per Test abgesichert).
   ========================================================================== */

:root {
  /* === Farben · Marke (brandbar — via Admin/`/theme.css` überschreibbar) ===
     Bei Änderung hier IMMER app/theme/service.py · DEFAULTS mitziehen
     (tests/test_theme.py schlägt sonst fehl). */
  --color-primary:   #03503C;   /* Dunkelgrün – Header, Footer, Buttons, Rahmen */
  --color-secondary: #ECECEC;   /* Hellgrau – Top-Bar, Karten-/Login-Hintergrund */
  --color-tertiary:  #87B14B;   /* Hellgrün – Akzent: Unterstreichungen, Preis, CC-Badge */
  --color-text:      #333333;   /* Fließtext */
  --color-border:    #D9D9D9;   /* Standard-Rahmen */

  /* Ableitung (NICHT brandbar): Tertiärgrün als TEXTfarbe hat nur 2,5:1 Kontrast auf
     Weiß — für Preis-/Akzenttexte dunklere Stufe derselben Familie (4,6:1, WCAG AA).
     Flächen/Balken/Badges nutzen weiterhin --color-tertiary. */
  --color-accent-text: #5E7F34;

  /* === Farben · Neutral/UI === */
  --color-white:        #FFFFFF;
  --color-black:        #000000;
  --color-on-primary:   #FFFFFF;  /* Text/Icons auf dunkelgrünem Grund */
  --color-on-tertiary:  #06301F;  /* Text auf Hellgrün — Weiß hätte dort nur 2,5:1 Kontrast */
  --color-muted:        #757575;  /* sekundäre Texte (vormals #9E9E9E — Kontrast < 3:1 auf Weiß, WCAG-Fix) */
  --color-topbar-link:  #464646;  /* Links in der Top-Bar */
  --color-input-bg:     #F8F8F8;  /* Mengen-/Formfelder */
  --color-zebra:        #f9f9f9;  /* Zebra-Zeilen in der Eigenschaftstabelle */

  /* === Farben · Semantisch === */
  --color-notice-bg:        #FFF7E0;             /* Hinweis/Warenkorb-Notiz – Hintergrund */
  --color-notice-border:    #E6D27A;             /* Hinweis/Warenkorb-Notiz – Rahmen */
  --color-danger:           #8A2F2F;             /* Fehlertext (z. B. Login) */
  --color-overlay:          rgba(0, 0, 0, 0.28); /* Hero-Verlauf unten (Lesbarkeit) */
  --color-on-primary-faint: rgba(255, 255, 255, 0.4); /* Placeholder im Header-Suchfeld */
  --color-hero-start:       #d6e4c8;             /* Hero-Verlauf (hell) */
  --color-hero-end:         #a9c98c;             /* Hero-Verlauf (kräftiger) */

  /* === Typografie === */
  --font-body:    'Open Sans', sans-serif;          /* Fließtext, Formulare (brandbar) */
  --font-heading: 'Open Sans Condensed', sans-serif;/* Überschriften, Navi, Buttons (brandbar) */
  --font-display: var(--font-heading);              /* Alias: Display/Headlines */
  --font-ui:      var(--font-heading);              /* Alias: UI/Navi/Buttons */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Schriftgrößen – ruhige ~1.25-Skala mit wenigen Stufen (Katalog-Design-Update).
     18px-Stufe: Navigation/Buttons/Karten-Name · 22px-Stufe: Preis/Lead/Footer-Titel.
     Die großen Signatur-Headlines (H1/PDP-Titel) bleiben fluide. Vormalige Werte stehen
     zur Nachvollziehbarkeit im Kommentar. */
  --fs-meta:          13px;   /* Karten-Meta (Qualität · Größe), Hinweise */
  --fs-small:         14px;   /* sekundäre Texte, Kategorien, Filterwerte */
  --fs-body:          clamp(0.875rem, 0.82rem + 0.25vw, 1rem);     /* 14 → 16px (vormals bis 18px — „wirkt extrem groß“, 01.10.2026) */
  --fs-body-lh:       22px;
  --fs-ui:            18px;   /* generische UI-Stufe */
  --fs-nav:           18px;   /* Hauptnavigation */
  --fs-button:        18px;   /* Buttons (vormals 20px) */
  --fs-card-name:     18px;   /* Karten-Name (vormals clamp 18 → 24px) */
  --fs-lead:          22px;   /* Vorspann/Lead */
  --fs-card-price:    22px;   /* Karten-Preis (vormals clamp 24 → 36px) */
  --fs-footer-title:  22px;
  --fs-h2:            clamp(1.5rem, 1.30rem + 0.90vw, 1.875rem);   /* 24 → 30px */
  --fs-h1:            clamp(1.875rem, 1.10rem + 2.40vw, 3.125rem); /* 30 → 50px */
  --fs-h1-lh:         40px;
  --fs-product-title: clamp(1.75rem, 1.00rem + 2.30vw, 3.125rem);  /* 28 → 50px */

  /* === Abstände · Base-4-Skala ===
     Vokabular für neue Arbeit. Bestehende Off-Grid-Werte (18/26/30/45 …) bleiben
     bewusst lokal als markierte Ausnahmen (0 Pixel-Delta zur Altsystem-Optik). */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* === Abstände · Semantisch === */
  --gutter:        16px;                      /* fester Grid-Abstand */
  --gutter-fluid:  clamp(12px, 1.5vw, 36px);  /* mitwachsender Raster-/Grid-Abstand */
  --page-pad-x:    clamp(16px, 3vw, 64px);    /* horizontaler Seitenrand (Header/Content) */
  --space-section: clamp(2rem, 4vw, 6rem);    /* vertikale Sektions-Luft */

  /* === Radien === */
  --radius-none:  0;             /* Default: scharfe Ecken (Buttons, Inputs) */
  --radius-card:  10px;          /* Produktkarten, abgerundete Elemente */
  --radius-round: 50%;           /* Kreise (Wunschzettel, Suggest-Add-Button) */
  --radius-cc:    0 0 10px 10px; /* CC-Badge (unten abgerundet) */

  /* === Schatten === */
  --shadow-card:       0 3px 6px rgba(0, 0, 0, 0.16);
  --shadow-card-hover: 0 6px 22px rgba(0, 0, 0, 0.12); /* Produktkarte :hover */
  --shadow-soft:       rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --shadow-cc:         inset 0 3px 6px #00000029, 0 3px 6px #0000004D;
  --shadow-flyout:     0 3px 6px rgba(0, 0, 0, 0.16);
  --shadow-bar:        0 -2px 8px rgba(0, 0, 0, 0.12); /* sticky Mobil-Filterleiste */

  /* === Motion === */
  --duration-fast: 0.15s;  /* Karten-Hover */
  --duration-base: 0.3s;   /* Links, Buttons */
  --duration-slow: 0.45s;  /* Warenkorb-Puls */
  --ease-standard: ease;

  /* === Z-index-Skala === */
  --z-cc:         5;    /* CC-Badge-Tab unter dem Header */
  --z-sticky-bar: 50;   /* Mobil-Filterleiste */
  --z-flyout:     60;   /* Navi-Flyout, Sprach-Dropdown */
  --z-dropdown:   70;   /* Such-Vorschläge */
  --z-header:     100;  /* Sticky-Header */
  --z-toast:      200;  /* Toasts (über allem) */

  /* === Layout · Container-Maxbreiten === */
  --container-xl:    1140px;  /* Inhalts-Container ab xl */
  --container-xxl:   1660px;  /* Inhalts-Container ab xxl (1660px-Breakpoint) */
  --container-slim:  1280px;  /* schmaler Inhalt */
  --container-read:  1100px;  /* Lesebreite: Text, Formulare, Checkout */
  --container-wide:  2800px;  /* weite Breite: Header/Footer/Home, Produktraster, Galerien */

  /* === Layout · Produktraster (selbst-skalierendes Auto-Grid) === */
  --card-min:   190px;        /* kleinste Kartenbreite */
  --card-ideal: 16vw;         /* ideale Kartenbreite (skaliert mit Viewport) */
  --card-max:   280px;        /* größte Kartenbreite */
  --tap-target: 44px;         /* Mindest-Touch-Ziel */

  /* === Höhen === */
  --header-height:     90px;  /* xxl 96px */
  --header-height-xxl: 96px;
  --topbar-height:     32px;
}

/* 4K/Großbild: etwas größere Basisschrift (responsive Token-Override). */
@media (min-width: 2560px) {
  :root { --fs-body: clamp(1rem, 0.9rem + 0.3vw, 1.25rem); }
}

/* Mobil: kompakterer Sticky-Header (90px + 32px Top-Bar fräsen sonst ~18% aus einem
   667px-Viewport). */
@media (max-width: 767px) {
  :root { --header-height: 64px; }
}

/* --------------------------------------------------------------------------
   Breakpoints (in Media-Queries verwenden – CSS-Variablen sind dort nicht nutzbar):
     sm 576 · md 768 · lg 992 · xl 1200 · xxl 1660 · 3xl 1920 (2K) · 4k 2560
   xxl 1660 weicht bewusst vom Bootstrap-Standard (1400) ab.
   Sonder-Breakpoints im Original: 360px, 1245px (Navi), 1680px (CC-Badge fix).
   -------------------------------------------------------------------------- */