/*
 * FairyAurora v3.0 — Design-Token-Layer
 *
 * Source-of-Truth für alle Farben, Timing, Typografie, Radius.
 * Light ist Default; Dark wird via html[data-theme="dark"] aktiviert.
 * system-preference fällt über @media (prefers-color-scheme: dark) greift,
 * wenn [data-theme="system"] oder kein data-theme gesetzt ist.
 *
 * Diese Datei darf KEINE Selektoren enthalten, die auf konkrete Komponenten
 * zielen — nur Token-Definitionen. Komponenten-Regeln in fairy-aurora-components.css.
 */

/* ═══════════════════════════════════════════════════════════════════
   @font-face — Self-Hosted Inter + JetBrains Mono
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter-700.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-600.woff2") format("woff2");
}

/* ═══════════════════════════════════════════════════════════════════
   Light-Palette (Default)
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* — Flächen — */
    --bg:          #f5f6fa;
    --surface:     #ffffff;
    --surface-2:   #eef0f9;
    --surface-3:   #e5e8f4;

    /* — Ränder — */
    --border:        #dfe3f0;
    --border-strong: #b9bfd6;

    /* — Vordergrund / Text — */
    --fg:   #1e1b4b;
    --fg-2: #4c4a73;
    --fg-3: #6d6b92;

    /* — Primär (Cyan) — */
    --primary:        #0284c7;   /* display: icons, sparklines, borders (AA-Large) */
    --primary-strong: #0369a1;   /* WCAG-AA body-text on white (5.93:1) — button-bg */
    --primary-hover:  #075985;   /* hover-state auf primary-strong */
    --primary-glow:   rgba(2, 132, 199, 0.2);
    --primary-tint:   rgba(2, 132, 199, 0.1);

    /* — Accent (Violett) — */
    --accent:        #7c3aed;    /* display (AA 5.28:1 auf bg) */
    --accent-strong: #6d28d9;    /* button-bg (AA-safe white on it: 7.21:1) */
    --accent-hover:  #5b21b6;
    --accent-glow:   rgba(124, 58, 237, 0.2);
    --accent-tint:   rgba(124, 58, 237, 0.1);

    /* — Semantic — */
    --success:        #059669;
    --success-strong: #047857;   /* WCAG-AA button-bg (5.48:1 white) */
    --success-glow:   rgba(5, 150, 105, 0.2);
    --warning:        #d97706;   /* display (icons, borders) */
    --warning-strong: #b45309;   /* WCAG-AA body-text (4.65:1 on bg) */
    --warning-text:   #b45309;
    --warning-glow:   rgba(217, 119, 6, 0.2);
    --danger:         #dc2626;   /* AA 4.83:1 with white → OK */
    --danger-strong:  #b91c1c;   /* stronger hover / critical-CTA */
    --danger-glow:    rgba(220, 38, 38, 0.2);
    --info:           #0284c7;
    --info-glow:      rgba(2, 132, 199, 0.2);

    /* — „On-Color" — WCAG-kompatible Text-Farbe auf farbigem Grund — */
    --on-primary:    #ffffff;
    --on-accent:     #ffffff;
    --on-success:    #ffffff;
    --on-warning:    #ffffff;
    --on-danger:     #ffffff;

    /* — Semantic-Tints (subtile Backgrounds, ~10% opacity) — */
    --success-tint: rgba(5, 150, 105, 0.1);
    --warning-tint: rgba(217, 119, 6, 0.1);
    --danger-tint:  rgba(220, 38, 38, 0.1);
    --info-tint:    rgba(2, 132, 199, 0.1);

    /* — RGB-Komponenten für rgba()-Komposition (themed shadows, borders) — */
    --primary-rgb: 2, 132, 199;
    --accent-rgb:  124, 58, 237;
    --success-rgb: 5, 150, 105;
    --warning-rgb: 217, 119, 6;
    --danger-rgb:  220, 38, 38;

    /* — Tone-Aliases (Admin-Hub / Audit-Severity / Service-State) —
       Light-Mode canonical; Dark-Mode override below. */
    --tone-cyan:          #06b6d4;
    --tone-pink:          #ec4899;
    --tone-purple:        #8b5cf6;
    --tone-cyan-strong:   #0891b2;
    --tone-pink-strong:   #db2777;
    --tone-purple-strong: #7c3aed;
    --tone-cyan-rgb:   6, 182, 212;
    --tone-pink-rgb:   236, 72, 153;
    --tone-purple-rgb: 139, 92, 246;
    /* Severity-Hex-Tokens (Audit-Row, Service-Tile) */
    --sev-info-color:     #06b6d4;
    --sev-warning-color:  #f59e0b;
    --sev-critical-color: #f97316;
    --sev-danger-color:   #ef4444;
    --sev-success-color:  #10b981;
    --sev-neutral-color:  #94a3b8;
    --sev-info-rgb:     6, 182, 212;
    --sev-warning-rgb:  245, 158, 11;
    --sev-critical-rgb: 249, 115, 22;
    --sev-danger-rgb:   239, 68, 68;
    --sev-success-rgb:  16, 185, 129;
    --sev-neutral-rgb:  148, 163, 184;

    /* — Semantic-Aliases (used by older CSS, mapped to canonical tokens) — */
    --success-bg:   var(--success-tint);
    --warning-bg:   var(--warning-tint);
    --danger-bg:    var(--danger-tint);
    --info-bg:      var(--info-tint);
    --text-muted:   var(--fg-3);

    /* — Spacing-Scale (canonical, rem-basiert) — */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* — Touch / Target-Size (WCAG 2.2 SC 2.5.8) — */
    --target-min:   24px;   /* Minimum, all viewports (SC 2.5.8) */
    --target-touch: 44px;   /* Mobile / Apple/Material touch-target */

    /* — Shadows (light mode default) — */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.3);
    /* Inverted shadows for bottom-anchored sheets / sticky-bottom toolbars */
    --shadow-up-sm: 0 -4px 12px rgba(0, 0, 0, 0.06);
    --shadow-up-md: 0 -4px 20px rgba(0, 0, 0, 0.10);

    /* — Print-Tokens (Cascade-overridable, semantically named) — */
    --print-fg: #000;
    --print-bg: #fff;

    /* — Translucent surface for floating overlays on colored hero/gradient — */
    --surface-translucent: rgba(255, 255, 255, 0.2);

    /* — Alva / Fairy — */
    --fairy-primary: #0284c7;
    --fairy-accent:  #7c3aed;
    --fairy-aura:    #818cf8;

    /* — Aurora-Gradient (Hero-BG, Brand-Mark) — */
    --aurora-gradient:
        radial-gradient(at 20% 30%, rgba(2, 132, 199, 0.08) 0%, transparent 50%),
        radial-gradient(at 80% 70%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #f5f6fa 0%, #eef0f9 100%);
    --brand-gradient: linear-gradient(135deg, var(--primary), var(--accent));

    /* — v4 Aurora-Pattern + Brand-Accent-Varianten — */
    --pattern-opacity-subtle:  0.04;
    --pattern-opacity-default: 0.08;
    --pattern-opacity-hero:    0.16;
    --brand-gradient-soft: linear-gradient(90deg, var(--primary-tint), var(--accent-tint));
    --brand-gradient-line: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));

    /* — v4 Alva-Companion Dock — */
    --alva-dock-offset-x: 24px;
    --alva-dock-offset-y: 72px;  /* clears footer / status-bar / Symfony dev-toolbar */
    /* Z-Index-Stack — single source of truth (war app.css:4-11) */
    --z-base:            0;
    --z-popover:         50;
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-flyout:         250; /* mega-menu flyout, above sticky-sidebar (200), below fixed (500) */
    --z-fixed:          500;
    --z-overlay:        900;
    --z-modal-backdrop: 1000;
    --z-modal:          1001;
    --z-popover-modal:  1100;
    --z-toast:          1500;
    --z-tour:           2000;
    --z-command:        2500;
    --z-turbo-bar:    999999;
    /* Alva-Dock stays visible above Modal (1001), Toast (1500), Tour (2000) and Command-Palette (2500).
       Drift-Audit 2026-05-17: spec said 9500, prod had var(--z-overlay)=900 (under Modal). User
       confirmed Alva must outrank all dialogs. */
    --alva-z:           9500;

    /* — Typografie — */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* — Radius — */
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;
    --r-2xl: 16px;
    --r-pill: 999px;
    --r-icon: 8px;

    /* — Timing-Tokens (Motion-Policy § 14) — */
    --t-instant: 80ms;
    --t-fast:    120ms;
    --t-base:    240ms;
    --t-slow:    360ms;
    --t-magic:   600ms;
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* — Alva-CSS-Custom-Properties (für Logo-SVG und zentralen Character) —
       Fee hat IMMER hellen Körper + dunkle Augen/Mund in beiden Modi.
       (Kein var(--fg)/var(--bg) mehr — das würde mitinvertieren.) */
    --alva-primary: var(--primary);
    --alva-accent:  var(--accent);
    --alva-aura:    var(--fairy-aura);
    --alva-celebrating: #ec4899;  /* Pink — Milestone/Confetti-Mood */
    --alva-fg:      #f4f7ff;  /* fast-weiß für Body/Kopf */
    --alva-ink:     #1e1b4b;  /* Aurora-dark-navy für Face-Features */
}

