/**
 * PaperOffice AI - CSS Variablen für Light & Dark Mode
 * =====================================================
 * Diese Datei definiert alle Farbvariablen für beide Themes.
 * 
 * Verwendung: var(--po-bg-primary)
 * Theme-Switch: html.dark-side oder [data-theme="dark"]
 * 
 * Erstellt: Dezember 2024
 * Palantir-inspiriertes Dark Theme
 */

/* ============================================
   LIGHT MODE (Default)
   ============================================ */
:root {
    /* Hintergründe */
    --po-bg-primary: #f8f9fa;           /* Haupthintergrund */
    --po-bg-secondary: #ffffff;          /* Karten, Panels */
    --po-bg-tertiary: #f1f3f5;           /* Tertiärer Hintergrund */
    --po-bg-elevated: #ffffff;           /* Erhöhte Elemente */
    --po-bg-sidebar: #EBEFF4;            /* Sidebar Hintergrund */
    --po-bg-input: #ffffff;              /* Input Felder */
    --po-bg-hover: #e9ecef;              /* Hover States */
    --po-bg-active: #E6F2FA;             /* Aktive/Selektierte Elemente */
    --po-bg-selected: #CDE6F7;           /* Selektiert */
    
    /* Texte */
    --po-text-primary: #1f2937;          /* Haupttext */
    --po-text-secondary: #495057;        /* Sekundärer Text */
    --po-text-muted: #6b7280;            /* Gedämpfter Text */
    --po-text-light: #9ca3af;            /* Heller Text */
    --po-text-inverse: #ffffff;          /* Text auf dunklem Hintergrund */
    
    /* Rahmen */
    --po-border: #e5e7eb;                /* Standard Rahmen */
    --po-border-light: #f3f4f6;          /* Heller Rahmen */
    --po-border-dark: #d1d5db;           /* Dunkler Rahmen */
    --po-border-focus: #5B9BD5;          /* Focus Rahmen */
    
    /* Akzentfarben (bleiben in beiden Themes gleich) */
    --po-accent: #5B9BD5;                /* PaperOffice Blau */
    --po-accent-dark: #4178BE;           /* Dunkleres Blau */
    --po-accent-light: #7ab3e0;          /* Helleres Blau */
    --po-accent-soft: rgba(91, 155, 213, 0.1);  /* Subtiler Hintergrund */
    
    /* Status Farben */
    --po-success: #10b981;
    --po-success-bg: rgba(16, 185, 129, 0.1);
    --po-warning: #f59e0b;
    --po-warning-bg: rgba(245, 158, 11, 0.1);
    --po-danger: #ef4444;
    --po-danger-bg: rgba(239, 68, 68, 0.1);
    --po-info: #3b82f6;
    --po-info-bg: rgba(59, 130, 246, 0.1);
    
    /* Schatten */
    --po-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --po-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --po-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --po-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Spezifische UI Elemente */
    --po-window-bg: #FBFBFB;
    --po-dialog-bg: linear-gradient(315deg, #ECF0F5 26.8%, #FFFFFF 64%);
    --po-ribbon-bg: #FBFBFB;
    --po-ribbon-tab-bg: #E7EAED;
    --po-scrollbar-size: 10px;
    --po-scrollbar-thumb: #C4C7C5;
    --po-scrollbar-thumb-hover: #9AA5B1;
    --po-scrollbar-track: #EBEFF4;
    --po-scrollbar-corner: #EBEFF4;
    
    /* Icon Farben */
    --po-icon-default: #647687;
    --po-icon-active: #5B9BD5;
    
    /* Overlays */
    --po-overlay: rgba(0, 0, 0, 0.5);
    --po-overlay-light: rgba(0, 0, 0, 0.3);
}

/* ============================================
   DARK MODE (Palantir-inspiriert)
   ============================================ */
html.dark-side,
[data-theme="dark"] {
    /* Hintergründe - Dunkle Grautöne wie Palantir */
    --po-bg-primary: #1a1d21;            /* Haupthintergrund - sehr dunkel */
    --po-bg-secondary: #22262b;          /* Karten, Panels */
    --po-bg-tertiary: #2d3239;           /* Tertiärer Hintergrund */
    --po-bg-elevated: #363b42;           /* Erhöhte Elemente */
    --po-bg-sidebar: #1e2227;            /* Sidebar Hintergrund */
    --po-bg-input: #2d3239;              /* Input Felder */
    --po-bg-hover: #3a4049;              /* Hover States */
    --po-bg-active: #3d4450;             /* Aktive/Selektierte Elemente */
    --po-bg-selected: #4a5568;           /* Selektiert */
    
    /* Texte - Hell auf Dunkel */
    --po-text-primary: #e6e8eb;          /* Haupttext - fast weiß */
    --po-text-secondary: #b0b7bf;        /* Sekundärer Text */
    --po-text-muted: #8b949e;            /* Gedämpfter Text */
    --po-text-light: #6e7681;            /* Heller Text */
    --po-text-inverse: #1a1d21;          /* Text auf hellem Hintergrund */
    
    /* Rahmen - Subtile dunkle Linien */
    --po-border: #3a3f47;                /* Standard Rahmen */
    --po-border-light: #2d3239;          /* Heller Rahmen */
    --po-border-dark: #4a5058;           /* Dunkler Rahmen */
    --po-border-focus: #5B9BD5;          /* Focus Rahmen (bleibt gleich) */
    
    /* Akzentfarben (bleiben identisch für Konsistenz) */
    --po-accent: #5B9BD5;
    --po-accent-dark: #4178BE;
    --po-accent-light: #7ab3e0;
    --po-accent-soft: rgba(91, 155, 213, 0.15);
    
    /* Status Farben - Leicht angepasst für Dark Mode */
    --po-success: #34d399;
    --po-success-bg: rgba(52, 211, 153, 0.15);
    --po-warning: #fbbf24;
    --po-warning-bg: rgba(251, 191, 36, 0.15);
    --po-danger: #f87171;
    --po-danger-bg: rgba(248, 113, 113, 0.15);
    --po-info: #60a5fa;
    --po-info-bg: rgba(96, 165, 250, 0.15);
    
    /* Schatten - Stärker im Dark Mode */
    --po-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --po-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --po-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --po-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    /* Spezifische UI Elemente */
    --po-window-bg: #22262b;
    --po-dialog-bg: linear-gradient(315deg, #1e2227 26.8%, #2d3239 64%);
    --po-ribbon-bg: #22262b;
    --po-ribbon-tab-bg: #2d3239;
    --po-scrollbar-size: 10px;
    --po-scrollbar-thumb: rgba(91, 155, 213, 0.55);
    --po-scrollbar-thumb-hover: #7ab3e0;
    --po-scrollbar-track: #1e293b;
    --po-scrollbar-corner: #1e293b;
    
    /* Icon Farben */
    --po-icon-default: #9ca3af;
    --po-icon-active: #7ab3e0;
    
    /* Overlays */
    --po-overlay: rgba(0, 0, 0, 0.7);
    --po-overlay-light: rgba(0, 0, 0, 0.5);
    
    /* Browser Color Scheme */
    color-scheme: dark;
}

/* ============================================
   THEME TRANSITION
   ============================================ */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark-side *,
[data-theme="dark"] * {
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Disable transition on page load to prevent flash */
html.no-transition,
html.no-transition * {
    transition: none !important;
}