/**
 * Design Tokens – shop&food
 *
 * Werte exakt aus der Figma-Vorlage extrahiert (Layout A + Design System).
 * Schriften: Bitter (Slab-Serif, Display) + Mona Sans (Body) – beide OFL-lizenziert.
 */

:root {

  /* ─── Farben (exakt aus Figma) ───────────────────────── */
  --color-cream:        #FFFBBB;   /* Header-/Hero-Hintergrund, Text auf Rot/Schwarz */
  --color-red:          #FF0004;   /* Sections, CTA-Buttons, aktiver Nav-Link        */
  --color-black:        #000000;   /* Navigation, Footer, Headlines                  */
  --color-white:        #FFFFFF;   /* Karten, Formularfelder                         */
  --color-green:        #00DC00;   /* "frei" / "jetzt anmelden" Status-Pill          */
  --color-gray-mid:     #CCCCCC;   /* "ausgebucht" Status-Pill, Input-Border         */
  --color-gray-light:   #F5F5F5;   /* Card-Bild-Placeholder                          */
  --color-text:         #000000;   /* Standardtext                                   */
  --color-text-muted:   #555555;   /* Sekundärtext, Meta-Infos                       */
  --color-border:       #CCCCCC;   /* Formularfelder                                 */
  --color-placeholder:  #999999;   /* Input-Placeholder                              */

  /* ─── Typografie ─────────────────────────────────────── */
  --font-display:  'Bitter', Georgia, 'Times New Roman', serif;
  --font-body:     'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'Courier New', Courier, monospace;

  /* Schriftgrössen (aus Figma) */
  --text-xs:    0.6875rem;  /*  11px – Tag-Pills                        */
  --text-sm:    0.8125rem;  /*  13px – Status-Pills, Meta, Overline     */
  --text-base:  0.9375rem;  /*  15px – Buttons, Card-Excerpt            */
  --text-md:    1.0625rem;  /*  17px – Hauptbutton, Fliesstext          */
  --text-lg:    1.25rem;    /*  20px – Lead, Card-Titel, Tour-Zeilen    */
  --text-xl:    1.5rem;     /*  24px – Formular-Titel (Bitter Bold)     */
  --text-2xl:   2.5rem;     /*  40px – Panel-Titel "Touren Einzelperson"*/
  --text-3xl:   3.5rem;     /*  56px – Section-Titel "Jetzt buchen"     */
  --text-hero:  6rem;       /*  96px – H1 "shop & food" / Seiten-Titel  */

  /* Zeilenhöhe */
  --leading-tight:   1.0;    /* Hero-Titel (leading-none im Figma) */
  --leading-snug:    1.35;   /* Card-Titel                         */
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;   /* Lead-Text, Tour-Zeilen             */

  /* Buchstabenabstand */
  --tracking-wide:   0.12em;  /* Overline 13px → 1.56px tracking */
  --tracking-normal: 0;

  /* Schriftstärken */
  --weight-light:    300;   /* Nav-Links (Mona Sans Light)       */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;   /* Card-Titel (Bitter SemiBold), Labels */
  --weight-bold:     700;   /* Formular-Titel, Tour-Datum (Bitter Bold) */
  --weight-extrabold: 800;  /* H1/Display (Bitter ExtraBold)     */
  --weight-black:    900;

  /* ─── Abstände ───────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px  */
  --space-2:   0.5rem;    /*  8px  */
  --space-3:   0.75rem;   /* 12px  */
  --space-4:   1rem;      /* 16px  */
  --space-5:   1.25rem;   /* 20px  */
  --space-6:   1.5rem;    /* 24px  */
  --space-7:   1.75rem;   /* 28px – Hero-Content-Gap */
  --space-8:   2rem;      /* 32px  */
  --space-10:  2.5rem;    /* 40px – Standard Seiten-Padding */
  --space-12:  3rem;      /* 48px  */
  --space-16:  4rem;      /* 64px  */
  --space-20:  5rem;      /* 80px  */
  --space-24:  6rem;      /* 96px  */

  /* ─── Layout ─────────────────────────────────────────── */
  --container-max:    1440px;
  --container-inner:  1360px;   /* 1440 - 2 × 40px */
  --nav-height:       57px;
  --side-padding:     var(--space-10);  /* 40px */

  /* Breakpoints (als Custom-Properties für JS-Zugriff) */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1440px;

  /* ─── Radius (aus Figma) ─────────────────────────────── */
  --radius-input:  4px;     /* Formularfelder            */
  --radius-sm:     4px;
  --radius-md:     8px;     /* Card-Bilder               */
  --radius-lg:     10px;    /* Formular-Karte            */
  --radius-pill:   50px;    /* Buttons, Tags             */

  /* Border-Stärke Buttons/Pills */
  --border-btn: 1.5px;

  /* ─── Schatten ───────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.16);

  /* ─── Übergänge ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ─── z-Index Schichten ──────────────────────────────── */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-nav:        300;
  --z-modal:      400;
  --z-toast:      500;
}