/* ═══════════════════════════════════════════════════════════════════
   Dark-Palette — gleichwertig, nicht als Nachgedanke
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
    --bg:          #0a0e1a;
    --surface:     #141829;
    --surface-2:   #1e2139;
    --surface-3:   #282d48;

    --border:        #232845;
    --border-strong: #3d4270;

    --fg:   #e9eaf5;
    --fg-2: #b9bad4;
    --fg-3: #6d6f99;

    --primary:        #38bdf8;
    --primary-strong: #38bdf8;   /* dark-mode: hell auf dunkel = AAA, strong == primary */
    --primary-hover:  #7dd3fc;
    --primary-glow:   rgba(56, 189, 248, 0.3);
    --primary-tint:   rgba(56, 189, 248, 0.12);

    --accent:        #a78bfa;
    --accent-strong: #a78bfa;
    --accent-hover:  #c4b5fd;
    --accent-glow:   rgba(167, 139, 250, 0.3);
    --accent-tint:   rgba(167, 139, 250, 0.12);

    --success:        #34d399;
    --success-strong: #34d399;
    --success-glow:   rgba(52, 211, 153, 0.25);
    --warning:        #fbbf24;
    --warning-strong: #fbbf24;
    --warning-text:   #fbbf24;
    --warning-glow:   rgba(251, 191, 36, 0.25);
    --danger:         #f87171;
    --danger-strong:  #f87171;
    --danger-glow:    rgba(248, 113, 113, 0.3);
    --info:           #38bdf8;
    --info-glow:      rgba(56, 189, 248, 0.25);

    /* Dark-Mode: „on-color" ist dunkel (bright primary → dark text) */
    --on-primary: #0a0e1a;
    --on-accent:  #0a0e1a;
    --on-success: #0a0e1a;
    --on-warning: #0a0e1a;
    --on-danger:  #0a0e1a;

    /* — Semantic-Tints (dark mode: ~12-15% opacity for visibility) — */
    --success-tint: rgba(52, 211, 153, 0.12);
    --warning-tint: rgba(251, 191, 36, 0.12);
    --danger-tint:  rgba(248, 113, 113, 0.15);
    --info-tint:    rgba(56, 189, 248, 0.12);

    /* — RGB-Komponenten (dark palette) — */
    --primary-rgb: 56, 189, 248;
    --accent-rgb:  167, 139, 250;
    --success-rgb: 52, 211, 153;
    --warning-rgb: 251, 191, 36;
    --danger-rgb:  248, 113, 113;

    /* — Tone-Aliases (dark — heller, mehr Sättigung) — */
    --tone-cyan:          #22d3ee;
    --tone-pink:          #f472b6;
    --tone-purple:        #a78bfa;
    --tone-cyan-strong:   #67e8f9;
    --tone-pink-strong:   #f9a8d4;
    --tone-purple-strong: #c4b5fd;
    --tone-cyan-rgb:   34, 211, 238;
    --tone-pink-rgb:   244, 114, 182;
    --tone-purple-rgb: 167, 139, 250;
    /* Severity-Hex-Tokens (dark — leicht heller für Lesbarkeit) */
    --sev-info-color:     #22d3ee;
    --sev-warning-color:  #fbbf24;
    --sev-critical-color: #fb923c;
    --sev-danger-color:   #f87171;
    --sev-success-color:  #34d399;
    --sev-neutral-color:  #94a3b8;
    --sev-info-rgb:     34, 211, 238;
    --sev-warning-rgb:  251, 191, 36;
    --sev-critical-rgb: 251, 146, 60;
    --sev-danger-rgb:   248, 113, 113;
    --sev-success-rgb:  52, 211, 153;
    --sev-neutral-rgb:  148, 163, 184;

    /* — Shadows (dark mode: stronger black + primary-aura accent) — */
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.4),  0 0 8px  rgba(var(--primary-rgb), 0.10);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--primary-rgb), 0.15);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--primary-rgb), 0.20);
    --shadow-up-sm: 0 -4px 12px rgba(0, 0, 0, 0.4);
    --shadow-up-md: 0 -4px 20px rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.55);

    /* Translucent surface — dark variant uses fg as base */
    --surface-translucent: rgba(255, 255, 255, 0.06);

    --fairy-primary: #38bdf8;
    --fairy-accent:  #a78bfa;
    --fairy-aura:    #6366f1;

    --aurora-gradient:
        radial-gradient(at 20% 30%, rgba(56, 189, 248, 0.10) 0%, transparent 50%),
        radial-gradient(at 80% 70%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0a0e1a 0%, #141829 100%);
    --brand-gradient: linear-gradient(135deg, var(--primary), var(--accent));
}

