/* --- 1. DESIGN VARIABLEN (THEMING ENGINE) --- */
:root {
    /* LIGHT MODE (Standard) */

    /* ═══════════════════════════════════════════════════════════
       v1.0 PRIMITIVE (Design System §2) — nie direkt in Komponenten,
       nur als Basis für semantische Tokens. Werte fix, theme-unabhängig.
       ═══════════════════════════════════════════════════════════ */

    /* ── Primitive: Indigo (Marke) ── */
    --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc;
    --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca;
    --indigo-800: #3730a3; --indigo-900: #312e81;

    /* ── Primitive: Slate (Neutral) ── */
    --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
    --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
    --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #0b1120;

    /* ── Primitive: Semantik (nur Status/Feedback) ── */
    --green-100: #dcfce7; --green-600: #16a34a; --green-700: #15803d;
    --amber-100: #fef3c7; --amber-600: #d97706; --amber-800: #92400e; /* Warning-TEXT: amber-800! */
    --red-50: #fef2f2;  --red-100: #fee2e2;  --red-600: #dc2626; --red-700: #b91c1c;
    --sky-100: #e0f2fe; --sky-600: #0284c7; --sky-700: #0369a1;

    /* ── Hintergründe ──────────────────────────── */
    --bg-app: #f8fafc;
    /* Slate-50 — Haupthintergrund */
    --bg-card: #ffffff;
    /* Weiß — Kartenhintergrund */
    --bg-hover: #f1f5f9;
    /* Slate-100 — Hover-Zustand */
    --bg-active: #e2e8f0;
    /* Slate-200 — Aktiver/ausgewählter Zustand */
    --bg-sidebar: #1e1b4b;
    /* Indigo-950 — Sidebar */
    --bg-input: #f1f5f9;
    /* Slate-100 — Input-Hintergrund */

    /* ── Text ──────────────────────────────────── */
    --text-main: #0f172a;
    /* Slate-900 — Haupttext */
    --text-muted: #64748b;
    /* Slate-500 — Sekundärtext */
    --text-light: #94a3b8;
    /* Slate-400 — Tertiärtext/Platzhalter */
    --text-on-dark: #ffffff;
    /* Text auf DAUER-dunkler Fläche (Sidebar) — in beiden Modi weiss */
    --text-on-primary: #ffffff;
    /* Text auf Primary-Button — Light: weiss · Dark: dunkel (siehe [data-theme=dark]) */

    /* ── Primärfarbe + Abstufungen ─────────────── */
    --primary: #4f46e5;
    /* Indigo-600 — Hauptfarbe */
    --primary-light: rgba(99, 102, 241, 0.10);
    /* Heller Hintergrund für Tags */
    --primary-hover: #4338ca;
    /* Indigo-700 — Hover-Zustand */
    --primary-strong: #4338ca;
    /* Indigo-700 */
    --primary-accent: #6366f1;
    /* Indigo-500 */
    --sidebar-active: rgba(99, 102, 241, 0.22);
    --tint: #eef2ff;
    --tint-strong: #e0e7ff;

    /* ── Status-Farben ─────────────────────────── */
    --success: #16a34a;
    /* Green-600 — Erfolg, Anwesend */
    --success-light: rgba(22, 163, 74, 0.07);
    /* Heller Erfolg-Hintergrund */
    --warning: #d97706;
    /* Amber-600 — Warnung, Ausstehend (Icon/Rahmen) */
    --warning-text: var(--amber-800);
    /* Amber-800 — Warnung als TEXT (§10: amber-700 zu knapp, 4,51:1) */
    --warning-light: rgba(245, 158, 11, 0.1);
    /* Heller Warn-Hintergrund */
    --danger: #b91c1c;
    /* Red-700 — Fehler, Abwesend */
    --danger-light: rgba(185, 28, 28, 0.06);
    /* Heller Fehler-Hintergrund */
    --info: #4f46e5;
    /* Indigo-600 — Hinweis, Info */
    --info-light: rgba(99, 102, 241, 0.08);
    /* Heller Info-Hintergrund */

    /* ── Rahmen & Schatten ─────────────────────── */
    --border: #e2e8f0;
    /* Slate-200 — Standard-Rahmen */
    --border-light: #f1f5f9;
    /* Slate-100 — Leichter Rahmen */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    /* Klein */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* Mittel */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* Groß */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    /* Extra Groß */

    /* ── Abstände (Spacing) ────────────────────── */
    --radius-sm: 6px;
    /* Klein — Buttons, Badges */
    --radius-md: 12px;
    /* Mittel — Buttons, Dropdowns */
    --radius-card: 14px;
    /* Karten/Container — Tier-A-Standard (14px) */
    --radius-lg: 16px;
    /* Groß — Modals/App-Fenster */

    /* ── Schrift (v1.0 §3: Inter = Default) ─────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Legibilitäts-Opt-in (§10, ADR Font): via [data-font="atkinson"] am <html> aktiviert */
    --font-family-legible: 'Atkinson Hyperlegible', 'Inter', -apple-system, sans-serif;

    /* ── Container-Breite ─────────────────────── */
    /* Daten (Listen/Tabellen/Grids/Dashboard) = voll; Formulare/Fliesstext = lesbar-schmal */
    --content-width-read: 820px;

    /* ── Sidebar ──────────────────────────────── */
    /* Werte an docs/DESIGN_SYSTEM.md §4.1 angeglichen (240px/72px), vormals 260px/70px */
    --sidebar-width: 240px;
    --sidebar-icons-width: 72px;

    /* ── Blob Farben (Pastell) ───────────────── */
    --blob-1: #e0f2fe;
    --blob-2: #f3e8ff;
    --blob-3: #f1f5f9;

    /* ── Glass Effect ─────────────────────────── */
    --glass-bg: rgba(255, 255, 255, 0.85);

    /* ── Status-Farben (erweitert) ─ */
    --kb-status-unknown: #64748b;
    --kb-status-unknown-bg: rgba(100, 116, 139, 0.10);
    --kb-status-excused: #7c3aed;
    --kb-status-excused-bg: rgba(124, 58, 237, 0.06);
    --kb-status-absent-bg: rgba(185, 28, 28, 0.06);
    --kb-status-present-bg: rgba(22, 163, 74, 0.07);

    /* ── Legacy Alias (für Abwärtskompatibilität) ─ */
    --card-bg: var(--bg-card);
    --kb-accent: var(--primary);
    --kb-accent-hover: var(--primary-hover);
    --kb-text-faint: #cbd5e1;

    /* ── Scheduler Kompatibilität ─ */
    --radius-base: 8px;
    --system-red: var(--danger);
    --system-green: var(--success);

    /* ── Benutzer-Einstellungen ─ */
    --font-size-base: 15px;

    /* ═══════════════════════════════════════════════════════════
       KOMPONENTEN-BIBLIOTHEK — Status-System (additiv, Tier-A-Werte)
       Sprechende Namen für mn-status / mn-avatar / mn-icon-box.
       Werte exakt aus den abgenommenen mockup-CSS destilliert.
       ═══════════════════════════════════════════════════════════ */

    /* ── Status: dunkle Textfarbe (Badge-Vordergrund) ─ */
    --status-present: #166534;
    /* Green-800 — anwesend */
    --status-excused: #b45309;
    /* Amber-700 — entschuldigt */
    --status-unexcused: #be123c;
    /* Rose-700 — unentschuldigt */
    --status-pending: #c2410c;
    /* Orange-700 — ausstehend */
    --status-open: #4338ca;
    /* Indigo-700 — offen */
    --status-neutral: #64748b;
    /* Slate-500 — neutral */

    /* ── Status: heller Hintergrund (Badge-bg) ─ */
    --status-present-bg: #f0fdf4;
    /* Green-50 */
    --status-excused-bg: #fffbeb;
    /* Amber-50 */
    --status-unexcused-bg: #fef2f2;
    /* Red-50 */
    --status-pending-bg: #fff7ed;
    /* Orange-50 */
    --status-open-bg: #f1f5f9;
    /* Slate-100 — offen/neutral */
    --status-neutral-bg: #f1f5f9;
    /* Slate-100 */

    /* ── Avatar-Hintergründe + Vordergrund (Status) ─ */
    --avatar-present-bg: #dcfce7;
    /* Green-100 */
    --avatar-present-fg: #166534;
    --avatar-excused-bg: #fef3c7;
    /* Amber-100 */
    --avatar-excused-fg: #b45309;
    --avatar-unexcused-bg: #ffe4e6;
    /* Rose-100 */
    --avatar-unexcused-fg: #be123c;
    --avatar-pending-bg: #ffedd5;
    /* Orange-100 */
    --avatar-pending-fg: #c2410c;
    --avatar-open-bg: #e0e7ff;
    /* Indigo-100 */
    --avatar-open-fg: #4338ca;
    --avatar-brand-bg: #eef2ff;
    /* Indigo-50 — Default-Avatar */
    --avatar-brand-fg: #4f46e5;
    /* Indigo-600 */

    /* ── Helle Status-Rahmen (für umrandete Chips/Badges) ─ */
    --border-success: #dcfce7;
    /* Green-100 */
    --border-warning: #fde68a;
    /* Amber-200 */
    --border-danger: #fecdd3;
    /* Rose-200 */

    /* ── Status-Hintergründe (semantisch, für mn-* Chips) ─
       Eigene helle bg-Pendants zu --success/--warning/--danger. */
    --success-bg: #f0fdf4;
    /* Green-50 */
    --warning-bg: #fffbeb;
    /* Amber-50 */
    --danger-bg: #fef2f2;
    /* Red-50 */

    /* ═══════════════════════════════════════════════════════════
       v1.0 SEMANTIK-ALIAS (Design System §2) — neue Namen für neuen
       Code. Zeigen auf die themed Alt-Tokens → erben Dark-Overrides
       automatisch. Alt-Namen bleiben vollständig gültig.
       ═══════════════════════════════════════════════════════════ */
    --bg-canvas: var(--bg-app);
    --bg-surface: var(--bg-card);
    --bg-surface-alt: var(--bg-hover);
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --text-tertiary: var(--text-light);
    --border-strong: var(--slate-300);

    /* ── v1.1 Token-Lücken (UX-016 / UX-014) — Ziel-Tokens aus manus-shell-v11 ──
       Bisher fehlend; Shell v1.1 referenziert sie. Light-Werte hier, Dark in
       [data-theme="dark"]. Werte exakt aus dem Klick-Mockup / DESIGN_SYSTEM §2. */
    --bg-overlay: #FFFFFF;
    --primary-tint: var(--indigo-50);
    --primary-tint-border: var(--indigo-200);
    --state-hover: rgba(15, 23, 42, .05);
    --state-active: rgba(15, 23, 42, .09);
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-2: 0 8px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
}

