/* =========================================================================
   OC Manager – Design Tokens
   Pfad in Flask-App:  app/static/css/tokens.css
   Lade-Reihenfolge:   tokens.css  →  base.css  →  components.css
   ========================================================================= */

:root {
    /* ---------- Brand ---------- */
    --color-brand-purple:        #411263;
    --color-brand-purple-hover:  #2D0D45;
    --color-brand-purple-soft:   #F4F0F8;
    --color-brand-cyan:          #40C4D9;
    --color-brand-cyan-hover:    #2FA9BC;
    --color-brand-cyan-soft:     #E8F8FA;

    /* ---------- Neutrals (cool gray) ---------- */
    --color-bg:                  #F7F8FA;   /* page bg */
    --color-surface:             #FFFFFF;   /* cards, tables, modals */
    --color-surface-muted:       #FAFBFC;   /* table head, ruhige Flaechen */
    --color-hover:               #ECEFF3;   /* Hover-Feedback (klar spuerbar, getrennt von surface-muted) */
    --color-border:              #E6E8EC;
    --color-border-strong:       #D5D8DE;
    --color-divider:             #EEF0F3;

    /* Sichtbarer Fokus-Ring (Tastatur, WCAG 2.4.7/1.4.11) — dunkles Teal, >=4.5:1 auf hellem Grund */
    --color-focus-ring:          #0E7C90;

    --color-text:                #1A1D24;
    --color-text-muted:          #5B6374;
    --color-text-subtle:         #677084;   /* AA-fest auf hell (war #8A92A3 = 2.9:1 -> jetzt 4.7:1) */
    --color-text-inverse:        #FFFFFF;

    /* ---------- Links / interaktive Textfarbe ----------
       Getrennt von --color-brand-purple, damit Dark Mode helle Linkfarbe
       nutzen kann, ohne die lila Füllflächen (Buttons/Avatare) zu verändern. */
    --color-link:                var(--color-brand-purple);
    --color-link-hover:          var(--color-brand-purple-hover);

    /* ---------- Semantic ---------- */
    --color-success:             #10915A;
    --color-success-soft:        #E6F4EC;
    --color-warning:             #B7791F;
    --color-warning-soft:        #FBF3E1;
    --color-danger:              #C2362B;
    --color-danger-soft:         #FBEAE8;
    --color-info:                #2563EB;
    --color-info-soft:           #E8EFFE;

    /* ---------- Typography ---------- */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:    12px;
    --text-sm:    13px;
    --text-base:  14px;
    --text-md:    15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   26px;
    --text-3xl:   32px;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    /* ---------- Spacing (4 px scale) ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  56px;
    --space-10: 72px;

    /* ---------- Radius ---------- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-pill: 999px;

    /* ---------- Shadow (very subtle) ---------- */
    --shadow-xs: 0 1px 2px rgba(15, 22, 36, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 22, 36, 0.06), 0 1px 2px rgba(15, 22, 36, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 22, 36, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 22, 36, 0.12);
    --shadow-modal: 0 24px 48px rgba(15, 22, 36, 0.18);

    /* ---------- Layout ---------- */
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --content-max:   1600px;
    --container-pad: 32px;

    /* ---------- Motion ---------- */
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --duration-1: 100ms;
    --duration-2: 160ms;
    --duration-3: 240ms;

    /* ---------- Z-Index ---------- */
    --z-sidebar:  100;
    --z-topbar:   200;
    --z-dropdown: 800;
    --z-modal:    1000;
    --z-toast:    1100;

    /* ---------- Legacy aliases (Phase-6-Cleanup, NICHT in neuen Templates verwenden) ---------- */
    --bw-primary:      var(--color-brand-purple);
    --bw-primary-dark: var(--color-brand-purple-hover);
    --bw-accent:       #B891F1;
    --bw-cyan:         var(--color-brand-cyan);
    --bw-white:        var(--color-surface);
    --bw-gray-50:      #F8F9FA;
    --bw-gray-100:     #F1F3F5;
    --bw-gray-200:     #E9ECEF;
    --bw-gray-300:     #DEE2E6;
    --bw-gray-400:     #CED4DA;
    --bw-gray-500:     #ADB5BD;
    --bw-gray-600:     var(--color-text-muted);
    --bw-gray-700:     #495057;
    --bw-gray-800:     #343A40;
}

/* =========================================================================
   DARK MODE  —  aktiviert über <html data-theme="dark">.
   Überschreibt ausschließlich Farb-Tokens; dadurch kippt die gesamte App
   automatisch mit (Body, Sidebar, Topbar, Karten, Tabellen, Modals, Badges …).
   Absichtlich dunkle Komponenten (Terminal-/Log-Ausgabe, Login-Hero-Verlauf)
   bleiben dunkel. Werte sind auf WCAG-AA-Lesbarkeit abgestimmt.
   ========================================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    /* Brand: Lila bleibt FÜLLfarbe (weißer Text darauf lesbar); Cyan etwas heller */
    --color-brand-purple:        #6F51C7;
    --color-brand-purple-hover:  #5C40B0;
    --color-brand-purple-soft:   #241A38;
    --color-brand-cyan:          #45CEE3;
    --color-brand-cyan-hover:    #79DEEE;
    --color-brand-cyan-soft:     #11313A;

    /* Link-/interaktive Textfarbe: helles Violett für Kontrast auf Dunkel */
    --color-link:                #B9A3F5;
    --color-link-hover:          #CFC0FA;

    /* Neutrals: dunkles, leicht bläuliches Grau (kein reines Schwarz) */
    --color-bg:                  #0F1216;
    --color-surface:             #161A21;
    --color-surface-muted:       #1D222B;
    --color-hover:               #2A323E;   /* Hover deutlich heller als surface (Delta 1.35) — im Dark Mode klar sichtbar */
    --color-border:              #2A313C;
    --color-border-strong:       #3C4654;
    --color-divider:             #222932;

    /* Fokus-Ring: helles Cyan, ~10:1 auf dunklem Grund (war cyan-soft = 1.27:1, unsichtbar) */
    --color-focus-ring:          #5BD2E6;

    --color-text:                #E7EAF0;
    --color-text-muted:          #A8B0BE;
    --color-text-subtle:         #7B8493;
    --color-text-inverse:        #0F1216;

    /* Semantic: Text heller, Soft-Hintergründe dunkel getönt */
    --color-success:             #45C97F;
    --color-success-soft:        #11271B;
    --color-warning:             #E6AE43;
    --color-warning-soft:        #2C2410;
    --color-danger:              #F18A80;
    --color-danger-soft:         #2F1714;
    --color-info:                #6AA6FF;
    --color-info-soft:           #15233D;

    /* Schatten kräftiger (auf Dunkel sonst unsichtbar) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.70);

    /* Legacy-Grau-Aliase auf Dunkel mappen (falls noch irgendwo referenziert) */
    --bw-accent:   #B9A3F5;
    --bw-gray-50:  #1D222B;
    --bw-gray-100: #222932;
    --bw-gray-200: #2A313C;
    --bw-gray-300: #3C4654;
    --bw-gray-400: #4C5666;
    --bw-gray-500: #6C7582;
    --bw-gray-700: #C9CFD9;
    --bw-gray-800: #E7EAF0;
}