/* ═══════════════════════════════════════════════════════════════════
   System-Mode — folgt OS-prefers-color-scheme
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg:          #0a0e1a;
        --surface:     #141829;
        --surface-2:   #1e2139;
        --surface-3:   #282d48;
        --border:        #232845;
        --border-strong: #3d4270;
        --fg:   #e9eaf5;
        --fg-2: #b9bad4;
        --fg-3: #6d6f99;
        --primary:        #38bdf8; --primary-strong: #38bdf8;
        --primary-hover:  #7dd3fc;
        --primary-glow:   rgba(56, 189, 248, 0.3);
        --primary-tint:   rgba(56, 189, 248, 0.12);
        --accent:        #a78bfa; --accent-strong: #a78bfa;
        --accent-hover:  #c4b5fd;
        --accent-glow:   rgba(167, 139, 250, 0.3);
        --accent-tint:   rgba(167, 139, 250, 0.12);
        --success: #34d399; --success-strong: #34d399; --success-glow: rgba(52,211,153,0.25);
        --warning: #fbbf24; --warning-strong: #fbbf24; --warning-glow: rgba(251,191,36,0.25); --warning-text: #fbbf24;
        --danger:  #f87171; --danger-strong: #f87171; --danger-glow:  rgba(248,113,113,0.3);
        --info:    #38bdf8; --info-glow:    rgba(56,189,248,0.25);
        --on-primary: #0a0e1a; --on-accent: #0a0e1a; --on-success: #0a0e1a;
        --on-warning: #0a0e1a; --on-danger: #0a0e1a;
        --success-tint: rgba(52, 211, 153, 0.12);
        --warning-tint: rgba(251, 191, 36, 0.12);
        --danger-tint:  rgba(248, 113, 113, 0.15);
        --info-tint:    rgba(56, 189, 248, 0.12);
        --primary-rgb: 56, 189, 248; --accent-rgb: 167, 139, 250;
        --success-rgb: 52, 211, 153; --warning-rgb: 251, 191, 36;
        --danger-rgb: 248, 113, 113;
        /* Tone-Aliases (system-dark) */
        --tone-cyan: #22d3ee; --tone-pink: #f472b6; --tone-purple: #a78bfa;
        --tone-cyan-strong: #67e8f9; --tone-pink-strong: #f9a8d4; --tone-purple-strong: #c4b5fd;
        --tone-cyan-rgb: 34, 211, 238; --tone-pink-rgb: 244, 114, 182; --tone-purple-rgb: 167, 139, 250;
        --sev-info-color: #22d3ee; --sev-warning-color: #fbbf24;
        --sev-critical-color: #fb923c; --sev-danger-color: #f87171;
        --sev-success-color: #34d399; --sev-neutral-color: #94a3b8;
        --sev-info-rgb: 34, 211, 238; --sev-warning-rgb: 251, 191, 36;
        --sev-critical-rgb: 251, 146, 60; --sev-danger-rgb: 248, 113, 113;
        --sev-success-rgb: 52, 211, 153; --sev-neutral-rgb: 148, 163, 184;
        --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.4),  0 0 8px  rgba(var(--primary-rgb), 0.10);
        --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--primary-rgb), 0.15);
        --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--primary-rgb), 0.20);
        --shadow-up-sm: 0 -4px 12px rgba(0, 0, 0, 0.4);
        --shadow-up-md: 0 -4px 20px rgba(0, 0, 0, 0.5);
        --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.55);
        --surface-translucent: rgba(255, 255, 255, 0.06);
        --fairy-primary: #38bdf8;
        --fairy-accent:  #a78bfa;
        --fairy-aura:    #6366f1;
        --aurora-gradient:
            radial-gradient(at 20% 30%, rgba(56, 189, 248, 0.10) 0%, transparent 50%),
            radial-gradient(at 80% 70%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
            linear-gradient(180deg, #0a0e1a 0%, #141829 100%);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Mode-Transition (sanfter L↔D-Wechsel, keine Flash)
   ═══════════════════════════════════════════════════════════════════ */

html {
    transition: background-color var(--t-base) var(--ease-in-out),
                color            var(--t-base) var(--ease-in-out);
}

html * {
    transition-property: background-color, border-color, color;
    transition-duration: var(--t-base);
    transition-timing-function: var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
    html, html * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Bootstrap-CSS-Var-Aliases — Token-Layer
   Mappe Aurora-Tokens auf --bs-*-Vars, damit Bootstrap-interne Rules
   (die wir nicht alle explizit überschreiben) automatisch Aurora-
   Farben erhalten. Gilt für alle Themes; Dark-Forks am Ende.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* — Flächen / Text — */
    --bs-body-bg:               var(--bg);
    --bs-body-color:            var(--fg);
    --bs-secondary-bg:          var(--surface-2);
    --bs-tertiary-bg:           var(--surface-3);
    --bs-body-secondary-color:  var(--fg-2);
    --bs-body-tertiary-color:   var(--fg-3);
    --bs-emphasis-color:        var(--fg);
    --bs-heading-color:         var(--fg);

    /* — Borders — */
    --bs-border-color:              var(--border);
    --bs-border-color-translucent:  var(--border);

    /* — Links — */
    --bs-link-color:       var(--primary-strong);
    --bs-link-hover-color: var(--primary-hover);

    /* Phase 8QW-follow: Bootstrap 5.3 Utility-Klassen (.bg-body-secondary etc.)
       nutzen intern rgba(var(--bs-*-rgb), var(--bs-bg-opacity)) für Opacity-
       Support. Ohne die -rgb-Varianten fallen sie auf Bootstrap-Defaults zurück
       und ignorieren unsere Aurora-Mapping via --bs-secondary-bg.
       Alle -rgb-Werte sind comma-separated R,G,B OHNE rgb()-Wrapper. */

    /* — Surface/Body RGB (für .bg-body, .bg-body-secondary, .bg-body-tertiary) — */
    --bs-body-bg-rgb:               245, 246, 250;   /* --bg #f5f6fa */
    --bs-secondary-bg-rgb:          238, 240, 249;   /* --surface-2 #eef0f9 */
    --bs-tertiary-bg-rgb:           229, 232, 244;   /* --surface-3 #e5e8f4 */

    /* — Text/Emphasis RGB — */
    --bs-body-color-rgb:            30, 27, 75;      /* --fg #1e1b4b */
    --bs-emphasis-color-rgb:        30, 27, 75;      /* --fg #1e1b4b */

    /* — Link RGB (für link-opacity-Utilities) — */
    --bs-link-color-rgb:            3, 105, 161;     /* --primary-strong #0369a1 */

    /* — Secondary RGB (für .bg-secondary, .btn-secondary etc.) — */
    --bs-secondary-rgb:             108, 117, 125;   /* Bootstrap-kompatibles neutral */

    /* — Primary — */
    --bs-primary:                   var(--primary);
    --bs-primary-rgb:               2, 132, 199;
    --bs-primary-bg-subtle:         var(--primary-tint);
    --bs-primary-border-subtle:     var(--primary-glow);
    --bs-primary-text-emphasis:     var(--primary-strong);

    /* — Success — */
    --bs-success:                   var(--success);
    --bs-success-rgb:               5, 150, 105;     /* --success #059669 */
    --bs-success-bg-subtle:         var(--success-glow);
    --bs-success-border-subtle:     var(--success-glow);
    --bs-success-text-emphasis:     var(--success-strong);

    /* — Warning — */
    --bs-warning:                   var(--warning);
    --bs-warning-rgb:               217, 119, 6;     /* --warning #d97706 */
    --bs-warning-bg-subtle:         var(--warning-glow);
    --bs-warning-border-subtle:     var(--warning-glow);
    --bs-warning-text-emphasis:     var(--warning-strong);

    /* — Danger — */
    --bs-danger:                    var(--danger);
    --bs-danger-rgb:                220, 38, 38;     /* --danger #dc2626 */
    --bs-danger-bg-subtle:          var(--danger-glow);
    --bs-danger-border-subtle:      var(--danger-glow);
    --bs-danger-text-emphasis:      var(--danger-strong);

    /* — Info (= primary) — */
    --bs-info:                      var(--primary);
    --bs-info-rgb:                  2, 132, 199;     /* same as --primary #0284c7 */
    --bs-info-bg-subtle:            var(--primary-tint);
    --bs-info-border-subtle:        var(--primary-glow);
    --bs-info-text-emphasis:        var(--primary-strong);

    /* — Secondary text-emphasis (for .text-bg-secondary, alert-secondary etc.) — */
    --bs-secondary-text-emphasis:   var(--fg-2);

    /* — Dropdown — */
    --bs-dropdown-bg:               var(--surface);
    --bs-dropdown-color:            var(--fg);
    --bs-dropdown-border-color:     var(--border);
    --bs-dropdown-link-color:       var(--fg);
    --bs-dropdown-link-hover-color: var(--fg);
    --bs-dropdown-link-hover-bg:    var(--surface-2);
    --bs-dropdown-link-active-color: var(--on-primary);
    --bs-dropdown-link-active-bg:   var(--primary-strong);
    --bs-dropdown-header-color:     var(--fg-2);
    --bs-dropdown-divider-bg:       var(--border);

    /* — Card (Bootstrap 5.3 Native-Tokens) — */
    --bs-card-bg:                   var(--surface);
    --bs-card-color:                var(--fg);
    --bs-card-border-color:         var(--border);
    --bs-card-cap-bg:               var(--surface-2);
    --bs-card-cap-color:            var(--fg);
    --bs-card-subtitle-color:       var(--fg-2);
    --bs-card-title-color:          var(--fg);

    /* — Modal — */
    --bs-modal-bg:                  var(--surface);
    --bs-modal-color:               var(--fg);
    --bs-modal-border-color:        var(--border);
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);

    /* — Offcanvas — */
    --bs-offcanvas-bg:              var(--surface);
    --bs-offcanvas-color:           var(--fg);
    --bs-offcanvas-border-color:    var(--border);

    /* — Accordion — */
    --bs-accordion-bg:              var(--surface);
    --bs-accordion-color:           var(--fg);
    --bs-accordion-border-color:    var(--border);
    --bs-accordion-btn-bg:          var(--surface);
    --bs-accordion-btn-color:       var(--fg);
    --bs-accordion-active-bg:       var(--primary-tint);
    --bs-accordion-active-color:    var(--primary-strong);

    /* — Breadcrumb — */
    --bs-breadcrumb-divider-color:  var(--fg-3);

    /* — Pagination — */
    --bs-pagination-bg:             var(--surface);
    --bs-pagination-color:          var(--primary-strong);
    --bs-pagination-border-color:   var(--border);
    --bs-pagination-hover-bg:       var(--surface-2);
    --bs-pagination-hover-color:    var(--primary-hover);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-active-bg:      var(--primary-strong);
    --bs-pagination-active-color:   var(--on-primary);
    --bs-pagination-active-border-color: var(--primary-strong);
    --bs-pagination-disabled-bg:    var(--surface);
    --bs-pagination-disabled-color: var(--fg-3);
    --bs-pagination-disabled-border-color: var(--border);

    /* — List-Group — */
    --bs-list-group-bg:             var(--surface);
    --bs-list-group-color:          var(--fg);
    --bs-list-group-border-color:   var(--border);
    --bs-list-group-action-color:   var(--fg);
    --bs-list-group-action-hover-bg: var(--surface-2);
    --bs-list-group-action-hover-color: var(--fg);
    --bs-list-group-active-bg:      var(--primary-strong);
    --bs-list-group-active-color:   var(--on-primary);
    --bs-list-group-active-border-color: var(--primary-strong);
    --bs-list-group-disabled-bg:    var(--surface);
    --bs-list-group-disabled-color: var(--fg-3);

    /* — Table — */
    --bs-table-bg:                  var(--surface);
    --bs-table-color:               var(--fg);
    --bs-table-border-color:        var(--border);
    --bs-table-striped-bg:          var(--surface-2);
    --bs-table-striped-color:       var(--fg);
    --bs-table-hover-bg:            var(--surface-3);
    --bs-table-hover-color:         var(--fg);
    --bs-table-active-bg:           var(--surface-3);
    --bs-table-active-color:        var(--fg);

    /* — Toast — */
    --bs-toast-bg:                  var(--surface);
    --bs-toast-color:               var(--fg);
    --bs-toast-border-color:        var(--border);
    --bs-toast-header-bg:           var(--surface-2);
    --bs-toast-header-color:        var(--fg);
    --bs-toast-header-border-color: var(--border);

    /* — Popover — */
    --bs-popover-bg:                var(--surface);
    --bs-popover-color:             var(--fg);
    --bs-popover-border-color:      var(--border);
    --bs-popover-header-bg:         var(--surface-2);
    --bs-popover-header-color:      var(--fg);
    --bs-popover-body-color:        var(--fg);

    /* — Tooltip — */
    --bs-tooltip-bg:                var(--fg);
    --bs-tooltip-color:             var(--surface);

    /* — Nav — (already set further below; kept here for global context) */
    --bs-nav-link-color:            var(--fg-2);
    --bs-nav-link-hover-color:      var(--primary-strong);
    --bs-nav-link-disabled-color:   var(--fg-3);
    --bs-nav-tabs-link-active-color: var(--primary-strong);
    --bs-nav-tabs-link-active-bg:   var(--surface);
    --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
    --bs-nav-tabs-border-color:     var(--border);
    --bs-nav-pills-link-active-color: var(--on-primary);
    --bs-nav-pills-link-active-bg:  var(--primary-strong);

    /* — Form — */
    --bs-form-control-bg:           var(--surface);
    --bs-form-control-color:        var(--fg);
    --bs-form-control-disabled-bg:  var(--surface-2);
    --bs-form-select-bg:            var(--surface);
    --bs-form-select-color:         var(--fg);
    --bs-form-select-disabled-bg:   var(--surface-2);
    --bs-form-check-input-bg:       var(--surface);
    --bs-form-check-input-border:   var(--border-strong);
    --bs-focus-ring-color:          var(--primary-glow);
    --bs-input-btn-focus-box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Dark-Mode-Forks: Active-Backgrounds auf helleres --primary
   (Dark: --primary ist hell auf dunkel = AAA, nicht --primary-strong) */
html[data-theme="dark"] {
    /* — Surface/Body RGB (dark values) — */
    --bs-body-bg-rgb:               10, 14, 26;      /* --bg #0a0e1a */
    --bs-secondary-bg-rgb:          30, 33, 57;      /* --surface-2 #1e2139 */
    --bs-tertiary-bg-rgb:           40, 45, 72;      /* --surface-3 #282d48 */

    /* — Text/Emphasis RGB (dark values) — */
    --bs-body-color-rgb:            233, 234, 245;   /* --fg #e9eaf5 */
    --bs-emphasis-color-rgb:        233, 234, 245;   /* --fg #e9eaf5 */

    /* — Link RGB (dark: --primary #38bdf8) — */
    --bs-link-color-rgb:            56, 189, 248;    /* --primary #38bdf8 */

    /* — Primary — */
    --bs-primary-rgb:               56, 189, 248;

    /* — Success RGB (dark: #34d399) — */
    --bs-success-rgb:               52, 211, 153;

    /* — Warning RGB (dark: #fbbf24) — */
    --bs-warning-rgb:               251, 191, 36;

    /* — Danger RGB (dark: #f87171) — */
    --bs-danger-rgb:                248, 113, 113;

    /* — Info RGB (dark: same as primary #38bdf8) — */
    --bs-info-rgb:                  56, 189, 248;

    /* — Text-emphasis vars (dark overrides) — */
    --bs-secondary-text-emphasis:   var(--fg-2);
    --bs-success-text-emphasis:     var(--success-strong);
    --bs-warning-text-emphasis:     var(--warning-strong);
    --bs-danger-text-emphasis:      var(--danger-strong);
    --bs-info-text-emphasis:        var(--primary);
    --bs-primary-text-emphasis:     var(--primary);

    /* — Active/Nav overrides — */
    --bs-link-color:                var(--primary);
    --bs-link-hover-color:          var(--primary-hover);
    --bs-dropdown-link-active-bg:   var(--primary);
    --bs-pagination-active-bg:      var(--primary);
    --bs-pagination-active-color:   var(--on-primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-list-group-active-bg:      var(--primary);
    --bs-list-group-active-border-color: var(--primary);
    --bs-nav-pills-link-active-bg:  var(--primary);
    --bs-accordion-active-color:    var(--primary);
    --bs-tooltip-bg:                var(--surface-2);
    --bs-tooltip-color:             var(--fg);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        /* — Surface/Body RGB (dark values) — */
        --bs-body-bg-rgb:               10, 14, 26;
        --bs-secondary-bg-rgb:          30, 33, 57;
        --bs-tertiary-bg-rgb:           40, 45, 72;

        /* — Text/Emphasis RGB (dark values) — */
        --bs-body-color-rgb:            233, 234, 245;
        --bs-emphasis-color-rgb:        233, 234, 245;

        /* — Link RGB (dark) — */
        --bs-link-color-rgb:            56, 189, 248;

        /* — Primary — */
        --bs-primary-rgb:               56, 189, 248;

        /* — Semantic RGB (dark) — */
        --bs-success-rgb:               52, 211, 153;
        --bs-warning-rgb:               251, 191, 36;
        --bs-danger-rgb:                248, 113, 113;
        --bs-info-rgb:                  56, 189, 248;

        /* — Text-emphasis vars (dark overrides) — */
        --bs-secondary-text-emphasis:   var(--fg-2);
        --bs-success-text-emphasis:     var(--success-strong);
        --bs-warning-text-emphasis:     var(--warning-strong);
        --bs-danger-text-emphasis:      var(--danger-strong);
        --bs-info-text-emphasis:        var(--primary);
        --bs-primary-text-emphasis:     var(--primary);

        /* — Active/Nav overrides — */
        --bs-link-color:                var(--primary);
        --bs-link-hover-color:          var(--primary-hover);
        --bs-dropdown-link-active-bg:   var(--primary);
        --bs-pagination-active-bg:      var(--primary);
        --bs-pagination-active-color:   var(--on-primary);
        --bs-pagination-active-border-color: var(--primary);
        --bs-list-group-active-bg:      var(--primary);
        --bs-list-group-active-border-color: var(--primary);
        --bs-nav-pills-link-active-bg:  var(--primary);
        --bs-accordion-active-color:    var(--primary);
        --bs-tooltip-bg:                var(--surface-2);
        --bs-tooltip-color:             var(--fg);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Base-Typography-Anwendung
   ═══════════════════════════════════════════════════════════════════ */

html {
    font-family: var(--font-sans);
    color: var(--fg);
    background: var(--bg);
}

.font-mono,
code, kbd, samp, pre {
    font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════
   Aurora v4 Extension — Welle 2/3/4 Tokens (2026-05-27)
   ═══════════════════════════════════════════════════════════════════ */

/* C.1 — Density-spezifische Padding-Tokens */
:root {
    --density-padding-x-basic:    1rem;
    --density-padding-y-basic:    0.75rem;
    --density-padding-x-standard: 0.75rem;
    --density-padding-y-standard: 0.5rem;
    --density-padding-x-expert:   0.5rem;
    --density-padding-y-expert:   0.375rem;
}

/* C.2 — Persona-Cockpit-Accent-Tokens */
:root {
    --persona-ciso:       #6d28d9;
    --persona-isb:        #0891b2;
    --persona-dpo:        #be185d;
    --persona-risk:       #c2410c;
    --persona-compliance: #15803d;
    --persona-bcm:        #b45309;
    --persona-auditor:    #525252;
    --persona-board:      #1e40af;
}
html[data-theme="dark"] {
    --persona-ciso:       #a78bfa;
    --persona-isb:        #22d3ee;
    --persona-dpo:        #f472b6;
    --persona-risk:       #fb923c;
    --persona-compliance: #4ade80;
    --persona-bcm:        #fbbf24;
    --persona-auditor:    #a3a3a3;
    --persona-board:      #60a5fa;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --persona-ciso:       #a78bfa;
        --persona-isb:        #22d3ee;
        --persona-dpo:        #f472b6;
        --persona-risk:       #fb923c;
        --persona-compliance: #4ade80;
        --persona-bcm:        #fbbf24;
        --persona-auditor:    #a3a3a3;
        --persona-board:      #60a5fa;
    }
}

/* C.3 — Coverage-Matrix Heat-Grid (5-Stufen, colorblind-safe) */
:root {
    --coverage-heat-0: #e4e4e7;
    --coverage-heat-1: #fda4af;
    --coverage-heat-2: #fde68a;
    --coverage-heat-3: #bbf7d0;
    --coverage-heat-4: #4ade80;
}
html[data-theme="dark"] {
    --coverage-heat-0: #3f3f46;
    --coverage-heat-1: #be123c;
    --coverage-heat-2: #b45309;
    --coverage-heat-3: #15803d;
    --coverage-heat-4: #22c55e;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --coverage-heat-0: #3f3f46;
        --coverage-heat-1: #be123c;
        --coverage-heat-2: #b45309;
        --coverage-heat-3: #15803d;
        --coverage-heat-4: #22c55e;
    }
}

/* C.4 — Reuse-ROI-Counter-Glow */
:root {
    --reuse-roi-glow:        0 0 24px rgba(99, 102, 241, 0.4);
    --reuse-roi-glow-strong: 0 0 32px rgba(99, 102, 241, 0.6);
}
html[data-theme="dark"] {
    --reuse-roi-glow:        0 0 32px rgba(167, 139, 250, 0.5);
    --reuse-roi-glow-strong: 0 0 48px rgba(167, 139, 250, 0.7);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --reuse-roi-glow:        0 0 32px rgba(167, 139, 250, 0.5);
        --reuse-roi-glow-strong: 0 0 48px rgba(167, 139, 250, 0.7);
    }
}

/* C.5 — Mega-Menu Tenant-Stempel-Background */
:root {
    --mega-menu-header-bg:       var(--surface-2);
    --mega-menu-header-fg:       var(--fg-2);
    --mega-menu-header-border:   var(--border);
    --mega-menu-tenant-stamp-bg: var(--primary-tint);
    --mega-menu-tenant-stamp-fg: var(--primary-strong);
}

/* C.6 — Quick-Action-Button-Shadow */
:root {
    --quick-action-shadow:       0 1px 3px rgba(0,0,0,0.1);
    --quick-action-shadow-hover: 0 4px 12px rgba(0,0,0,0.15), 0 0 16px rgba(6, 182, 212, 0.2);
}
html[data-theme="dark"] {
    --quick-action-shadow:       0 1px 3px rgba(0,0,0,0.4);
    --quick-action-shadow-hover: 0 4px 12px rgba(0,0,0,0.6), 0 0 16px rgba(34, 211, 238, 0.3);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --quick-action-shadow:       0 1px 3px rgba(0,0,0,0.4);
        --quick-action-shadow-hover: 0 4px 12px rgba(0,0,0,0.6), 0 0 16px rgba(34, 211, 238, 0.3);
    }
}

/* C.7 — Onboarding-Banner-Surface */
:root {
    --onboarding-banner-bg:     linear-gradient(135deg, var(--primary-tint), var(--accent-tint));
    --onboarding-banner-border: var(--primary);
    --onboarding-banner-glow:   0 0 32px rgba(6, 182, 212, 0.15);
}
html[data-theme="dark"] {
    --onboarding-banner-glow:   0 0 32px rgba(34, 211, 238, 0.25);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --onboarding-banner-glow:   0 0 32px rgba(34, 211, 238, 0.25);
    }
}

/* C.8 — Audit-Program-Timeline-Today-Line */
:root {
    --audit-timeline-today:        var(--accent);
    --audit-timeline-today-glow:   0 0 8px var(--accent-glow);
    --audit-timeline-overdue:      var(--danger);
    --audit-timeline-overdue-glow: 0 0 8px var(--danger-glow);
    --audit-timeline-pin-radius:   12px;
}

/* C.9 — Glossary-Tooltip-Indicator */
:root {
    --glossary-indicator-bg:    var(--primary-tint);
    --glossary-indicator-fg:    var(--primary-strong);
    --glossary-tooltip-bg:      var(--surface-3);
    --glossary-tooltip-border:  var(--border-strong);
    --glossary-tooltip-shadow:  0 8px 24px rgba(0,0,0,0.15);
}