/* =========================================================================
   DESIGN TOKENS · Marianne's Flammkuchen Shop
   -------------------------------------------------------------------------
   👉 BAUKASTEN: Das ist die EINZIGE Datei, die ihr zum Um-Theming ändern müsst.
      Alle Komponenten in style.css nutzen ausschließlich diese Variablen.
      Um später auf die Farben der Haupt-Homepage umzustellen, einfach die
      --brand-* Werte (und ggf. --ink / --bg) unten austauschen – fertig.
   ========================================================================= */
:root{

  /* ============ 1) MARKENFARBE (hier später an Homepage anpassen) ========= */
  --brand-50:#fff4e8;
  --brand-100:#ffe6cc;
  --brand-200:#ffcd99;
  --brand-300:#ffb266;
  --brand-400:#ff9b33;
  --brand-500:#ff8400;   /* Kernfarbe orange */
  --brand-600:#ec7400;
  --brand-700:#c85f00;
  --brand-800:#9e4b00;
  --brand-900:#7a3a00;

  --brand:var(--brand-500);
  --brand-strong:var(--brand-700);
  --brand-ink:#ffffff;          /* Text auf Markenfläche */
  --brand-tint:var(--brand-50); /* zarte Markenfläche als Hintergrund */

  /* ============ 2) NEUTRALE / SEMANTISCHE FARBEN ========================== */
  --bg:#ffffff;                 /* Seitenhintergrund */
  --surface:#ffffff;            /* Karten */
  --surface-2:#faf6f1;          /* zarter warmer Ton für Abschnitte */
  --surface-3:#f3ece3;
  --ink:#241b14;                /* Haupttext (warmes Espresso-Schwarz) */
  --ink-soft:#4b3f36;
  --muted:#8a7d70;              /* Sekundärtext */
  --line:#ece4db;              /* Trennlinien / Rahmen */
  --line-strong:#dccfc2;
  --dark:#241b14;               /* dunkle Sektionen/Footer */
  --dark-ink:#f3ece3;

  --sale:#d1332e;               /* Angebotspreis / Rabatt */
  --success:#1f8a4c;
  --success-tint:#e8f6ec;

  /* ============ 3) PFEILER-AKZENTE (Versand / Gutschein / Event) ==========
     Für die 3 gleichwertigen Themen – dezent als Chips/Labels genutzt.       */
  --pillar-post:var(--brand-500);   /* Flammkuchen verschicken */
  --pillar-gift:#c0507e;            /* Geschenkgutscheine (Beere) */
  --pillar-event:#2f8f7f;           /* Event-Tickets (Salbei-Teal) */

  /* ============ 4) TYPOGRAFIE ============================================= */
  --font-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif; /* große Headlines */
  --font-heading:"Bricolage Grotesque","Figtree",system-ui,sans-serif; /* Zwischen-Überschriften */
  --font-body:"Figtree",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-accent:"Amatic SC","Bricolage Grotesque",cursive; /* Marken-Akzent (Hero/Eyebrow) */

  /* fließende Typo-Skala */
  --fs-eyebrow:.78rem;
  --fs-sm:.88rem;
  --fs-base:1.02rem;
  --fs-md:clamp(1.1rem,1.4vw,1.25rem);
  --fs-lg:clamp(1.35rem,2vw,1.6rem);
  --fs-xl:clamp(1.8rem,3.2vw,2.4rem);
  --fs-2xl:clamp(2.3rem,4.4vw,3.4rem);
  --fs-hero:clamp(3rem,7vw,5.6rem);

  --lh-tight:1.08;
  --lh:1.6;
  --tracking-eyebrow:.18em;

  /* ============ 5) ABSTÄNDE / RADIEN / SCHATTEN ========================== */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:88px; --space-10:120px;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(36,27,20,.06),0 2px 6px rgba(36,27,20,.05);
  --shadow-md:0 6px 18px rgba(36,27,20,.10);
  --shadow-lg:0 18px 50px rgba(36,27,20,.16);
  --shadow-brand:0 10px 30px rgba(255,132,0,.28);

  /* ============ 6) LAYOUT ================================================= */
  --maxw:1200px;
  --maxw-wide:1320px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   ALTERNATIV-THEME (Beispiel) – zum späteren Umstellen einfach die Werte
   oben ersetzen. Beispiel für ein dunkleres, „Restaurant"-nahes Theme:
     --brand-500:#e2571e;  --surface-2:#f6efe7;  --ink:#1c140e;
   Oder ein komplett anderer Markenton (z. B. Homepage-Grün):
     --brand-500:#4a7c2f; --brand-600:#3f6a28; --brand-700:#33561f;
   ========================================================================= */