/**
 * Design-Tokens – einzige Quelle für Farb-, Abstands- und Layout-Variablen.
 * Wird in allen Layouts VOR app.css geladen; eigenständige Seiten ohne
 * app.css (z. B. Feedback, Vault-Freigabe, Druckansichten) binden nur
 * diese Datei ein und bleiben damit themebar.
 */

:root {
    /* ============================================================
       Farbpaletten-Tokens (einzige Quelle für Farbwerte)
       Regel: In Komponenten, Modul-CSS und Template-<style>-Blöcken
       werden Farben ausschließlich über var(--…) referenziert –
       nie als Hex-Literal. Ein Theme überschreibt nur diese Tokens.
       ============================================================ */
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --gray-950: #0b0d11;
    /* Slate ist veraltet und auf die Gray-Skala konsolidiert (Alias) – Neubau nutzt --gray-* */
    --slate-50: var(--gray-50); --slate-100: var(--gray-100); --slate-200: var(--gray-200); --slate-300: var(--gray-300); --slate-400: var(--gray-400); --slate-500: var(--gray-500); --slate-600: var(--gray-600); --slate-700: var(--gray-700); --slate-800: var(--gray-800); --slate-900: var(--gray-900);
    --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af;
    --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d;
    --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534;
    --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46;
    --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; --amber-900: #78350f;
    --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412;
    --yellow-50: #fefce8; --yellow-100: #fef9c3; --yellow-300: #fde047; --yellow-600: #ca8a04; --yellow-900: #713f12;
    --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1; --sky-800: #075985;
    --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --indigo-800: #3730a3;
    --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-800: #5b21b6;
    --purple-500: #a855f7; --purple-900: #581c87;
    --fuchsia-50: #fdf4ff; --fuchsia-100: #fae8ff; --fuchsia-600: #c026d3; --fuchsia-700: #a21caf;
    --pink-100: #fce7f3; --pink-600: #db2777; --pink-800: #9d174d;
    --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-900: #134e4a;

    /* Primärton-Abstufungen (OpenNIT-Blau) */
    --color-primary-pale: #e8f4fd;
    --color-primary-soft: #d2e9f5;
    --color-primary-strong: #2471a3;
    --color-primary-deep: #1a3a5c;

    /* Alert-/Meldungsfarben (Hintergrund, Rahmen, Text) */
    --alert-success-bg: #d4edda; --alert-success-border: #c3e6cb; --alert-success-text: #155724;
    --alert-danger-bg: #f8d7da; --alert-danger-border: #f5c6cb; --alert-danger-text: #721c24;
    --alert-warning-bg: #fff3cd; --alert-warning-border: #ffe69c; --alert-warning-text: #856404;
    --alert-info-bg: #d1ecf1; --alert-info-border: #bee5eb; --alert-info-text: #0c5460;

    /* Primärfarben (AdminLTE-Stil) */
    --color-primary: #3c8dbc;
    --color-primary-dark: #367fa9;
    --color-primary-light: #5fa8d3;
    --color-secondary: #6c757d;
    --color-success: #00a65a;
    --color-warning: #f39c12;
    --color-danger: #dd4b39;
    --color-info: #00c0ef;

    /* Dunkle Hover-Abstufungen der Statusfarben */
    --color-success-dark: #009150; --color-danger-dark: #c0392b;
    --color-warning-dark: #e67e22; --color-info-dark: #00a9d1;

    /* Bootstrap-Kompatibilität (AdminLTE-3-Basisklassen) */
    --bs-primary: #007bff; --bs-primary-light: #80bdff;
    --bs-success: #28a745; --bs-danger: #dc3545; --bs-warning: #ffc107;

    /* Grau-Palette */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: var(--color-secondary);
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    /* Text */
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-secondary);
    --color-text-light: var(--color-gray-500);
    /* Text/Icons auf farbigen Flächen (Buttons, Pills, KPI-Boxen) –
       bleibt auch in dunklen Themes hell, kippt also bewusst NICHT mit --color-bg */
    --color-on-accent: #ffffff;

    /* Hintergründe */
    --color-bg: #ffffff;
    --color-bg-alt: #f4f6f9;
    --color-bg-hover: var(--color-gray-50);

    /* Rahmen */
    --color-border: var(--color-gray-300);
    --color-border-dark: var(--color-gray-400);

    /* Sidebar */
    --sidebar-bg: var(--color-gray-800);
    --sidebar-text: #c2c7d0;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-active-bg: rgba(255, 255, 255, 0.1);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-header-bg: #2c3136;
    --sidebar-width: 250px;

    /* Navbar */
    --navbar-bg: var(--color-gray-800);
    --navbar-height: 57px;

    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Schrift */
    --font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.9375rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.375rem;
    --font-size-3xl: 1.75rem;

    /* Schatten */
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Radien */
    --radius-sm: 0.2rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    /* Übergänge */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;

    /* Layout */
    --header-height: var(--navbar-height);
    --max-content-width: 1200px;
}