/* ============================================================================
   Ristorante Risotto — Design System Tokens
   Konzept (v2, FINAL): "Cucina Siciliana" — warm-dunkler, kerziger Sizilianer.
   Hero = 5-Ebenen-Parallax-Food-Bühne · Signature "La Spolverata di Zafferano".
   Quelle: design/art-direction.md (Art-Director-Freigabe, NEUAUFBAU).

   v1 ("La Tavola di Notte" — kühles Schiefer-Grau, freigestellter Glow-Teller,
   Bodoni Moda, pinned-horizontal-Karussell) ist VERWORFEN und vollständig aus
   diesem File entfernt.

   Regeln aus second-brain/index.md, die hier verankert sind:
   - CSS-KASKADE: KEINE globale h1/h2/h3-Farbregel → Farbe nur per Kontext-Klasse.
   - ULTRAWIDE: zwei Container-Stufen (--container / --container-wide), koppeln statt strecken.
   - MOTION/REVEAL: Easing-Tokens; prefers-reduced-motion respektieren (Hero = Standbild).
   - PARALLAX/EFFEKTE: 4 klar abgestufte Parallax-Speeds (kein einzelner dünner Layer).
   - Fonts via <link> im HTML laden:
     Playfair Display (400,500,600,700 + Italic 400,500,600) und Outfit (300–700).
============================================================================ */

