/* ═══════════════════════════════════════════════════════════════════
   WATAN KABAB — Design Token System
   Version 2.0  ·  Feuer · Kohle · Afghangold

   AUFBAU:
   ┌─ Stufe 1: Primitiv-Palette  (rohe Farbwerte)
   │   └─ coal-*    Hintergründe, tiefstes Dunkel
   │   └─ ember-*   Feuer, CTA, Wärme
   │   └─ gold-*    Afghanes Gold, Akzente, Rahmen
   │   └─ parch-*   Pergament, Text auf Dunkel
   │
   └─ Stufe 2: Semantische Tokens  (Bedeutung, Verwendung)
       └─ --surface-*  Flächen & Hintergründe
       └─ --on-*       Text auf diesen Flächen
       └─ --brand-*    Markenfarben
       └─ --cta-*      Call-to-Action Elemente
       └─ --border-*   Rahmen & Trennlinien
       └─ --state-*    Hover, Fokus, Aktiv

   Einbinden: <link rel="stylesheet" href="tokens.css"/>
   (nach fonts.css, vor <style>)
═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   STUFE 1 — PRIMITIV-PALETTE
   Rohe Farbwerte. Nicht direkt in Komponenten nutzen.
   Stattdessen die semantischen Tokens (Stufe 2) verwenden.
════════════════════════════════════════════════════ */
:root {

  /* ── COAL ───────────────────────────────────────────
     Tiefstes Dunkel: verkohltes Holz, Grillkohle.
     Für Hintergründe in Abstufungen.             ── */
  --coal-950: #020100;   /* fast schwarz          */
  --coal-900: #060402;   /* Kohle-Schwarz          */
  --coal-850: #0A0604;   /* tiefe Grube            */
  --coal-800: #0D0905;   /* Seitengrund            */
  --coal-750: #120E07;   /* Haupt-Hintergrund      */
  --coal-700: #1A1208;   /* Abschnitt-Hintergrund  */
  --coal-650: #1D120A;   /* Karte / Panel          */
  --coal-600: #211608;   /* erhöhte Fläche         */
  --coal-550: #2A1C09;   /* leicht erhellt         */
  --coal-500: #3A2410;   /* Rand-Dunkel            */

  /* ── EMBER ──────────────────────────────────────────
     Feuer und Glut: Flammenfarben vom Kern bis Rand.
     Für CTAs, Schaltflächen, Feuer-Akzente.      ── */
  --ember-950: #1E0A02;  /* tiefste Glut           */
  --ember-900: #3D1A08;  /* dunkle Kohlenglut      */
  --ember-800: #5C2810;  /* glühende Kohle         */
  --ember-700: #7A3B12;  /* dunkle Flamme          */
  --ember-600: #8A4517;  /* Grillfeuer             */
  --ember-500: #B5621E;  /* Primärflamme ★         */
  --ember-450: #C0702A;  /* helle Flamme           */
  --ember-400: #C9743A;  /* leuchtende Flamme      */
  --ember-300: #D4885A;  /* warmes Leuchten        */
  --ember-200: #E0A878;  /* helles Feuer           */

  /* ── GOLD ───────────────────────────────────────────
     Afghanes Gold: Emblem, Ornament, Wärmeakzent.
     Für Rahmen, Highlights, Überschriften.       ── */
  --gold-900: #4A3008;   /* tiefstes Gold          */
  --gold-800: #6B4A10;   /* dunkles Gold           */
  --gold-700: #8A6015;   /* sattes Gold            */
  --gold-600: #A07020;   /* mittleres Gold         */
  --gold-550: #B8882A;   /* warmes Gold            */
  --gold-500: #C9943A;   /* Primärgold ★           */
  --gold-450: #D4A040;   /* helles Gold            */
  --gold-400: #DDB055;   /* Highlight-Gold         */
  --gold-350: #E6C070;   /* Blass-Gold             */
  --gold-300: #EDD080;   /* sehr helles Gold       */
  --gold-200: #F5E2A8;   /* Goldton auf Text       */

  /* ── PARCHMENT ──────────────────────────────────────
     Pergament und Sahne: Textfarben auf dunklem Grund.
     Warm, nie kalt-weiß.                         ── */
  --parch-900: #FBF5E8;  /* reines Pergament       */
  --parch-850: #F5E6C8;  /* Haupttext ★            */
  --parch-800: #EDD5A8;  /* warmes Sahne           */
  --parch-750: #E0C898;  /* gedämpftes Sahne       */
  --parch-700: #D8C49C;  /* mittleres Pergament    */
  --parch-600: #C8A46A;  /* warmes Beige           */
  --parch-500: #B09060;  /* taupes Braun           */

}

