/* Colors CSS - Professional Dark Mode Design */
/* Hochwertiges, professionelles Dark Mode Design mit optimalen Kontrasten */

:root {
    /* === MAGIC UI BRAND COLORS === */
    /* Angepasst für bessere Sichtbarkeit im Dark Mode */
    --color-primary: #ff9800;        /* Helleres Orange für Dark Mode */
    --color-primary-light: #ffb74d;  /* Light Orange */
    --color-primary-dark: #f57c00;   /* Dark Orange */
    --color-primary-glow: rgba(255, 152, 0, 0.6); /* Intensiverer Orange Glow */
    
    /* Secondary Colors (Türkis) */
    --color-secondary: #26c6da;      /* Helleres Türkis für Dark Mode */
    --color-secondary-light: #4dd0e1; /* Light Türkis */
    --color-secondary-dark: #00acc1;  /* Dark Türkis */
    --color-secondary-glow: rgba(38, 198, 218, 0.5); /* Intensiverer Türkis Glow */
    
    /* Accent Colors */
    --color-accent: #66bb6a;         /* Helleres Green für Dark Mode */
    --color-accent-light: #81c784;   /* Light Green */
    --color-accent-dark: #4caf50;    /* Dark Green */
    --color-accent-purple: #ba68c8;  /* Helleres Purple für Dark Mode */
    --color-accent-pink: #f48fb1;    /* Helleres Pink für Dark Mode */
    --color-marker: #1f89de;         /* Marker Blue für Karten-Marker */
    
    /* === DARK MODE SURFACES === */
    /* Professionelle Dark Mode Hintergründe - nicht reines Schwarz */
    --color-background: #0f1419;     /* Sehr dunkler Blaugrau-Ton (Haupthintergrund) */
    --color-background-elevated: #1a1f2e; /* Etwas hellerer Hintergrund für Elevation */
    --color-surface: #1a1f2e;        /* Dunkler Surface für Cards/Panels */
    --color-surface-glass: rgba(26, 31, 46, 0.9); /* Glassmorphism Surface */
    --color-surface-glass-hover: rgba(34, 40, 58, 0.95); /* Glass Hover */
    --color-surface-elevated: #22283a; /* Elevated Surface (noch heller) */
    --color-surface-hover: #2a3142;  /* Hover State (leicht heller) */
    --color-surface-active: #323950; /* Active State (noch heller) */
    
    /* Header/Navigation/Footer - Dark */
    --color-header-navigation-bg: #161b26; /* Dark Navigation mit leichtem Blauton */
    --color-flag-black: #000000;    /* Deutschlandfarben - Schwarz */
    --color-flag-red: #ff1744;      /* Helleres Rot für Dark Mode */
    --color-flag-gold: #ffd700;     /* Gold */
    
    /* === TEXT COLORS (Dark Mode) === */
    /* Helle Schrift für Dark Backgrounds mit optimalen Kontrasten */
    --color-text-primary: #e8eaed;   /* Sehr helle Schrift für optimale Lesbarkeit */
    --color-text-secondary: rgba(232, 234, 237, 0.85); /* Secondary Light Text */
    --color-text-tertiary: rgba(232, 234, 237, 0.65);  /* Tertiary Light Text */
    --color-text-on-primary: #ffffff; /* White Text on Orange für optimalen Kontrast */
    --color-text-on-secondary: #0f1419; /* Dark Text on Türkis */
    --color-text-on-accent: #0f1419; /* Dark Text on Green */
    --color-text-muted: rgba(232, 234, 237, 0.45);     /* Muted Text */
    
    /* === BORDER COLORS (Dark Mode) === */
    --color-border: #2d3748;         /* Deutlichere Grenzen für Dark Mode */
    --color-border-light: rgba(45, 55, 72, 0.6); /* Subtle */
    --color-border-medium: rgba(45, 55, 72, 0.9); /* Medium */
    --color-border-strong: #3d4758;  /* Strong */
    --color-border-glow: rgba(255, 152, 0, 0.6); /* Intensiverer Glowing Border */
    
    /* === STATUS COLORS === */
    /* Angepasst für optimale Sichtbarkeit im Dark Mode */
    --color-success: #42a5f5;        /* Helleres Blue für Dark Mode Success */
    --color-success-bg: rgba(66, 165, 245, 0.15); /* Success Background Dark */
    --color-warning: #ffa726;        /* Helleres Amber für Dark Mode */
    --color-warning-bg: rgba(255, 167, 38, 0.15); /* Warning Background Dark */
    --color-info: #64b5f6;           /* Helleres Blue für Dark Mode */
    --color-info-bg: rgba(100, 181, 246, 0.15); /* Info Background Dark */
    --color-error: #ef5350;          /* Helleres Red für Dark Mode */
    --color-error-dark: #e53935;     /* Dark Red */
    --color-error-bg: rgba(239, 83, 80, 0.15); /* Error Background Dark */
    
    /* === MAGIC UI EFFECTS === */
    /* Glassmorphism - Dark Mode */
    --glass-bg: rgba(26, 31, 46, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    --glass-backdrop-blur: blur(16px);
    
    /* Shimmer & Glow Effects - Dark Mode (intensiver) */
    --shimmer-color: rgba(255, 152, 0, 0.15);
    --glow-primary: 0 0 30px rgba(255, 152, 0, 0.5);
    --glow-secondary: 0 0 30px rgba(38, 198, 218, 0.5);
    --glow-accent: 0 0 30px rgba(102, 187, 106, 0.5);
    
    /* === DARK MODE SHADOWS === */
    /* Intensivere Schatten für bessere Depth im Dark Mode */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-elevated-hover: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-ambient: 0 0 80px rgba(255, 152, 0, 0.2);
    
    /* Border Radius */
    --border-radius: 16px;
    --border-radius-small: 8px;
    --border-radius-large: 24px;
    --border-radius-xl: 32px;
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    --transition-glass: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* RGB Values for rgba() usage */
    --color-primary-rgb: 255, 152, 0;
    --color-secondary-rgb: 38, 198, 218;
    --color-accent-rgb: 102, 187, 106;
    --color-error-rgb: 239, 83, 80;
    
    /* Code Block Colors */
    --color-code-bg: #1e1e1e;
    --color-code-text: #d4d4d4;
    
    /* Font Variables */
    --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
}