:root {

  /* --------------------------------------------------------------------------
     1. FARBEN — warm-kerzig (NICHT kühles Schiefer-Grau, kein Reinweiß)
     Alle Text-auf-Fläche-Kombis gegen --ink / --ink-2 auf AA geprüft.
  -------------------------------------------------------------------------- */

  /* Basis / Bühne (dunkel) */
  --color-ink:       #14100B;  /* Nahezu-Schwarz, warm — Hero-Grund, Basis-Sektionen */
  --color-ink-2:     #221A12;  /* warmes Anthrazit — Section-Wechsel, Karten */
  --color-ink-3:     #2E2417;  /* gehobene Karte / Hover-Fläche auf dunkel */
  --color-ink-soft:  #100C07;  /* tiefste Vignette / Footer-Ausklang */

  /* Akzent — Safran / Bernstein */
  --color-gold:      #E0A53B;  /* Primär-Akzent: CTA, Sterne, Linien, Kicker (AA 6.9:1 auf --ink) */
  --color-gold-soft: #F2D38A;  /* Headline-Glanz, Hover, kleine Schrift auf dunkel (AA 11:1 auf --ink) */
  --color-gold-deep: #B07E27;  /* CTA-Hover/gedrückt, getragene Linie */

  /* Creme / Text auf dunkel */
  --color-cream:       #F6EEDD;  /* Fließtext + Headlines auf dunkel (AA 14:1 auf --ink) */
  --color-cream-dim:   #CBBFA6;  /* Sekundärtext, Meta, Captions (AA 8.5:1 auf --ink) */
  --color-cream-faint: #8C8369;  /* ruhige Labels / Hilfslinien-Text (AA 4.6:1 auf --ink) */

  /* Sekundär — sizilianisches Kräutergrün (SEHR sparsam, Tupfer) */
  --color-olive:      #6E7A45;
  --color-olive-soft: #97A36A;

  /* Zustände / Funktional */
  --color-success:    #8FA85B;
  --color-error:      #D9663F;   /* warmer Rost-Ton statt Trattoria-Rot */
  --color-focus-ring: var(--color-gold-soft);

  /* Text-Rollen (immer per Kontext-Klasse einsetzen, nie global) */
  --text-on-dark:       var(--color-cream);
  --text-on-dark-mute:  var(--color-cream-dim);
  --text-on-gold:       #1A1305;   /* Text auf Safran-Button (AA 8.6:1 auf --color-gold) */

  /* Linien / Trenner (auf dunkel) */
  --line-hairline:   rgba(246, 238, 221, 0.10);  /* feine Creme-Linie */
  --line-gold:       rgba(224, 165, 59, 0.55);   /* getragene Gold-Linie */
  --line-gold-faint: rgba(224, 165, 59, 0.18);

  /* Felder / Inputs (auf dunkel) */
  --field-bg:        rgba(246, 238, 221, 0.04);
  --field-bg-focus:  rgba(246, 238, 221, 0.07);
  --field-border:    rgba(246, 238, 221, 0.16);

  /* Overlays / Vignetten — Text trägt überall, Tagesfotos werden eingewärmt */
  --overlay-vignette: radial-gradient(120% 120% at 50% 18%,
                        rgba(20,16,11,0) 38%, rgba(20,16,11,0.55) 78%, rgba(16,12,7,0.92) 100%);
  --overlay-read:     linear-gradient(180deg,
                        rgba(20,16,11,0.10) 0%, rgba(20,16,11,0.55) 60%, rgba(20,16,11,0.88) 100%);
  --overlay-warm-tint: rgba(224, 165, 59, 0.10);  /* Gold-Tint für helle Tagesfotos (multiply) */

  /* --------------------------------------------------------------------------
     2. TYPOGRAFIE
     Headline: Playfair Display (inkl. Italic für H1 + Pull-Quotes)
     Body/UI:  Outfit
  -------------------------------------------------------------------------- */
  --font-display: "Playfair Display", "Cardo", Georgia, "Times New Roman", serif;
  --font-body:    "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid Type-Scale (clamp: min @375px … max @1600px) */
  --fs-hero:    clamp(2.85rem, 1.7rem + 5.6vw, 6.5rem);    /* Hero-H1 (passt in Viewport) */
  --fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);      /* große Section-H2 */
  --fs-h2:      clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  --fs-h3:      clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem);
  --fs-h4:      clamp(1.18rem, 1.05rem + 0.55vw, 1.45rem);
  --fs-lead:    clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);  /* Lead / Subline */
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small:   clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --fs-kicker:  clamp(0.72rem, 0.7rem + 0.08vw, 0.82rem);  /* getrackter Versal-Kicker */

  /* Line-Heights */
  --lh-tight:   1.04;   /* große Display-Headlines */
  --lh-snug:    1.18;   /* H2/H3 */
  --lh-normal:  1.62;   /* Fließtext */
  --lh-relaxed: 1.75;

  /* Tracking — warm/elegant: weite Versal-Kicker, leicht enge Display */
  --tracking-kicker:  0.32em;
  --tracking-caps:    0.14em;
  --tracking-display: -0.015em;
  --tracking-body:    0em;

  /* Font-Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --------------------------------------------------------------------------
     3. SPACING — 8px-Basis + großzügige Section-Rhythmik
  -------------------------------------------------------------------------- */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2.5rem;    /* 40px */
  --space-2xl:  4rem;      /* 64px */
  --space-3xl:  6rem;      /* 96px */
  --space-4xl:  9rem;      /* 144px */

  /* Section-Padding vertikal (fluid) */
  --section-py:       clamp(4.5rem, 3rem + 7vw, 9rem);
  --section-py-tight: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* --------------------------------------------------------------------------
     4. LAYOUT / CONTAINER — zwei Stufen (ULTRAWIDE: koppeln statt strecken)
  -------------------------------------------------------------------------- */
  --container:      1280px;   /* Lesetext, Formular, Story */
  --container-wide: 1680px;   /* Hero, Galerie, Menü-Grid (Range 1600–1720) */
  --container-pad:  clamp(1.25rem, 0.6rem + 3.2vw, 3.5rem);  /* seitlicher Innenabstand */
  --grid-gap:       clamp(1rem, 0.7rem + 1.6vw, 2.25rem);

  /* --------------------------------------------------------------------------
     5. RADIUS — dezent gerundet (warm, nicht hart)
  -------------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------------
     6. SCHATTEN — warm getönt (kein neutral-grauer Box-Shadow)
  -------------------------------------------------------------------------- */
  --shadow-sm:      0 2px 8px rgba(16, 12, 7, 0.35);
  --shadow-md:      0 12px 28px -8px rgba(16, 12, 7, 0.55);
  --shadow-lg:      0 30px 60px -18px rgba(16, 12, 7, 0.70);
  --shadow-card:    0 18px 44px -16px rgba(16, 12, 7, 0.65);
  --glow-gold:      0 0 28px -4px rgba(224, 165, 59, 0.45);   /* DEZENT — kein künstl. Glow-Teller */
  --glow-gold-soft: 0 0 18px -6px rgba(242, 211, 138, 0.35);

  /* --------------------------------------------------------------------------
     7. EASING / MOTION — Tokens
  -------------------------------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* Reveals / Entrances */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);       /* großzügige Slide-ups */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinema:   cubic-bezier(0.83, 0, 0.17, 1);      /* getragene Parallax */
  --ease-warm:     cubic-bezier(0.33, 0, 0.2, 1);       /* Hover, kleine Übergänge */

  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   640ms;
  --dur-reveal: 900ms;

  /* Hero-Parallax-Speeds (L1–L4) — Referenztokens für gsap-scrub.
     Klar abgestuft → erfüllt "isolated-glowing-dish-hero-boring-parallax-rejected". */
  --parallax-l1: 0.15;   /* L1 hinterster Gewürzstaub */
  --parallax-l2: 0.30;   /* L2 Held: Risotto-Szene */
  --parallax-l3: 0.55;   /* L3 Safran/Gewürz-Schweber */
  --parallax-l4: 0.80;   /* L4 vorderste Kräuter */

  /* Folge-Sektionen — dezentere Tiefenebenen */
  --parallax-soft:   0.10;
  --parallax-mid:    0.22;
  --grain-opacity:   0.045;  /* feines Film-Grain über dunklen Sektionen */

  /* Motion-Schalter: bei reduced-motion auf 0 (siehe unten). */
  --motion-scale: 1;

  /* --------------------------------------------------------------------------
     8. Z-INDEX — Hero-Ebenen-Reihenfolge.
        Text liegt VOR der Szene + dem Safran (Stimmung), aber HINTER den Kräutern.
  -------------------------------------------------------------------------- */
  --z-bg:        0;
  --z-hero-l1:   1;   /* spice-dust + burst */
  --z-hero-l2:   2;   /* risotto-szene (Held) */
  --z-hero-l3:   2;   /* saffron-spices: HINTER dem Text (paint über Szene via DOM-Reihenfolge) */
  --z-hero-text: 3;   /* Playfair-Italic H1 + CTA — VOR Szene & Safran */
  --z-hero-l4:   5;   /* herbs-front: bleibt VOR dem Text (fliegt vorne) */
  --z-header:    50;
  --z-overlay:   80;
  --z-modal:     100;
}

