/* Professional Privacy Theme Variables - Reduzierte Farbpalette */
/* Network Tracker Design 1:1 Übernahme */
/* Light Mode */
:root {
  /* Background Colors - Light */
  --bg-black: #ffffff;
  --bg-dark: #f5f5f5;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  
  /* GitHub Projects Colors - Light (stärkerer Kontrast) */
  --gh-bg-primary: #ffffff;
  --gh-bg-secondary: #f0f2f5;      /* Stärkere Abhebung von #ffffff */
  --gh-bg-tertiary: #e8eaed;       /* Deutlicherer Hover-Effekt */
  --gh-border: #d0d4d8;            /* Stärkerer Border-Kontrast */
  --gh-border-hover: #b8bcc0;      /* Deutlicherer Hover-Border */
  --gh-text-primary: #1f2937;
  --gh-text-secondary: #4b5563;
  --gh-text-tertiary: #6b7280;
  
  /* Card Elevation - Light Mode */
  --gh-card-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --gh-card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);
  --gh-card-bg-elevated: #f8f9fa;  /* Erhöhter Card-Hintergrund */
  
  /* Borders - Light */
  --border-gray: #d0d4d8;           /* Stärkerer Kontrast */
  --border-gray-subtle: rgba(208, 212, 216, 0.6);
  --border-red: #ef4444;      /* Nur für kritische Warnungen */
  --border-yellow: #fbbf24;    /* Nur für wichtige Warnungen */
  
  /* Glows - Reduziert, nur für kritische Elemente */
  --glow-red: 0 0 15px rgba(239, 68, 68, 0.3), 0 0 30px rgba(239, 68, 68, 0.1);
  --glow-yellow: 0 0 10px rgba(251, 191, 36, 0.2), 0 0 20px rgba(251, 191, 36, 0.1);
  --glow-subtle: 0 0 10px rgba(0, 0, 0, 0.05);
  
  /* Text - Light */
  --text-white: #1f2937;
  --text-gray-light: #4b5563;
  --text-gray: #6b7280;
  --text-gray-dark: #9ca3af;
  
  /* Professional Colors - Nur für Warnungen */
  --color-critical: #ef4444;   /* Rot - Nur für kritische Warnungen */
  --color-warning: #fbbf24;    /* Gelb - Nur für wichtige Warnungen */
  --color-neutral: #1f2937;     /* Dunkel - Für normale Informationen */
  
  /* Legacy support - Deprecated, nur für Kompatibilität */
  --primary: #1f2937;           /* Ersetzt Cyan durch neutrales Dunkel */
  --primary-dark: #4b5563;
  --success: #1f2937;           /* Ersetzt Grün durch neutrales Dunkel */
  --warning: #fbbf24;          /* Gelb bleibt für Warnungen */
  --danger: #ef4444;           /* Rot bleibt für kritische Warnungen */
  --glass-bg: rgba(255, 255, 255, 0.95);
  --border-subtle: rgba(208, 212, 216, 0.6);
  
  /* Legacy Accent Colors - DEPRECATED: Nur für Kompatibilität, nicht mehr verwenden */
  --accent-green: var(--gh-text-primary);
  --accent-cyan: var(--gh-text-primary);
  --accent-red: #ef4444;
  --accent-yellow: #fbbf24;
  --accent-orange: #ff5722;
  
  /* Legacy Accent Colors with Opacity - DEPRECATED */
  --accent-green-05: var(--gh-bg-secondary);
  --accent-green-10: var(--gh-bg-secondary);
  --accent-green-15: var(--gh-bg-tertiary);
  --accent-green-20: var(--gh-bg-tertiary);
  --accent-green-30: var(--gh-bg-tertiary);
  --accent-green-40: var(--gh-bg-tertiary);
  --accent-cyan-05: var(--gh-bg-secondary);
  --accent-cyan-10: var(--gh-bg-secondary);
  --accent-cyan-20: var(--gh-bg-tertiary);
  --accent-cyan-25: var(--gh-bg-tertiary);
  --accent-red-15: rgba(239, 68, 68, 0.15);
  --accent-red-20: rgba(239, 68, 68, 0.2);
  --accent-red-25: rgba(239, 68, 68, 0.25);
  --accent-orange-15: rgba(255, 87, 34, 0.15);
  --accent-orange-20: rgba(255, 87, 34, 0.20);
  --accent-orange-25: rgba(255, 87, 34, 0.25);
  --accent-yellow-20: rgba(251, 191, 36, 0.2);
  
  /* Text Colors with Opacity */
  --text-white-50: rgba(31, 41, 55, 0.50);
  --text-white-60: rgba(31, 41, 55, 0.60);
  --text-white-70: rgba(31, 41, 55, 0.70);
  
  /* Background Colors with Opacity */
  --bg-overlay-30: rgba(0, 0, 0, 0.30);
  --bg-overlay-50: rgba(0, 0, 0, 0.50);
  --bg-overlay-60: rgba(0, 0, 0, 0.60);
  --bg-overlay-70: rgba(0, 0, 0, 0.70);
  --bg-overlay-85: rgba(0, 0, 0, 0.85);
  --bg-overlay-95: rgba(0, 0, 0, 0.95);
  --bg-overlay-98: rgba(0, 0, 0, 0.98);
  
  /* Liquid Glass Variables - Light Mode (iOS 26 3D Style) */
  --lg-blur: 40px;
  --lg-saturate: 180%;
  --lg-bg-card: rgba(255, 255, 255, 0.7);
  --lg-bg-nav: rgba(255, 255, 255, 0.75);
  --lg-bg-overlay: rgba(255, 255, 255, 0.6);
  --lg-border: rgba(255, 255, 255, 0.1);
  --lg-border-hover: rgba(255, 255, 255, 0.15);
  --lg-border-radius: 16px;
  
  /* Mehrschichtige Schatten-System (Light Mode) - Stärkere 3D-Effekte */
  --lg-shadow-primary: 0 8px 32px rgba(0, 0, 0, 0.25); /* Stärker für 3D-Effekt */
  --lg-shadow-secondary: 0 4px 16px rgba(0, 0, 0, 0.2); /* Stärker für Tiefe */
  --lg-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Stärkeres Highlight */
  --lg-shadow-ambient: 0 0 0 1px rgba(0, 0, 0, 0.08); /* Stärkerer Rand-Glow */
  --lg-shadow-combined: var(--lg-shadow-primary), var(--lg-shadow-secondary), var(--lg-shadow-inner), var(--lg-shadow-ambient);
  
  --lg-shadow-hover-primary: 0 12px 48px rgba(0, 0, 0, 0.3); /* Stärker für Hover */
  --lg-shadow-hover-secondary: 0 6px 24px rgba(0, 0, 0, 0.25); /* Stärker für Hover */
  --lg-shadow-hover-inner: inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Stärkeres Hover-Highlight */
  --lg-shadow-hover-ambient: 0 0 0 1px rgba(40, 167, 69, 0.4); /* Stärkerer Grün-Glow */
  --lg-shadow-hover-combined: var(--lg-shadow-hover-primary), var(--lg-shadow-hover-secondary), var(--lg-shadow-hover-inner), var(--lg-shadow-hover-ambient);
  
  --lg-shadow: var(--lg-shadow-combined);
  --lg-shadow-hover: var(--lg-shadow-hover-combined);
  
  /* Mehrschichtige Glass-Layer (Light Mode) */
  --lg-layer-base: rgba(255, 255, 255, 0.7);
  --lg-layer-overlay: rgba(255, 255, 255, 0.1);
  --lg-layer-border-glow: rgba(255, 255, 255, 0.2);
  
  /* Verbesserte Akzentfarben - Dunkleres Grün (konsistent mit rgba(40, 167, 69)) */
  --ios-blue-primary: #28A745; /* Dunkleres Grün - konsistent mit allen Bereichen */
  --ios-blue-secondary: #28A745; /* Dunkles Grün (gleich wie primary) */
  --ios-blue-tertiary: #28A745; /* Dunkles Grün (gleich wie primary) */
  --ios-blue-gradient: linear-gradient(135deg, #28A745 0%, #28A745 100%);
  
  /* Legacy Support */
  --ios-blue: var(--ios-blue-primary);
  --ios-blue-light: var(--ios-blue-secondary);
  --ios-blue-dark: #1E7E34;
  --ios-blue-accent: var(--ios-blue-primary);
  
  /* Screenshot Design Palette - Light Mode */
  --purple-primary: #8B5CF6; /* Haupt-Lila */
  --purple-secondary: #A78BFA; /* Sekundär-Lila */
  --purple-tertiary: #C4B5FD; /* Tertiär-Lila */
  --purple-gradient: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  
  --teal-primary: #14B8A6; /* Haupt-Teal */
  --teal-secondary: #5EEAD4; /* Sekundär-Teal */
  --teal-tertiary: #99F6E4; /* Tertiär-Teal */
  --teal-gradient: linear-gradient(135deg, #14B8A6 0%, #5EEAD4 100%);
  
  --positive-green: #28A745; /* Grün für positive Werte - konsistent mit ios-blue-primary */
  --positive-green-light: #28A745; /* Dunkles Grün (gleich wie primary) */
  
  /* Wellen-Hintergrund Gradient (Blau-Lila) */
  --wave-gradient: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.15) 0%, 
    rgba(20, 184, 166, 0.15) 50%, 
    rgba(139, 92, 246, 0.15) 100%
  );
  --wave-gradient-strong: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.3) 0%, 
    rgba(20, 184, 166, 0.3) 50%, 
    rgba(139, 92, 246, 0.3) 100%
  );
  
  /* Typografie - iOS Standard - Optimierte Hierarchie */
  --font-family-ios: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-size-large-title: 34px;
  --font-size-title-1: 28px;
  --font-size-title-2: 22px;
  --font-size-title-3: 20px;
  --font-size-body: 17px;
  --font-size-callout: 16px;
  --font-size-subhead: 15px;
  --font-size-footnote: 13px;
  --font-size-caption-1: 12px;
  --font-size-caption-2: 11px;
  
  /* Font Weights - Optimierte Hierarchie */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* Line Heights - Optimierte Hierarchie */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  
  /* Konsistente Abstände - Spacing System */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  
  /* Section Spacing */
  --section-spacing: var(--spacing-xl);
  --card-spacing: var(--spacing-lg);
  --item-spacing: var(--spacing-md);
}