/* ════════════════════════════════════════════════════
   STUFE 2 — SEMANTISCHE TOKENS
   Was bedeuten die Farben? Hier wird entschieden.
   Diese Tokens direkt in CSS-Regeln verwenden.
════════════════════════════════════════════════════ */
:root {

  /* ── NAVIGATION ─────────────────────────────────────
     Höhe der Navigationsleiste.                  ── */
  --nav-h:        76px;

  /* ── LOGO ────────────────────────────────────────────
     Einheitliche Logo-Farbe auf allen Seiten.    ── */
  --logo-brand:   #B01C14;   /* Dunkelrot — WATAN KABAB */

  /* ── FLÄCHEN (surfaces) ─────────────────────────────
     Hintergründe für verschiedene Ebenen.        ── */
  --surface-base:     var(--coal-900);   /* tiefster Grund, body     */
  --surface-page:     var(--coal-750);   /* Hauptseiten-Hintergrund  */
  --surface-section:  var(--coal-700);   /* Abschnitt-Hintergrund    */
  --surface-card:     var(--coal-650);   /* Karte, Panel, Drawer     */
  --surface-elevated: var(--coal-600);   /* Modal, Dropdown          */
  --surface-footer:   var(--coal-850);   /* Footer                   */
  --surface-nav:      rgba(13,9,5,0.92); /* Nav (halbtransparent)    */
  --surface-overlay:  rgba(6,4,2,0.88);  /* Bild-Overlay             */

  /* ── TEXT (on-surface) ──────────────────────────────
     Text auf dunklen Flächen.                    ── */
  --on-surface:        var(--parch-850);                 /* Haupttext           */
  --on-surface-mid:    rgba(245,230,200,0.78);           /* Fließtext           */
  --on-surface-muted:  rgba(245,230,200,0.52);           /* Sekundär, Captions  */
  --on-surface-faint:  rgba(245,230,200,0.28);           /* Hinweise, Legal     */
  --on-surface-hint:   rgba(245,230,200,0.16);           /* Platzhalter         */
  --on-brand:          var(--coal-900);                  /* Text auf CTA-Btn    */
  --on-gold:           var(--coal-750);                  /* Text auf Gold-Bg    */

  /* ── MARKE (brand) ──────────────────────────────────
     Kernfarben der Marke Watan Kabab.            ── */
  --brand-primary:     var(--ember-500);   /* Feuer-Rot: CTAs          */
  --brand-primary-dark:var(--ember-600);   /* Hover-Zustand            */
  --brand-accent:      var(--gold-500);    /* Gold: Dekoration         */
  --brand-accent-light:var(--gold-400);    /* helles Gold: Highlights  */
  --brand-accent-deep: var(--gold-600);    /* tiefes Gold: Schatten    */
  --brand-glow:        rgba(201,148,58,0.22); /* subtiler Gold-Schein  */

  /* ── CALL TO ACTION (cta) ───────────────────────────
     Für Buttons, Links, interaktive Elemente.    ── */
  --cta-bg:            var(--ember-500);                 /* Füll-Button Bg       */
  --cta-bg-hover:      var(--ember-450);                 /* Füll-Button Hover    */
  --cta-bg-active:     var(--ember-600);                 /* Füll-Button Active   */
  --cta-text:          var(--coal-900);                  /* Text auf CTA-Button  */
  --cta-outline:       var(--gold-500);                  /* Outline-Button Rand  */
  --cta-outline-hover: var(--gold-400);                  /* Outline-Button Hover */
  --cta-outline-text:  var(--parch-850);                 /* Text bei Outline-Btn */
  --cta-shadow:        rgba(181,98,30,0.38);             /* Knopf-Schatten       */
  --cta-shadow-hover:  rgba(181,98,30,0.62);             /* Knopf-Schatten Hover */

  /* ── RAHMEN & TRENNLINIEN (border) ─────────────────
     Alle Rahmen nutzen Gold-Transparenzen.       ── */
  --border-subtle:     rgba(201,148,58,0.10);  /* kaum sichtbar              */
  --border-default:    rgba(201,148,58,0.20);  /* Standard                   */
  --border-medium:     rgba(201,148,58,0.35);  /* deutlich                   */
  --border-strong:     rgba(201,148,58,0.58);  /* betont (Hover, Fokus)      */
  --border-glow:       rgba(201,148,58,0.80);  /* Aktiv, ausgewählt          */
  --divider:           rgba(201,148,58,0.14);  /* Abschnitt-Trenner          */

  /* ── SCHATTEN (shadow) ──────────────────────────────
     Wärme-Schatten statt kaltes Grau.            ── */
  --shadow-sm:   0 2px  8px rgba(0,0,0,0.45);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.30);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.65), 0 2px 12px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 28px rgba(181,98,30,0.28);  /* Ember-Glow            */
  --shadow-gold: 0 0 20px rgba(201,148,58,0.22);  /* Gold-Glow             */

  /* ── ZUSTÄNDE (state) ───────────────────────────────
     Interaktions-Feedback.                       ── */
  --state-hover:    rgba(201,148,58,0.07);  /* Hover-Hintergrund          */
  --state-active:   rgba(201,148,58,0.12);  /* Aktiv-Hintergrund          */
  --state-focus:    rgba(201,148,58,0.50);  /* Fokus-Ring                 */
  --state-selected: rgba(201,148,58,0.15);  /* Ausgewählt                 */
  --state-disabled: rgba(245,230,200,0.22); /* Deaktiviert                */

  /* ── ANIMATIONEN (motion) ───────────────────────────
     Timing-Werte für konsistente Übergänge.      ── */
  --ease-out:     cubic-bezier(0.22, 0.68, 0, 1.2);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   160ms;
  --duration-mid:    280ms;
  --duration-slow:   450ms;

  /* ── LEGACY-ALIASE (Rückwärtskompatibilität) ────────
     Alte Variablennamen bleiben weiter funktionsfähig.
     Neue CSS sollte ausschließlich Stufe-2-Tokens nutzen. ── */
  --bg-base:        var(--coal-900);
  --bg-deep:        var(--coal-800);
  --bg-page:        var(--coal-750);
  --bg-section:     var(--coal-700);
  --bg-card:        var(--coal-650);
  --bg-footer:      var(--coal-850);

  --fire-dark:      var(--ember-600);
  --fire:           var(--ember-600);
  --fire-mid:       var(--ember-500);
  --fire-bright:    var(--ember-400);

  --gold-deep:      var(--gold-600);
  --gold:           var(--gold-500);
  --gold-light:     var(--gold-400);
  --gold-pale:      var(--gold-300);
  --gold-glass:     rgba(201,148,58,0.15);
  --gold-glow:      rgba(201,148,58,0.28);
  --gold-warm:      var(--gold-500);

  --text-primary:   var(--parch-850);
  --text-body:      rgba(245,230,200,0.78);
  --text-muted:     rgba(245,230,200,0.52);
  --text-faint:     rgba(245,230,200,0.28);
  --text-light:     rgba(245,230,200,0.28);
  --text:           var(--parch-850);
  --text-mid:       rgba(245,230,200,0.78);

  --border:         rgba(201,148,58,0.20);
  --border-hover:   rgba(201,148,58,0.50);

  --color-bg:          var(--coal-750);
  --color-bg-2:        var(--coal-700);
  --color-bg-3:        var(--coal-600);
  --color-text:        var(--parch-850);
  --color-text-mid:    rgba(245,230,200,0.78);
  --color-text-muted:  rgba(245,230,200,0.52);
  --color-heading:     var(--parch-850);
  --color-accent:      var(--gold-500);
  --color-accent-2:    var(--gold-400);
  --color-cta:         var(--ember-500);
  --color-cta-dark:    var(--ember-600);
  --color-border:      rgba(201,148,58,0.20);

  --bg:             var(--coal-750);   /* Kurzform für --surface-page */
  --ivory:          #FBF5E8;
  --cream:          var(--coal-700);
  --parchment:      var(--coal-600);
  --bone:           #5C3D18;
  --burgundy:       var(--ember-500);
  --burgundy-dark:  var(--ember-600);
  --burgundy-mid:   var(--ember-500);
  --burgundy-light: var(--ember-500);
  --coffee:         var(--parch-850);
  --coffee-mid:     var(--coal-550);
  --coffee-warm:    var(--parch-700);
  --coffee-light:   var(--parch-600);
}

/* ── Mobile: kleinere Nav ─────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 52px; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  :root { --nav-h: 62px; }
}

/* ════════════════════════════════════════════════════
   GLOBALE LOGO-REGEL — gilt für alle Seiten
   Überschreibt alle seitenspezifischen Werte.
════════════════════════════════════════════════════ */
.nav-logo-name,
.nav-logo-name .nlb,
.footer-logo-name,
.footer-logo-name .nlb {
  color: var(--logo-brand) !important;
  text-shadow: 0 1px 12px rgba(176,28,20,0.20);
}