/**
 * 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; --blue-900: #1e3a8a;
    --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-400: #f87171; --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; --green-900: #14532d;
    --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7; --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --emerald-900: #064e3b;
    --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-400: #fb923c; --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12;
    --yellow-50: #fefce8; --yellow-100: #fef9c3; --yellow-200: #fef08a; --yellow-300: #fde047; --yellow-600: #ca8a04; --yellow-800: #854d0e; --yellow-900: #713f12;
    --lime-500: #84cc16;
    --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1; --sky-800: #075985; --sky-900: #0c4a6e;
    --cyan-50: #ecfeff; --cyan-200: #a5f3fc; --cyan-500: #06b6d4; --cyan-600: #0891b2; --cyan-800: #155e75;
    --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --indigo-800: #3730a3; --indigo-900: #312e81;
    --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-800: #5b21b6;
    --purple-50: #faf5ff; --purple-200: #e9d5ff; --purple-500: #a855f7; --purple-600: #9333ea; --purple-900: #581c87;
    --fuchsia-50: #fdf4ff; --fuchsia-100: #fae8ff; --fuchsia-600: #c026d3; --fuchsia-700: #a21caf;
    --pink-100: #fce7f3; --pink-200: #fbcfe8; --pink-600: #db2777; --pink-800: #9d174d;
    --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --teal-900: #134e4a;

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

    /* Alert-/Meldungsfarben (Hintergrund, Rahmen, Text) */
    --alert-primary-bg: #cce5ff; --alert-primary-text: #004085;
    --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;

    /* Weiche Tönungen für Badges/Kategorien (Flat-Palette: Hintergrund, Rahmen, Text) */
    --tint-blue-text: #1a5276; --tint-blue-strong: #1a56a0;
    --tint-green-bg: #e3f6e9; --tint-green-border: #b7e2c4; --tint-green-text: #1b6e36;
    --tint-green-soft-bg: #eafaf1; --tint-green-pale-bg: #e8f8f5; --tint-green-deep-text: #1e8449;
    --tint-amber-bg: #fdf1d6; --tint-amber-border: #f3dca0; --tint-amber-text: #8a6116;
    --tint-yellow-bg: #fef9e7; --tint-yellow-text: #7d6608;
    --tint-orange-bg: #fde8d0; --tint-orange-text: #7b3a10;
    --tint-red-bg: #fdecea; --tint-red-border: #f5c2bd; --tint-red-text: #a02622;
    --tint-red-soft-bg: #fdf3f2; --tint-red-pale-bg: #fdedec; --tint-red-deep-text: #922b21;
    --tint-purple-bg: #e2d9f3; --tint-purple-text: #4a235a;
    --tint-purple-soft-bg: #f4ecf7; --tint-purple-deep-text: #6c3483;

    /* Personenfarben: feste Zuordnung je Benutzerkennung (siehe
       OpenNIT\Core\AuthorColor). Die Reihenfolge ist so gewaehlt, dass
       benachbarte Kennungen sichtbar auseinanderliegen. Jede Farbe hat eine
       helle Flaeche fuer Kuerzel und Rand. */
    --author-1:  var(--blue-600);    --author-1-soft:  var(--blue-100);
    --author-2:  var(--emerald-600); --author-2-soft:  var(--emerald-100);
    --author-3:  var(--amber-600);   --author-3-soft:  var(--amber-100);
    --author-4:  var(--purple-600);  --author-4-soft:  var(--purple-200);
    --author-5:  var(--pink-600);    --author-5-soft:  var(--pink-100);
    --author-6:  var(--teal-600);    --author-6-soft:  var(--teal-100);
    --author-7:  var(--indigo-600);  --author-7-soft:  var(--indigo-100);
    --author-8:  var(--red-600);     --author-8-soft:  var(--red-100);
    --author-9:  var(--cyan-600);    --author-9-soft:  var(--cyan-200);
    --author-10: var(--green-700);   --author-10-soft: var(--green-100);
    --author-11: var(--orange-600);  --author-11-soft: var(--orange-100);
    --author-12: var(--gray-600);    --author-12-soft: var(--gray-200);

    /* Dunkler Code-Block (Syntax-Anzeige in API-/Lizenz-Ansichten) */
    --code-dark-bg: #1e1e2e; --code-dark-text: #cdd6f4; --code-dark-cyan: #89dceb;
    --code-dark-green: #a6e3a1; --code-dark-muted: #6c7086;

    /* Primärfarben (AdminLTE-Stil) */
    --color-primary: #3c8dbc;
    /* RGB-Komponenten des Primärtons für halbtransparente Auflagen
       (rgba(var(--color-primary-rgb), …)) – bei Theme-Wechsel mit überschreiben */
    --color-primary-rgb: 60, 141, 188;
    --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;
    --color-secondary-dark: #5a6268;

    /* Bootstrap-Kompatibilität (AdminLTE-3-Basisklassen) */
    --bs-primary: #007bff; --bs-primary-light: #80bdff;
    --bs-success: #28a745; --bs-success-dark: #1e7e34; --bs-danger: #dc3545; --bs-warning: #ffc107;
    --bs-info: #17a2b8; --bs-teal: #20c997; --bs-orange: #fd7e14;
    --bs-indigo: #6610f2; --bs-purple: #6f42c1;

    /* 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;
    /* RGB-Komponenten von Weiß für halbtransparente Auflagen (rgba(var(--white-rgb), …)) */
    --white-rgb: 255, 255, 255;
    --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;

    /* Tastaturfokus – ein Ring, der auf hellem wie auf farbigem Grund trägt.
       Die zweite Farbe liegt als Schatten darunter und hebt den Ring von
       einer Fläche ab, die zufällig dieselbe Farbe hat wie er. */
    --focus-ring-color: #1a3a5c;
    --focus-ring-contrast: #ffffff;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

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