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

:root {
    /* === MAGIC UI BRAND COLORS === */
    /* Angepasst für bessere Sichtbarkeit im Light Mode */
    --color-primary: #f57c00;        /* Dunkleres Orange für Light Mode */
    --color-primary-light: #ff9800;  /* Light Orange */
    --color-primary-dark: #e65100;   /* Dark Orange */
    --color-primary-glow: rgba(245, 124, 0, 0.4); /* Subtilerer Orange Glow */
    
    /* Secondary Colors (Türkis) */
    --color-secondary: #00acc1;      /* Dunkleres Türkis für Light Mode */
    --color-secondary-light: #26c6da; /* Light Türkis */
    --color-secondary-dark: #00838f;  /* Dark Türkis */
    --color-secondary-glow: rgba(0, 172, 193, 0.3); /* Subtilerer Türkis Glow */
    
    /* Accent Colors */
    --color-accent: #4caf50;         /* Dunkleres Green für Light Mode */
    --color-accent-light: #66bb6a;  /* Light Green */
    --color-accent-dark: #388e3c;   /* Dark Green */
    --color-accent-purple: #9c27b0; /* Dunkleres Purple für Light Mode */
    --color-accent-pink: #e91e63;   /* Dunkleres Pink für Light Mode */
    --color-marker: #1f89de;         /* Marker Blue für Karten-Marker */
    
    /* === LIGHT MODE SURFACES === */
    /* Professionelle Light Mode Hintergründe - nicht reines Weiß */
    --color-background: #f5f7fa;     /* Sehr heller Blaugrau-Ton (Haupthintergrund) */
    --color-background-elevated: #ffffff; /* Weißer Hintergrund für Elevation */
    --color-surface: #ffffff;        /* Weißer Surface für Cards/Panels */
    --color-surface-glass: rgba(255, 255, 255, 0.9); /* Glassmorphism Surface */
    --color-surface-glass-hover: rgba(255, 255, 255, 0.95); /* Glass Hover */
    --color-surface-elevated: #fafbfc; /* Elevated Surface (leicht grau) */
    --color-surface-hover: #f0f2f5;  /* Hover State (leicht dunkler) */
    --color-surface-active: #e8ebef; /* Active State (noch dunkler) */
    
    /* Header/Navigation/Footer - Light */
    --color-header-navigation-bg: #ffffff; /* White Navigation */
    --color-flag-black: #000000;    /* Deutschlandfarben - Schwarz */
    --color-flag-red: #dd0000;      /* Dunkleres Rot für Light Mode */
    --color-flag-gold: #ffcc00;     /* Gold */
    
    /* === TEXT COLORS (Light Mode) === */
    /* Dunkle Schrift für Light Backgrounds mit optimalen Kontrasten */
    --color-text-primary: #1a1f2e;   /* Sehr dunkle Schrift für optimale Lesbarkeit */
    --color-text-secondary: rgba(26, 31, 46, 0.85); /* Secondary Dark Text */
    --color-text-tertiary: rgba(26, 31, 46, 0.65);  /* Tertiary Dark Text */
    --color-text-on-primary: #ffffff; /* White Text on Orange für optimalen Kontrast */
    --color-text-on-secondary: #ffffff; /* White Text on Türkis */
    --color-text-on-accent: #ffffff; /* White Text on Green */
    --color-text-muted: rgba(26, 31, 46, 0.45);     /* Muted Text */
    
    /* === BORDER COLORS (Light Mode) === */
    --color-border: #e2e8f0;         /* Subtile Grenzen für Light Mode */
    --color-border-light: rgba(226, 232, 240, 0.6); /* Subtle */
    --color-border-medium: rgba(226, 232, 240, 0.9); /* Medium */
    --color-border-strong: #cbd5e0;  /* Strong */
    --color-border-glow: rgba(245, 124, 0, 0.4); /* Subtilerer Glowing Border */
    
    /* === STATUS COLORS === */
    /* Angepasst für optimale Sichtbarkeit im Light Mode */
    --color-success: #2e7d32;        /* Dunkleres Green für Light Mode Success */
    --color-success-bg: rgba(46, 125, 50, 0.1); /* Success Background Light */
    --color-warning: #f57c00;        /* Dunkleres Amber für Light Mode */
    --color-warning-bg: rgba(245, 124, 0, 0.1); /* Warning Background Light */
    --color-info: #1976d2;           /* Dunkleres Blue für Light Mode */
    --color-info-bg: rgba(25, 118, 210, 0.1); /* Info Background Light */
    --color-error: #c62828;          /* Dunkleres Red für Light Mode */
    --color-error-dark: #b71c1c;    /* Dark Red */
    --color-error-bg: rgba(198, 40, 40, 0.1); /* Error Background Light */
    
    /* === MAGIC UI EFFECTS === */
    /* Glassmorphism - Light Mode */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --glass-backdrop-blur: blur(16px);
    
    /* Shimmer & Glow Effects - Light Mode (subtiler) */
    --shimmer-color: rgba(245, 124, 0, 0.1);
    --glow-primary: 0 0 20px rgba(245, 124, 0, 0.3);
    --glow-secondary: 0 0 20px rgba(0, 172, 193, 0.3);
    --glow-accent: 0 0 20px rgba(76, 175, 80, 0.3);
    
    /* === LIGHT MODE SHADOWS === */
    /* Subtile Schatten für bessere Depth im Light Mode */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-elevated: 0 6px 20px rgba(0, 0, 0, 0.1);
    --shadow-elevated-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-ambient: 0 0 80px rgba(245, 124, 0, 0.1);
    
    /* 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: 245, 124, 0;
    --color-secondary-rgb: 0, 172, 193;
    --color-accent-rgb: 76, 175, 80;
    --color-error-rgb: 198, 40, 40;
    
    /* Code Block Colors */
    --color-code-bg: #f5f5f5;
    --color-code-text: #333333;
    
    /* 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;
}