/* ═══════════════════════════════════════════════════════════
   DESIGN-SYSTEM — Balance Alligator
   Marken-Tokens 1:1 aus der Original-Seite (Squarespace-Theme)
   extrahiert. Warm, natürlich, premium.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Farben (Original-Theme als HSL übernommen) ── */
  /* white  = hsl(42, 36%, 95%)  → cremiger Hintergrund            */
  /* black  = hsl(30, 17%, 16%)  → warmes Dunkelbraun (Text)       */
  /* accent = hsl(107,16%, 77%)  → sanftes Salbeigrün              */
  /* lightAccent = hsl(46,30%,89%) darkAccent = hsl(33,16%,29%)    */

  --color-bg:            hsl(42, 36%, 95%);   /* #F6F1E8 Creme       */
  --color-bg-alt:        hsl(46, 30%, 89%);   /* #EBE3D2 Beige       */
  --color-bg-card:       hsl(42, 40%, 97%);   /* fast weiß, warm     */
  --color-surface:       hsl(40, 22%, 92%);

  --color-text:          hsl(30, 14%, 24%);   /* warmes Braun        */
  --color-text-dim:      hsl(30, 10%, 42%);
  --color-text-heading:  hsl(30, 17%, 16%);   /* #302820             */

  --color-accent:        hsl(107, 18%, 62%);  /* Salbeigrün kräftiger für Akzente */
  --color-accent-hover:  hsl(107, 22%, 52%);
  --color-accent-soft:   hsl(107, 16%, 77%);  /* Original-Akzent     */
  --color-accent-light:  hsl(107, 24%, 90%);
  --color-accent-glow:   hsla(107, 30%, 45%, 0.18);

  /* CTA / Primär-Aktion = warmes Dunkelbraun (premium, hoher Kontrast) */
  --color-cta:           hsl(30, 17%, 16%);
  --color-cta-hover:     hsl(30, 18%, 24%);
  --color-cta-text:      hsl(42, 40%, 96%);

  --color-border:        hsla(30, 17%, 16%, 0.12);
  --color-border-bright: hsla(30, 17%, 16%, 0.28);

  --color-success:       #2f9e6f;
  --color-error:         #c0392b;
  --color-warning:       #d9892b;
  --color-star:          #d9a441;        /* ⭐ Akzent */

  /* ── Typografie ── */
  --font-heading:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:     'Almarai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'Fragment Mono', 'JetBrains Mono', ui-monospace, monospace;

  --fs-hero:       clamp(2.75rem, 8vw, 6rem);
  --fs-h1:         clamp(2rem, 5vw, 3.25rem);
  --fs-h2:         clamp(1.6rem, 3.5vw, 2.5rem);
  --fs-h3:         clamp(1.25rem, 2.4vw, 1.7rem);
  --fs-h4:         clamp(1.05rem, 1.8vw, 1.25rem);
  --fs-body:       1.0625rem;
  --fs-lead:       clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-small:      0.9rem;
  --fs-tiny:       0.78rem;

  --lh-tight:      1.1;
  --lh-heading:    1.15;
  --lh-body:       1.7;

  /* ── Abstände ── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      2rem;
  --space-lg:      4rem;
  --space-xl:      6rem;
  --space-section: clamp(4rem, 9vw, 7.5rem);

  /* ── Radien ── */
  --radius-sm:     0.5rem;
  --radius-md:     0.9rem;
  --radius-lg:     1.5rem;
  --radius-xl:     2rem;
  --radius-full:   9999px;

  /* ── Schatten ── */
  --shadow-sm:     0 2px 8px hsla(30, 17%, 16%, 0.06);
  --shadow-md:     0 6px 24px hsla(30, 17%, 16%, 0.10);
  --shadow-lg:     0 16px 48px hsla(30, 17%, 16%, 0.14);
  --shadow-glow:   0 8px 32px var(--color-accent-glow);

  /* ── Übergänge ── */
  --transition-fast: 0.15s ease;
  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-width:     1200px;
  --max-width-narrow: 760px;
  --header-height: 76px;

  /* ── Shop: Z-Index-Hierarchie (feste Werte, nie improvisieren) ── */
  --z-dropdown: 100;
  --z-sticky:   200;   /* Header */
  --z-overlay:  300;   /* Mobile-Nav, Backdrop */
  --z-modal:    400;   /* Mini-Cart, Modals */
  --z-toast:    500;   /* Benachrichtigungen */

  /* ── Shop: Preise & Badges ── */
  --color-price:      var(--color-text-heading);
  --color-price-old:  var(--color-text-dim);
  --color-price-sale: #c53030;
  --color-badge-sale: #c53030;
}

@media (max-width: 767px) {
  :root { --header-height: 60px; }
}