/* 1. Definition der neuen Farbpalette als CSS-Variablen */
:root {
  --color-background: #081523;       /* Carbon-Schwarz */
  --color-card: #0A1B2D;             /* Ein leicht helleres Schwarz für Karten */
  --color-accent: #FF0033;           /* Boss-Rot */
  --color-accent-dark: #E30330;      /* Dunklere Variante für Hover-Effekte */
  --color-text: #BDBDBD;             /* Platin-Silber */
  --color-text-muted: #7a7a7a;       /* Dunkleres Grau für weniger wichtigen Text */
  --color-data-blue: #007AFF;        /* KI-Blau */
  --color-border: #2a2a2e;           /* Rahmenfarbe */
  --color-success: #198754;          /* Beibehalten für Erfolgsmeldungen */
  --color-danger: #dc3545;           /* Beibehalten für Fehlermeldungen */
  --color-accent-grey: #5A5A5A;      /* Ein neutrales Grau für Buttons */
  --color-accent-yellow: #FFC107;    /* Ein leuchtendes Gelb/Gold */
  --color-accent-aiblue: #007AFF;      /* Ein neutrales Grau für Buttons */
}

/* 2. Anwendung der Variablen auf globale Elemente und bestehende Klassen */

/* Haupt-Hintergrund und Textfarbe */
body, .bg-dark-bg {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

/* Karten, Sidebar und Container-Hintergründe */
.bg-dark-card, .card-container {
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

/* Textfarben */
.text-text-light { color: var(--color-text) !important; }
.text-text-muted { color: var(--color-text-muted) !important; }

/* Akzentfarben (ersetzt das alte Blau) */
.text-accent-blue, .prose a { color: var(--color-accent) !important; }
.bg-accent-blue { background-color: var(--color-accent) !important; }
.border-accent-blue { border-color: var(--color-accent) !important; }
.hover\:bg-accent-blue-dark:hover { background-color: var(--color-accent-dark) !important; }
.hover\:bg-accent-blue:hover { background-color: var(--color-accent) !important; }
.hover\:text-accent-blue-dark:hover { color: var(--color-accent-dark) !important; }

/* Buttons */
.analyze-btn, .btn-primary {
  background-color: var(--color-accent) !important;
  color: white !important;
}
.analyze-btn:hover, .btn-primary:hover {
  background-color: var(--color-accent-dark) !important;
}

/* Rahmen */
.border-dark-border {
  border-color: var(--color-border) !important;
}

/* Spezifische Anpassungen für Lesbarkeit */
h1, h2, h3, h4, h5, h6, .font-bold {
  color: #FFFFFF !important; /* Reines Weiß für Überschriften für besseren Kontrast */
}

/* NEUE REGEL:
   Diese Regel sorgt dafür, dass jedes Element, das die Klasse 'hover:text-white' hat,
   beim Hovern eine weiße Textfarbe erhält. Das !important ist nötig, um die
   '.text-accent-blue !important'-Regel zu überschreiben.
*/
.hover\:text-white:hover {
  color: white !important;
}

/* Neue Hilfsklassen für das KI-Blau */
.bg-accent-grey {
  background-color: var(--color-accent-grey) !important;
  color: white !important;
}
.hover\:bg-accent-grey-dark:hover {
  background-color: #4E4E4E !important; /* Eine manuell definierte, dunklere Variante von KI-Blau */
}

/* Neue Hilfsklassen für das KI-Blau */
.bg-accent-yellow {
  background-color: var(--color-accent-yellow) !important;
  color: white !important;
}
.hover\:bg-accent-yellow-dark:hover {
  background-color: #EAB106 !important; /* Eine manuell definierte, dunklere Variante von KI-Blau */
}

/* Neue Hilfsklassen für das KI-Blau */
.bg-accent-aiblue {
  background-color: var(--color-accent-aiblue) !important;
  color: white !important;
}
.hover\:bg-accent-aiblue-dark:hover {
  background-color: #046EE2 !important; /* Eine manuell definierte, dunklere Variante von KI-Blau */
}