/* 
 * Dunkelmodus-Stylesheet für die KI-Entwickler Website
 */

/* Dark Mode Farbvariablen */
.dark-mode {
  --primary-color: #5a7bff;
  --primary-hover: #7a93ff;
  --secondary-color: #a463ff;
  --background-color: #121212;
  --card-color: #1e1e1e;
  --text-color: #e0e0e0;
  --text-muted: #a0a0a0;
  --border-color: #333333;
  --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Dark Mode Anpassungen */
.dark-mode .moon-icon {
  display: none;
}

.dark-mode .sun-icon {
  display: block;
}

/* Syntax Highlighting für Code-Blöcke im Dunkelmodus */
.dark-mode pre, 
.dark-mode code {
  background: rgba(255, 255, 255, 0.05);
}

/* Anpassungen für Formulare im Dunkelmodus */
.dark-mode .form-control {
  background-color: #252525;
  border-color: #333333;
}

.dark-mode .form-control:focus {
  border-color: var(--primary-color);
}

/* Alert-Anpassungen für Dunkelmodus */
.dark-mode .alert-success {
  background-color: rgba(25, 135, 84, 0.2);
  color: #75b798;
}

.dark-mode .alert-error {
  background-color: rgba(220, 53, 69, 0.2);
  color: #ea868f;
}

.dark-mode .alert-info {
  background-color: rgba(13, 110, 253, 0.2);
  color: #6ea8fe;
}

/* Kategorie-Tags im Dunkelmodus */
.dark-mode .category-tag {
  background-color: rgba(90, 123, 255, 0.2);
}

/* System-Präferenz für Dunkelmodus unterstützen */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
    --primary-color: #5a7bff;
    --primary-hover: #7a93ff;
    --secondary-color: #a463ff;
    --background-color: #121212;
    --card-color: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #333333;
    --shadow-color: rgba(0, 0, 0, 0.5);
  }
  
  body:not(.light-mode) .moon-icon {
    display: none;
  }
  
  body:not(.light-mode) .sun-icon {
    display: block;
  }
  
  body:not(.light-mode) pre, 
  body:not(.light-mode) code {
    background: rgba(255, 255, 255, 0.05);
  }
  
  body:not(.light-mode) .form-control {
    background-color: #252525;
    border-color: #333333;
  }
}