/*
 * tokens.css — Design-Tokens für GastroUnity
 * Einziger Ort für :root-Variablen. Alle Design-Tool-Hebel werden hier deklariert,
 * mit Fallbacks auf Brand-Defaults.
 */

:root {
    /* ───────── Brand-Farben ───────── */
    --color-primary:        #002a5a;
    --color-primary-hover:  #003673;
    --color-secondary:      #0ea5e9;
    --color-accent:         #f7a70e;
    --color-accent-hover:   #d14918;
    --color-super-benefit:  #f15a24;
    --color-benefit:        #10b981;
    --color-info:           #3b82f6;
    --color-warning:        #f59e0b;

    /* ───────── Text- und Hintergrundfarben ───────── */
    --color-text-main:      #334155;
    --color-text-heading:   #002a5a;
    --color-text-light:     #64748b;
    --color-bg-page:        #f8fafc;
    --color-bg-white:       #ffffff;
    --color-bg-alt:         #f1f5f9;
    --color-border:         #e2e8f0;

    /* ───────── Typografie ───────── */
    --font-family-base:     'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base:       16px;
    --line-height-base:     1.6;

    /* Per-Tag-Hebel (vom Design-Tool gesteuert, Fallback auf Heading-Defaults) */
    /* --font-family-h1, --font-family-h2, --font-family-h3 — fallen zurück auf --font-family-heading */
    /* --color-text-h1, --color-text-h2, --color-text-h3 — fallen zurück auf --color-text-heading */
    --font-size-h1:         2.5rem;
    --font-size-h2:         1.75rem;
    --font-size-h3:         1.25rem;

    /* ───────── Links (Design-Tool-Hebel) ───────── */
    --color-link:               var(--color-primary);
    --color-link-hover:         var(--color-accent-hover);
    --text-decoration-link:       none;
    --text-decoration-link-hover: none;
    --font-weight-link:           400;
    --font-weight-link-hover:     400;

    /* ───────── Navigation (Header) ───────── */
    --color-nav-bg:         var(--color-primary);
    --color-nav-text:       var(--color-bg-page);
    --color-nav-hover:      var(--color-accent);
    --font-family-nav:      inherit;
    --font-size-nav:        0.95rem;
    --font-weight-nav:      500;
    --text-transform-nav:   uppercase;

    /* ───────── Buttons (4 Varianten) ───────── */
    --color-btn1-bg:        var(--color-accent);
    --color-btn1-hover:     var(--color-primary);
    --border-radius-btn1:   4px;

    --color-btn2-bg:        var(--color-primary);
    --color-btn2-hover:     var(--color-primary-hover);
    --border-radius-btn2:   4px;

    --color-btn3-bg:        transparent;
    --color-btn3-text:      var(--color-primary);
    --color-btn3-border:    var(--color-primary);
    --color-btn3-hover:     var(--color-primary);
    --color-btn3-text-hover: var(--color-bg-white);
    --border-radius-btn3:   4px;

    --color-btn4-bg:        transparent;
    --color-btn4-text:      var(--color-primary);
    --color-btn4-border:    var(--color-primary);
    --color-btn4-hover:     var(--color-primary);
    --color-btn4-text-hover: var(--color-bg-white);
    --border-radius-btn4:   4px;

    /* ───────── Cards ───────── */
    /* Steuern alle Karten (.card, .ad-card). Mockup-Pragmatismus:
       keine eigenen Variablen pro Card-Variante, nur ein gemeinsamer Hebel. */
    --card-bg:              var(--color-bg-white);
    --card-border-color:    var(--color-border);
    --card-radius:          6px;
    --card-padding:         1.5rem;
    /* Indirection: Card-Body folgt der Body-Schraube, Card-Title der h3-Schraube.
       Wenn der Card-Hebel im Design-Tool aktiv gezogen wird, überschreibt er. */
    --card-font-size:       var(--font-size-base, 1rem);
    --card-title-size:      var(--font-size-h3, 1.25rem);
    --card-shadow:          var(--shadow-md);
    --card-shadow-hover:    var(--shadow-hover);

    /* Kleinanzeigen-Card: nur Bild-Ecken-Hebel (Rest erbt von --card-*) */
    --ad-img-radius:        4px;

    /* ───────── Tags (Facts & Benefits) ───────── */
    --radius-tag:           15px;
    --font-size-tag:        0.75rem;
    --font-weight-tag:      500;
    --padding-tag:          0.15rem 0.6rem;

    --color-tag-fact-bg:        #f1f5f9;
    --color-tag-fact-border:    #e2e8f0;
    --color-tag-fact-text:      #334155;

    --color-tag-top-benefit-bg:     var(--color-accent);
    --color-tag-top-benefit-border: transparent;
    --color-tag-top-benefit-text:   #ffffff;

    --color-tag-super-benefit-bg:     var(--color-super-benefit);
    --color-tag-super-benefit-border: transparent;
    --color-tag-super-benefit-text:   #ffffff;

    --color-tag-benefit-bg:     var(--color-benefit);
    --color-tag-benefit-border: transparent;
    --color-tag-benefit-text:   #ffffff;

    /* ───────── Social-Icons ───────── */
    --color-social-bg:       #f1f5f9;
    --color-social-hover:    #e2e8f0;
    --color-social-outline:  transparent;
    --color-social-text:     #334155;

    /* ───────── Radius-Skala ───────── */
    --radius-sm:            4px;
    --radius-md:            6px;
    --radius-lg:            12px;
    --radius-pill:          9999px;

    /* ───────── Schatten ───────── */
    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* ───────── Spacing-Skala (4-pt-Grid) ───────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ───────── Header-Höhe (für sticky-Sidebars) ───────── */
    --header-height: 80px;

    /* ───────── Z-Index-Skala ───────── */
    --z-header:           1000;
    --z-mobile-overlay:    998;
    --z-mockup-nav:      10000;
    --z-modal:          100000;
    --z-design-tool:    100000;
}