/**
 * 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-500: #eab308; --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-200: #99f6e4; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --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);

    /* Kalenderquellen (Wartungskalender, Dashboard-Widget): Farbe je Quelle
       eines abgeleiteten Termins und ihre helle Fläche für Marken. Siehe
       OpenNIT\Maintenance\Kalenderfarben. Manuelle Termine färbt ihre
       Kategorie (im Backend pflegbar); --cal-manual gilt für Filter und
       Marken, die die Quelle als Ganzes zeigen. */
    --cal-manual:     var(--blue-700);    --cal-manual-bg:     var(--blue-50);
    --cal-ssl:        var(--red-600);     --cal-ssl-bg:        var(--red-50);
    --cal-asset:      var(--amber-600);   --cal-asset-bg:      var(--orange-50);
    --cal-contract:   var(--violet-600);  --cal-contract-bg:   var(--violet-50);
    --cal-license:    var(--emerald-600); --cal-license-bg:    var(--emerald-50);
    --cal-configlog:  var(--indigo-500);  --cal-configlog-bg:  var(--indigo-50);
    --cal-deadline:   var(--cyan-800);    --cal-deadline-bg:   var(--cyan-50);
    --cal-statuspage: var(--cyan-600);    --cal-statuspage-bg: var(--cyan-50);
    --cal-other:      var(--gray-500);    --cal-other-bg:      var(--gray-100);
    /* Dringender Termin im Dashboard-Widget überdeckt die Quellfarbe */
    --cal-urgent:     var(--red-600);     --cal-urgent-bg:     var(--red-50);

    /* 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;

    /* Steuerelemente einer Filterleiste: Suchfeld, Auswahllisten und Knöpfe
       stehen in einer Zeile und sind gleich hoch. Ein Design mit anderer
       Dichte setzt die Höhe neu. */
    --filter-control-height: 2.375rem;

    /* 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;
    /* Ziffern, die untereinander bündig stehen sollen (Kennungen, Nummern in
       Spalten); ein Design kann dafür eine eigene Schrift setzen. */
    --font-numerals: var(--font-family-mono);
    --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 – vier Stufen von der Kante einer Fläche bis zur Überlagerung.
       --shadow-lg trägt Dialoge und Menüs, die über dem Inhalt schweben. */
    --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 30px rgba(0, 0, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.08);
    /* Überlagerungen (Dialoge, Menüs) – hebt sich auch dort ab, wo ein
       Design alle Flächen flach stellt. */
    --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.10);

    /* Radien – jede Fläche im Frontend nimmt ihre Form von hier, damit ein
       Design sie an einer Stelle umstellen kann. */
    --radius-sm: 0.2rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    /* Vollrund: Marken, Zähler und Fortschrittsbalken, die als Pille lesen */
    --radius-pill: 9999px;

    /* Ü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;
}