/* Dark Mode */
.dark {
  /* Background Colors - Dark */
  --bg-black: #000000;
  --bg-dark: #0a0a0a;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  
  /* GitHub Projects Colors - Dark */
  --gh-bg-primary: #0d1117;
  --gh-bg-secondary: #161b22;
  --gh-bg-tertiary: #21262d;
  --gh-border: #30363d;
  --gh-border-hover: #484f58;
  --gh-text-primary: #ffffff;
  --gh-text-secondary: #8b949e;
  --gh-text-tertiary: #6e7681;
  
  /* Card Elevation - Dark Mode (keine Schatten) */
  --gh-card-shadow-light: none;
  --gh-card-shadow-hover: none;
  --gh-card-bg-elevated: #161b22;
  
  /* Borders - Dark */
  --border-gray: #2a2a2a;
  --border-gray-subtle: rgba(42, 42, 42, 0.5);
  
  /* Glows - Dark */
  --glow-subtle: 0 0 10px rgba(255, 255, 255, 0.05);
  
  /* Text - Dark */
  --text-white: #ffffff;
  --text-gray-light: #e5e5e5;
  --text-gray: #888888;
  --text-gray-dark: #666666;
  
  /* Professional Colors - Dark */
  --color-neutral: #e5e5e5;     /* Weiß/Grau - Für normale Informationen */
  
  /* Legacy support - Dark */
  --primary: #e5e5e5;           /* Ersetzt Cyan durch neutrales Grau */
  --primary-dark: #888888;
  --success: #e5e5e5;           /* Ersetzt Grün durch neutrales Grau */
  --glass-bg: rgba(17, 17, 17, 0.8);
  --border-subtle: rgba(42, 42, 42, 0.5);
  
  /* Text Colors with Opacity - Dark */
  --text-white-50: rgba(255, 255, 255, 0.50);
  --text-white-60: rgba(255, 255, 255, 0.60);
  --text-white-70: rgba(255, 255, 255, 0.70);
  
  /* Background Colors with Opacity - Dark */
  --bg-overlay-30: rgba(0, 0, 0, 0.30);
  --bg-overlay-50: rgba(0, 0, 0, 0.50);
  --bg-overlay-60: rgba(0, 0, 0, 0.60);
  --bg-overlay-70: rgba(0, 0, 0, 0.70);
  --bg-overlay-85: rgba(0, 0, 0, 0.85);
  --bg-overlay-95: rgba(0, 0, 0, 0.95);
  --bg-overlay-98: rgba(0, 0, 0, 0.98);
  
  /* Liquid Glass Variables - Dark Mode (iOS 26 3D Style) */
  --lg-blur: 40px;
  --lg-saturate: 180%;
  --lg-bg-card: rgba(28, 28, 30, 0.65); /* Etwas opaker für mehr Präsenz */
  --lg-bg-nav: rgba(28, 28, 30, 0.7); /* Etwas opaker für Sidebar */
  --lg-bg-overlay: rgba(28, 28, 30, 0.5);
  --lg-border: rgba(255, 255, 255, 0.1); /* iOS Notification Border */
  --lg-border-hover: rgba(255, 255, 255, 0.15);
  --lg-border-radius: 16px; /* iOS Standard */
  
  /* Mehrschichtige Schatten-System (3D Tiefe) */
  --lg-shadow-primary: 0 8px 32px rgba(0, 0, 0, 0.4); /* Basis-Schatten */
  --lg-shadow-secondary: 0 4px 16px rgba(0, 0, 0, 0.3); /* Näherer Schatten */
  --lg-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Highlight oben */
  --lg-shadow-ambient: 0 0 0 1px rgba(255, 255, 255, 0.05); /* Subtiler Rand-Glow */
  --lg-shadow-combined: var(--lg-shadow-primary), var(--lg-shadow-secondary), var(--lg-shadow-inner), var(--lg-shadow-ambient);
  
  /* Hover Schatten (stärker) */
  --lg-shadow-hover-primary: 0 12px 48px rgba(0, 0, 0, 0.5);
  --lg-shadow-hover-secondary: 0 6px 24px rgba(0, 0, 0, 0.4);
  --lg-shadow-hover-inner: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --lg-shadow-hover-ambient: 0 0 0 1px rgba(40, 167, 69, 0.2); /* Grün-Glow */
  --lg-shadow-hover-combined: var(--lg-shadow-hover-primary), var(--lg-shadow-hover-secondary), var(--lg-shadow-hover-inner), var(--lg-shadow-hover-ambient);
  
  /* Legacy Support (für Kompatibilität) */
  --lg-shadow: var(--lg-shadow-combined);
  --lg-shadow-hover: var(--lg-shadow-hover-combined);
  
  /* Mehrschichtige Glass-Layer für Tiefe */
  --lg-layer-base: rgba(28, 28, 30, 0.65); /* Base Layer */
  --lg-layer-overlay: rgba(255, 255, 255, 0.03); /* Subtile Highlights */
  --lg-layer-border-glow: rgba(255, 255, 255, 0.1); /* Border Glow */
  
  /* Verbesserte Akzentfarben - Dunkleres Grün (konsistent mit rgba(40, 167, 69)) */
  --ios-blue-primary: #28A745; /* Dunkleres Grün - konsistent mit allen Bereichen */
  --ios-blue-secondary: #28A745; /* Dunkles Grün (gleich wie primary) */
  --ios-blue-tertiary: #28A745; /* Dunkles Grün (gleich wie primary) */
  --ios-blue-gradient: linear-gradient(135deg, #28A745 0%, #28A745 100%);
  
  /* Legacy Support (für Kompatibilität) */
  --ios-blue: var(--ios-blue-primary);
  --ios-blue-light: var(--ios-blue-secondary);
  --ios-blue-dark: #1E7E34;
  --ios-blue-accent: var(--ios-blue-primary);
  
  /* Screenshot Design Palette - Dark Mode */
  --purple-primary: #8B5CF6; /* Haupt-Lila */
  --purple-secondary: #A78BFA; /* Sekundär-Lila */
  --purple-tertiary: #C4B5FD; /* Tertiär-Lila */
  --purple-gradient: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  
  --teal-primary: #14B8A6; /* Haupt-Teal */
  --teal-secondary: #5EEAD4; /* Sekundär-Teal */
  --teal-tertiary: #99F6E4; /* Tertiär-Teal */
  --teal-gradient: linear-gradient(135deg, #14B8A6 0%, #5EEAD4 100%);
  
  --positive-green: #28A745; /* Grün für positive Werte - konsistent mit ios-blue-primary */
  --positive-green-light: #28A745; /* Dunkles Grün (gleich wie primary) */
  
  /* Wellen-Hintergrund Gradient (Blau-Lila) - Dark Mode (stärker) */
  --wave-gradient: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.2) 0%, 
    rgba(20, 184, 166, 0.2) 50%, 
    rgba(139, 92, 246, 0.2) 100%
  );
  --wave-gradient-strong: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.4) 0%, 
    rgba(20, 184, 166, 0.4) 50%, 
    rgba(139, 92, 246, 0.4) 100%
  );
  
  /* Transparente Overlay-Farben für Modals */
  --modal-overlay-bg: rgba(0, 0, 0, 0.75); /* Dunkler Overlay für Modals */
  --modal-bg: rgba(28, 28, 30, 0.85); /* Modal Hintergrund mit Glassmorphismus */
  
  /* Typografie - iOS Standard (gleich für Dark Mode) */
  --font-family-ios: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-size-large-title: 34px;
  --font-size-title-1: 28px;
  --font-size-title-2: 22px;
  --font-size-title-3: 20px;
  --font-size-body: 17px;
  --font-size-callout: 16px;
  --font-size-subhead: 15px;
  --font-size-footnote: 13px;
  --font-size-caption-1: 12px;
  --font-size-caption-2: 11px;
}