/* Light-Theme explizit (§2: Umschaltung nur über data-theme).
   :root traegt die Light-Werte weiterhin als Fallback — dieser Block
   ist die v1.0-konforme, explizite Deklaration und bleibt wertgleich. */
[data-theme="light"] {
    --text-on-primary: #ffffff;
    --border-strong: var(--slate-300);
}

/* ── Dark Mode Overrides ─ */
[data-theme="dark"] {
    --bg-app: #0f172a;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --bg-active: #475569;
    --bg-input: #1e293b;
    --bg-sidebar: #020617;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    --border: #334155;
    --border-light: #1e293b;
    --glass-bg: rgba(15, 23, 42, 0.85);
    --blob-1: #1e3a5f;
    --blob-2: #2d1b69;
    --blob-3: #1e293b;
    --card-bg: var(--bg-card);
    /* §2.1 R2: Ruheflächen trennen im Dark über Rahmen, nicht über Schatten —
       Schatten sind auf dunklem Grund ohnehin kaum sichtbar. Nur erhöhte
       Ebenen/Overlays (--shadow-md/lg/xl) behalten einen Schatten. */
    --shadow-sm: none;
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);

    /* ── v1.0 Dark-Vervollständigung (§2) ──────────────────────
       Marke heller, damit Kontrast auf dunklem Grund stimmt. ── */
    --primary: var(--indigo-400);          /* #818cf8 statt indigo-600 */
    --primary-hover: var(--indigo-300);
    --primary-strong: var(--indigo-300);
    --primary-accent: var(--indigo-300);
    --primary-light: rgba(129, 140, 248, 0.14);
    --tint: #1d2550;
    --tint-strong: #313e72;
    --sidebar-active: rgba(129, 140, 248, 0.24);
    --info: var(--indigo-400);
    --info-light: rgba(129, 140, 248, 0.12);
    --border-strong: #33406b;

    /* ── v1.1 Token-Lücken — Dark-Werte (UX-016 / UX-014) ── */
    --bg-overlay: #222C4A;
    --primary-tint: #1D2550;
    --primary-tint-border: #313E72;
    --state-hover: rgba(255, 255, 255, .06);
    --state-active: rgba(255, 255, 255, .10);
    --shadow-1: none;
    --shadow-2: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);

    /* KRITISCH (§2/Anti-Pattern #6): Text auf Primary im Dark DUNKEL —
       Weiss auf indigo-400 = 2,98:1 = WCAG-Fail. */
    --text-on-primary: var(--slate-950);
    --warning-text: #fbbf6b;               /* helles Amber als Text auf Dunkel */

    /* ── Status-Badges: transparente Flaechen statt Pastell (§2) ──
       Nur dedizierte Badge-Tokens — Solid-Status-Farben unangetastet. */
    --status-present: #6ee7a0;   --status-present-bg: rgba(22, 163, 74, 0.18);
    --status-excused: #fbbf6b;   --status-excused-bg: rgba(217, 119, 6, 0.18);
    --status-unexcused: #fca5a5; --status-unexcused-bg: rgba(220, 38, 38, 0.20);
    --status-pending: #fbbf6b;   --status-pending-bg: rgba(217, 119, 6, 0.18);
    --status-open: #a5b4fc;      --status-open-bg: rgba(99, 102, 241, 0.20);
    --status-neutral: #94a3b8;   --status-neutral-bg: rgba(100, 116, 139, 0.20);

    --avatar-present-bg: rgba(22, 163, 74, 0.18);  --avatar-present-fg: #6ee7a0;
    --avatar-excused-bg: rgba(217, 119, 6, 0.18);  --avatar-excused-fg: #fbbf6b;
    --avatar-unexcused-bg: rgba(220, 38, 38, 0.20);--avatar-unexcused-fg: #fca5a5;
    --avatar-pending-bg: rgba(217, 119, 6, 0.18);  --avatar-pending-fg: #fbbf6b;
    --avatar-open-bg: rgba(99, 102, 241, 0.20);    --avatar-open-fg: #a5b4fc;
    --avatar-brand-bg: rgba(99, 102, 241, 0.20);   --avatar-brand-fg: #a5b4fc;

    --success-bg: rgba(22, 163, 74, 0.18);
    --warning-bg: rgba(217, 119, 6, 0.18);
    --danger-bg: rgba(220, 38, 38, 0.20);
    --border-success: rgba(22, 163, 74, 0.30);
    --border-warning: rgba(217, 119, 6, 0.30);
    --border-danger: rgba(220, 38, 38, 0.30);

    --kb-status-unknown-bg: rgba(100, 116, 139, 0.20);
    --kb-status-excused-bg: rgba(124, 58, 237, 0.22);
    --kb-status-absent-bg: rgba(220, 38, 38, 0.18);
    --kb-status-present-bg: rgba(22, 163, 74, 0.18);
}

/* Legibilitaets-Schrift als Opt-in (§10, ADR Font) — via data-font am <html>.
   Rein Barrierefreiheit, kein Aesthetik-Setting. Default bleibt Inter. */
[data-font="atkinson"] {
    --font-family: var(--font-family-legible);
}