/**
 * tokens.css — Design-Tokens (CSS-Variablen)
 *
 * Farben, Abstände, Typografie-Skala. Kinderfreundliche, moderne Palette
 * mit ausreichenden Kontrasten (WCAG AA).
 *
 * Breakpoints (mobile-first, als Doku — CSS kennt keine Media-Query-Variablen):
 *   - Basis:  < 480px   (Mobile klein)
 *   - sm:     >= 480px
 *   - md:     >= 768px
 *   - lg:     >= 1024px
 *   - xl:     >= 1280px
 */

:root {
    /* Farben — Meilenstein "Figma-Redesign Rollout": Primär- und Akzentfarbe
       auf die verbindliche Figma-Make-Referenz umgestellt (warmes
       Orange/Gelb statt Blau) — deckungsgleich mit den bereits vorhandenen
       Preiskarten-Tokens (--color-card-*) weiter unten. */
    --color-primary: #ff6b35;
    --color-primary-dark: #e2551f;
    --color-primary-light: #ffe4d6;
    --color-accent: #ffd60a;
    --color-accent-dark: #e6bf00;

    --color-text: #1a1a2e;
    --color-text-muted: #4b5563;
    --color-bg: #ffffff;
    --color-bg-alt: #f7f9fc;
    --color-bg-soft: #eef4ff;
    --color-border: #e2e8f0;

    --color-success: #16a34a;
    --color-danger: #dc2626;

    /* Section-Hintergrundfarben — "Erlebniswelt"-Flächen (Meilenstein 6, Iteration 2).
       Warme Cremefarbe statt reinem Weiß als Grundton (analog Live-Seite), plus
       Himmelblau/Rosa/Warmorange-Tönungen und ein dunkles Navy für hervorgehobene
       Sections (Kindergeburtstag, Ticket-CTA). Alle Text-Kombinationen AA-geprüft. */
    --color-bg-cream: #fdfaf3;
    --color-bg-sky: #e3f4fc;
    --color-bg-sky-deep: #bfe9f7;
    --color-bg-pink: #ffe6ee;
    --color-bg-pink-deep: #ffc2d6;
    --color-bg-warm: #fff1de;
    --color-bg-warm-deep: #ffdcae;
    --color-accent-fun: #ec4899;
    --color-navy: #1e2f5c;
    --color-navy-dark: #16233f;
    --color-on-navy: #f4f7ff;
    --color-on-navy-muted: #c3ccea;

    /* Preiskarten-Farben — Meilenstein "Preise & Öffnungszeiten" Figma-Übertragung
       (Bericht Nr. 24). Kräftige Flächenfarben je Preiskategorie, angelehnt an den
       vom Architekten vorgegebenen Figma-Prototyp (Gelb/Orange/Teal/Violett-Wechsel).
       Text auf allen vier Flächen AA-geprüft (weiß bzw. dunkles Navy je nach Fläche). */
    --color-card-amber: #f6b40e;
    --color-card-amber-text: #4a3400;
    --color-card-orange: #f2792b;
    --color-card-orange-text: #ffffff;
    --color-card-teal: #0ea684;
    --color-card-teal-text: #ffffff;
    --color-card-violet: #7c5cf0;
    --color-card-violet-text: #ffffff;

    /* Typografie — Figma-Referenz: Nunito (900, verspielt/rund) für
       Überschriften, Inter für Fließtext. Google-Fonts-Enqueue siehe
       functions.php. System-Font-Fallback bleibt für Ladezeit/FOUT-Fall. */
    --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Nunito", var(--font-base);
    --fw-heading: 900;

    --fs-base: 1rem;
    --fs-sm: 0.875rem;
    --fs-lg: 1.125rem;
    --fs-h1: clamp(2rem, 4vw + 1rem, 3.25rem);
    --fs-h2: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
    --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.625rem);
    --fs-h4: 1.25rem;

    --lh-base: 1.6;
    --lh-heading: 1.25;

    /* Abstände (Spacing-Skala) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    /* Layout */
    --container-max: 1200px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.08);
    --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.1);

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Header/Nav-Höhe für Skip-Link/Sticky-Berechnungen */
    --header-height: 72px;
}