/* =============================================================================
   tokens.css — Kanzleimarketing-Portal · Design-System v2 · Projekt KitaShield
   1. Design-Tokens (CSS Custom Properties)

   ▸ Markenfarben = Logo-Farben von KitaShield (Blau #4A90E2, Gelb #FFC300,
     Grün #34C759, Rot #FF3A58). Für Text- und Buttonflächen werden dunklere
     Abstufungen derselben Farbtöne genutzt (WCAG AA ≥ 4,5:1 mit Weiß),
     die Originaltöne für Flächen, Deko und große Schrift.
   ▸ Wird via enqueue_block_assets in Frontend UND Gutenberg-Editor geladen.
   ============================================================================= */

:root {
    /* ── Markenfarben (Theme-Rollen) ── */
    --color-primary:           #2A75CC;   /* Blau, AA mit Weiß (4,65:1) */
    --color-primary-hover:     #1E64B8;
    --color-secondary:         #22813A;   /* Grün, AA mit Weiß */
    --color-secondary-hover:   #1B6B30;
    --color-highlight:         #FFC300;   /* Gelb (nur Flächen/Deko, nie als Textfarbe auf Weiß) */
    --color-heading:           #161925;
    --color-text:              #333847;
    --color-text-faded:        #5A6072;
    --color-background:        #FFFFFF;
    --color-background-alt:    #F5F8FD;
    --color-background-dark:   #1E64B8;
    --color-border:            #E2E8F1;
    --color-white:             #FFFFFF;

    /* ── RGB-Token (für rgba() mit Alpha) ── */
    --color-primary-rgb:       42, 117, 204;
    --color-highlight-rgb:     255, 195, 0;
    --color-white-rgb:         255, 255, 255;

    /* ── KitaShield-Palette (Logo-Farben + Abstufungen) ── */
    --ks-blue:          #4A90E2;
    --ks-blue-dark:     #2171CF;
    --ks-blue-deep:     #1B5AA6;
    --ks-blue-soft:     #EAF2FC;
    --ks-yellow:        #FFC300;
    --ks-yellow-dark:   #8C6B00;   /* Gelb als Textfarbe (AA) */
    --ks-yellow-soft:   #FFF6D6;
    --ks-green:         #34C759;
    --ks-green-dark:    #22813A;
    --ks-green-soft:    #E7F8EB;
    --ks-red:           #FF3A58;
    --ks-cta:           #E02848;   /* Rot für Buttons, AA mit Weiß (4,6:1) */
    --ks-cta-hover:     #C41E3C;
    --ks-red-soft:      #FFEDF0;
    --ks-ink:           #161925;
    --ks-navy:          #284357;

    /* Bereichsfarbe (wird je Bereich per Body-/Sektionsklasse überschrieben) */
    --ks-area:          var(--ks-blue);
    --ks-area-dark:     var(--ks-blue-dark);
    --ks-area-soft:     var(--ks-blue-soft);

    /* ── Typografie ── */
    --font-primary:            'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --line-height-body:        1.7;
    --line-height-heading:     1.2;

    /* ── Layout ── */
    --max-width:               1200px;
    --max-width-narrow:        760px;
    --gutter:                  clamp(20px, 4vw, 48px);

    /* ── Spacing-Skala ── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  16px;
    --space-4:  24px;
    --space-5:  32px;
    --space-6:  48px;
    --space-7:  64px;
    --space-8:  96px;

    /* ── Border Radius (KitaShield: weich und rund) ── */
    --radius-sm:   8px;
    --radius-md:  14px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-full: 9999px;
    --radius:     12px;   /* Standard: Nav-Links, Felder (Buttons: Pill in kitashield.css) */

    /* ── Effekte ── */
    --transition:          0.17s ease;

    /* Shadow Stack (leicht blaustichig statt grau) */
    --shadow-sm:           0 1px  3px rgba(22, 25, 37, 0.06);
    --shadow-md:           0 6px 20px rgba(22, 25, 37, 0.07);
    --shadow-lg:           0 16px 40px rgba(22, 25, 37, 0.10);
    --shadow-colored:      0 10px 30px rgba(var(--color-primary-rgb), 0.14);

    /* Legacy — bleiben für Rückwärtskompatibilität */
    --box-shadow:          var(--shadow-md);
    --box-shadow-card:     var(--shadow-colored);

    /* ── Section-Spacing ── */
    --section-y:          88px;
    --section-y-md:       68px;
    --section-y-sm:       52px;
}