/* ================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Zentrale Definition aller Farben, Schatten, Transitions
   ================================ */

:root {
  /* === PRIMARY COLORS === */
  --primary-blue: #1E88E5;
  --primary-teal: #00BCD4;
  --dark-blue: #0D47A1;
  --light-teal: #4DD0E1;
  
  /* === GRADIENTS === */
  --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-teal) 100%);
  --hover-gradient: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
  --light-gradient: linear-gradient(135deg, var(--light-teal) 0%, var(--primary-teal) 100%);
  
  /* === GRAY TONES === */
  --gray-bg: rgba(60, 64, 67, 0.85);
  --gray-light: rgba(240, 240, 240, 0.92);
  --glass-effect: saturate(180%) blur(20px);
  
  /* === SHADOWS === */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 10px 20px rgba(0, 137, 255, 0.15);
  
  /* === TRANSITIONS === */
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --border-radius: 12px;

  /* === LIGHT MODE COLORS (Standard) === */
  --bg-primary: #ffffff;
  --background-color: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #999999;
  --card-bg: #ffffff;
  --border-color: rgba(0, 0, 0, 0.1);
  --input-bg: rgba(255, 255, 255, 0.9);
  --top-bar-bg: rgba(255, 255, 255, 0.8);
  --notification-item-bg: #f9f9f9;
  --notification-hover-bg: #e6f7ff;
}

/* === DARK MODE COLORS === */
/* Unterstützt sowohl html.dark-mode (FOUC-Prevention) als auch body.dark-mode */
html.dark-mode,
body.dark-mode {
  --bg-primary: #1a1a1a;
  --background-color: #1a1a1a;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  --card-bg: #2a2a2a;
  --border-color: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(40, 40, 40, 0.9);
  --top-bar-bg: rgba(30, 30, 30, 0.8);
  --notification-item-bg: #2a2a2a;
  --notification-hover-bg: #333333;
  
  --gray-light: rgba(40, 40, 40, 0.92);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* === FOUC PREVENTION: Dark Mode auf HTML-Level ===
   Grundlegende Dark Mode Hintergrundfarbe auf html-Level,
   um das Aufblitzen des Light Modes zu verhindern */
html.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}