/* ============================================================================
   prefers-reduced-motion — verbindlicher Schalter.
   Builder: gsap-scrubs/Reveals an --motion-scale koppeln bzw. hier neutralisieren.
   Hero zeigt im Reduced-Motion-Fall ein STANDBILD (L0–L2 + L4 statisch, kein Scrub).
============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --parallax-l1: 0;
    --parallax-l2: 0;
    --parallax-l3: 0;
    --parallax-l4: 0;
    --parallax-soft: 0;
    --parallax-mid: 0;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   KONTEXT-KLASSEN für Headline-Farbe.
   WICHTIG (CSS-KASKADE-Regel): KEINE globale h1/h2/h3 { color } Regel.
   Headlines bekommen Farbe immer über diese Klassen — nie pauschal.
============================================================================ */
.heading--cream { color: var(--color-cream); }
.heading--gold  { color: var(--color-gold); }
.heading--soft  { color: var(--color-gold-soft); }

.font-display    { font-family: var(--font-display); }
.font-display-it { font-family: var(--font-display); font-style: italic; }
.font-body       { font-family: var(--font-body); }

/* Kicker — getrackter Versal-Kicker ODER italienischer klein-kursiver Kicker */
.kicker {
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: var(--fw-medium);
}
.kicker--italic {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--fs-h4);
  color: var(--color-gold-soft);
}

/* Container-Utilities (ULTRAWIDE: koppeln statt strecken; Header an wide binden) */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Fokus-Sichtbarkeit (a11y) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}