/* ============================================
   CSS Variablen - Omnia Design System
   Light & Dark Mode mit korrekten Kontrasten
   Basierend auf LAYOUT_DESIGN_SYSTEM.md
   ============================================ */

/* ===== GEMEINSAME VARIABLEN ===== */
:root {
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* Section Padding - Einheitliche Abstände */
  --section-padding: var(--space-6);
  --section-padding-mobile: var(--space-5);
  --container-padding: var(--space-4);
  --container-max-width: 1900px;
  
  /* Einheitliche Abstände für alle Abschnitte */
  --section-gap: var(--space-6);
  --element-gap: var(--space-4);
  --content-gap: var(--space-4);
  
  /* Typography */
  --font-family: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Cascadia Code', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.375rem;
  --font-size-3xl: 1.625rem;
  --font-size-4xl: 1.875rem;
  --font-size-5xl: 2.25rem;
  --font-size-6xl: 2.75rem;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Border Radius - Reduziert für professionelles Software-Design */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-full: 50%; /* Nur quadratische Elemente (Avatar, Spinner, Icon-Kreis) */
  --radius-pill: 9999px; /* Kapseln: Fortschrittsbalken, lange Pills */
  --card-radius: 4px;
  --card-radius-mobile: 4px;
  --button-radius: 4px;
  --badge-radius: 4px;
  
  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --sidebar-width: 252px;
  --sidebar-width-laptop: 232px;
  --sidebar-width-collapsed: 52px;
  --sidebar-logo-max-height: 50px;
  --topbar-height: 64px;
  --content-padding: var(--space-5);
  
  /* Sidebar Animations */
  --sidebar-item-hover-translate: 2px;
  
  /* Grössen */
  --size-button-height: 36px;
  --size-avatar: 24px;
  --size-avatar-menu: 36px;
  --size-nav-icon: 18px;
  
  /* Borders */
  --border-width: 1px;
  --border-style: solid;
  
  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-modal-over-sidepanel: 1060;
  --z-modal-file-preview: 1100;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1200;
  
  /* Card Padding */
  --card-padding: 20px;
  --card-padding-mobile: 16px;
  --card-padding-small: 14px;
  
  /* Kompatibilitäts-Aliase */
  --text-secondary: var(--text-light);
  --bg-primary: var(--bg);
  
  /* Responsive Breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1920px;
}

/* ===== LIGHT MODE (Default) ===== */
:root,
[data-theme="light"],
html[data-theme="light"],
html[data-theme="light"] body {
  /* Hintergrund */
  --bg: #f8f9fa;
  --panel: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-hover: #e2e8f0;
  --bg-active: #cbd5e1;
  
  /* Primärfarbe (Dunkelblau) */
  --primary: #1a4a7a;
  --primary-rgb: 26, 74, 122;
  --primary-600: #2c5282;
  --primary-700: #2a4365;
  --primary-hover: #0f3a5f;
  --primary-light: rgba(26, 74, 122, 0.15);
  
  /* Akzentfarbe (Helles Blau) */
  --accent: #3182ce;
  --accent-light: #63b3ed;
  --accent-lighter: rgba(49, 130, 206, 0.1);
  
  /* Text - mit korrekten Kontrasten (WCAG AA) */
  --text: #2d3748; /* Kontrast 12.6:1 auf weiss */
  --text-light: #718096; /* Kontrast 4.5:1 auf weiss */
  --text-muted: #a0aec0; /* Kontrast 2.8:1 auf weiss (für sekundären Text) */
  --text-inverse: #ffffff;
  
  /* Status-Farben */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #3182ce;
  
  /* Borders */
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --border-dark: #cbd5e1;
  
  /* Header Background */
  --header-bg: rgba(49, 130, 206, 0.3);
  
  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --card-shadow-large: 0 20px 60px rgba(0, 0, 0, 0.15);
  --button-shadow: 0 4px 12px rgba(44, 82, 130, 0.35);
}

/* ===== DARK MODE ===== */
[data-theme="dark"],
html[data-theme="dark"],
html[data-theme="dark"] body {
  /* Hintergrund - Dunkel mit korrekten Kontrasten */
  --bg: #0f1624;
  --panel: #1a2332;
  --bg-secondary: #1a2332;
  --bg-tertiary: #252f3f;
  --bg-hover: #2d3748;
  --bg-active: #374151;
  
  /* Primärfarbe - Heller für Dark Mode */
  --primary: #63b3ed; /* Kontrast 4.8:1 auf dunklem Hintergrund */
  --primary-rgb: 99, 179, 237;
  --primary-600: #90cdf4;
  --primary-700: #3182ce;
  --primary-hover: #90cdf4;
  --primary-light: rgba(99, 179, 237, 0.2);
  
  /* Akzentfarbe */
  --accent: #90cdf4;
  --accent-light: #bee3f8;
  --accent-lighter: rgba(144, 205, 244, 0.15);
  
  /* Text - Hell für Dark Mode mit korrekten Kontrasten */
  --text: #e2e8f0; /* Kontrast 12.6:1 auf dunklem Hintergrund */
  --text-light: #94a3b8; /* Kontrast 5.2:1 auf dunklem Hintergrund */
  --text-muted: #64748b; /* Kontrast 3.8:1 auf dunklem Hintergrund */
  --text-inverse: #0f1624;
  
  /* Status-Farben - Heller für Dark Mode */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #ef4444;
  --info: #60a5fa;
  
  /* Borders */
  --border: rgba(148, 163, 184, 0.2);
  --border-light: rgba(148, 163, 184, 0.1);
  --border-dark: rgba(148, 163, 184, 0.3);
  
  /* Header Background */
  --header-bg: rgba(99, 179, 237, 0.2);
  
  /* Schatten - Stärker für Dark Mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.8);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
  --card-shadow-large: 0 20px 60px rgba(0, 0, 0, 0.6);
  --button-shadow: 0 4px 12px rgba(99, 179, 237, 0.4);
}