/* ==========================================================================
   tokens.css · Single-Source-of-Truth fuer SIMO-CI-Design-Tokens
   Stand: 2026-05-31 · KORRIGIERT auf Original-CI (Purple + Navy)

   Diese Datei definiert die kanonischen Werte. Aenderungen MUESSEN auch
   in den Inline-Critical-CSS-Block in templates/layout/base.html.twig
   gespiegelt werden (Konstitution Art. XIII).

   Brand:
   - Background: #000033 (Dark Navy)
   - Primary:    #b794f6 (Purple)
   - Gradient:   linear-gradient(135deg, #7b2cbf, #5a189a)
   - Text:       #ffffff / #cccccc
   - Glass-BG:   Purple-getoent (Hybrid)
   ========================================================================== */

:root {
    /* ---- Brand Colors · Purple Primary ---- */
    --primary-color: #b794f6;
    --primary-text-color: #c299ff;
    --primary-hover: #c299ff;
    --primary-gradient: linear-gradient(135deg, #7b2cbf 0%, #5a189a 100%);
    --secondary-color: #9c9cf8;
    --accent-color: #5a189a;
    --accent-purple: #5a189a;

    /* Purple-Skala fuer Komponenten die Abstufungen brauchen */
    --purple-primary: #b794f6;
    --purple-hover: #c299ff;
    --purple-light: #d6bcfa;
    --purple-light-2: #d4bfff;   /* Cookiebot-Link-Hover */
    --purple-light-3: #c9a8ff;   /* Allow-All-Button Gradient-Top */
    --purple-medium: #7b2cbf;
    --purple-dark: #5a189a;

    /* Backwards-Compat Aliase (waehrend hardcoded-Teal-Cleanup-Phase) */
    --teal-primary: #b794f6;
    --teal-hover: #c299ff;
    --teal-light: #d6bcfa;
    --teal-medium: #7b2cbf;
    --teal-dark: #5a189a;

    /* ---- Backgrounds · Dark Navy ---- */
    --bg-primary: #000033;
    --bg-secondary: #000033;
    --bg-elevated: #0a0a4d;

    /* ---- Liquid-Glass Panels (Purple-getoent Hybrid) ---- */
    --glass-bg: rgba(183, 148, 246, 0.06);
    --glass-bg-strong: rgba(183, 148, 246, 0.12);
    --glass-bg-menu: rgba(26, 26, 46, 0.85);
    --glass-border: rgba(183, 148, 246, 0.22);
    --glass-border-strong: rgba(183, 148, 246, 0.40);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --glass-glow: 0 0 24px rgba(183, 148, 246, 0.30);

    /* ---- Surface-Skala (White-Alpha auf Navy-BG · Cleanup Phase 1) ---- */
    --surface-1: rgba(255, 255, 255, 0.03);
    --surface-2: rgba(255, 255, 255, 0.05);
    --surface-3: rgba(255, 255, 255, 0.08);
    --surface-4: rgba(255, 255, 255, 0.10);
    --surface-5: rgba(255, 255, 255, 0.15);
    --surface-6: rgba(255, 255, 255, 0.20);
    --surface-7: rgba(255, 255, 255, 0.25);
    --surface-soft: rgba(255, 255, 255, 0.02);
    --surface-soft-2: rgba(255, 255, 255, 0.07);
    --surface-glass-strong: rgba(255, 255, 255, 0.18);
    --surface-elevated: rgba(255, 255, 255, 0.35);

    /* ---- Text-Alpha-Skala (transparente Weißtöne fuer Hierarchien) ---- */
    --text-alpha-30: rgba(255, 255, 255, 0.30);
    --text-alpha-40: rgba(255, 255, 255, 0.40);
    --text-alpha-50: rgba(255, 255, 255, 0.50);
    --text-alpha-60: rgba(255, 255, 255, 0.60);
    --text-alpha-70: rgba(255, 255, 255, 0.70);
    --text-alpha-80: rgba(255, 255, 255, 0.80);
    --text-alpha-90: rgba(255, 255, 255, 0.90);
    --text-alpha-55: rgba(255, 255, 255, 0.55);
    --text-alpha-95: rgba(255, 255, 255, 0.95);

    /* ---- Border-Skala (White-Alpha) ---- */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);

    /* ---- Overlay-Skala (Black-Alpha fuer Modals/Overlays) ---- */
    --overlay-10: rgba(0, 0, 0, 0.10);
    --overlay-20: rgba(0, 0, 0, 0.20);
    --overlay-soft: rgba(0, 0, 0, 0.30);
    --overlay-40: rgba(0, 0, 0, 0.40);
    --overlay-medium: rgba(0, 0, 0, 0.50);
    --overlay-60: rgba(0, 0, 0, 0.60);
    --overlay-70: rgba(0, 0, 0, 0.70);
    --overlay-strong: rgba(0, 0, 0, 0.80);
    --overlay-12: rgba(0, 0, 0, 0.12);
    --overlay-15: rgba(0, 0, 0, 0.15);

    /* ---- Purple-Tint-Skala (Glow/Hover-Akzente) ---- */
    --purple-tint-05: rgba(183, 148, 246, 0.05);
    --purple-tint-06: rgba(183, 148, 246, 0.06);
    --purple-tint-08: rgba(183, 148, 246, 0.08);
    --purple-tint-10: rgba(183, 148, 246, 0.10);
    --purple-tint-15: rgba(183, 148, 246, 0.15);
    --purple-tint-18: rgba(183, 148, 246, 0.18);
    --purple-tint-20: rgba(183, 148, 246, 0.20);
    --purple-tint-22: rgba(183, 148, 246, 0.22);
    --purple-tint-25: rgba(183, 148, 246, 0.25);
    --purple-tint-30: rgba(183, 148, 246, 0.30);
    --purple-tint-35: rgba(183, 148, 246, 0.35);
    --purple-tint-40: rgba(183, 148, 246, 0.40);
    --purple-tint-50: rgba(183, 148, 246, 0.50);
    --purple-tint-85: rgba(183, 148, 246, 0.85);

    /* ---- Accent-Tint (alter #2605f3-Marker) ---- */
    --accent-tint-04: rgba(38, 5, 243, 0.04);
    --accent-tint-10: rgba(38, 5, 243, 0.10);
    --accent-tint-12: rgba(38, 5, 243, 0.12);
    --accent-tint-20: rgba(38, 5, 243, 0.20);
    --accent-tint-30: rgba(38, 5, 243, 0.30);
    --accent-tint-40: rgba(38, 5, 243, 0.40);
    --accent-tint-60: rgba(38, 5, 243, 0.60);

    /* ---- Navy-Tint (auf bg-primary #000033) ---- */
    --navy-glass: rgba(0, 0, 51, 0.92);

    /* ---- Status-Farben (Success/Error/Warning) ---- */
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ffb800;

    /* ---- Status-Badge-Tripel (BG / Text / Border) fuer Toast/Inline-Messages ---- */
    --success-bg: rgba(16, 185, 129, 0.20);
    --success-text: #10f981;
    --success-border: rgba(16, 185, 129, 0.30);
    --error-bg: rgba(239, 68, 68, 0.20);
    --error-text: #ff6b6b;
    --error-border: rgba(239, 68, 68, 0.30);
    --warning-bg: rgba(255, 184, 0, 0.20);
    --warning-text: #ffd66b;
    --warning-border: rgba(255, 184, 0, 0.30);

    /* ---- Text ---- */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-on-teal: #ffffff;
    --text-on-purple: #ffffff;
    --text-on-bright: #0a1a1a;   /* Dark text auf Purple-Gradient-CTA */

    /* ---- Shadow & Blur ---- */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --blur-amount: 20px;
    --blur-saturate: 150%;

    /* ---- Typography ---- */
    --font-family-base: "InterDisplay", "UniNeue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-heading: "UniNeue Regular", "UniNeue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-ui: "UniNeue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-text: "InterDisplay", "UniNeue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-size-base: 18px;
    --font-size-small: 16px;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;

    --font-weight-book: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --line-height-base: 1.7;
    --line-height-heading: 1.3;

    /* ---- Spacing ---- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4.5rem;
    --spacing-4xl: 6rem;

    /* ---- Misc ---- */
    --border-radius: 12px;
    --border-radius-lg: 24px;
    --border-radius-pill: 999px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Focus Indicator (WCAG 2.2 AA) ---- */
    --focus-ring: 0 0 0 3px #b794f6, 0 0 16px rgba(183, 148, 246, 0.45);
    --focus-outline: 3px solid #b794f6;

    /* ---- Z-Index-Skala (Phase-2-Cleanup) ----
       Hinweis: bestehende ad-hoc Werte koennen iterativ migrieren.
       Verbindlich fuer neue Komponenten. */
    --z-base: 1;
    --z-raised: 2;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
    --z-tooltip: 1300;
    --z-debug: 9999;
}