/* Copyright Elias Bentz - elias@bentz.dev
 Christine Steinmann 2025 */

/* Style für Farbendeklarationen */

:root {
  /* -------------------------- */
  /* Light Mode (Standard)     */
  /* -------------------------- */

  /* -- Hintergründe -- */
  --color-background-page: #f8f9fa; /* Heller Seitenhintergrund */
  --color-background-content: #ffffff; /* Weiß für Header, Footer, Sections, Modal, Tabellen-Wrapper */
  --color-background-subtle: #f8f9fa; /* Heller Akzent (Tabellenkopf) */
  --color-background-hover-light: #f1f5f9; /* Leichter Hover (Tabellenzeile) */
  --color-background-active-light: #e9ecef; /* Aktiver Button (Toggle) */
  --color-background-overlay: rgba(0, 0, 0, 0.6); /* Modal-Overlay */
  --color-background-placeholder: #f0f0f0; /* Buchcover-Platzhalter */

  /* -- Textfarben -- */
  --color-text-primary: #333333; /* Haupttext, Überschriften */
  --color-text-secondary: #555555; /* Etwas hellerer Text (Absätze, Footer-Links) */
  --color-text-tertiary: #666666; /* Noch hellerer Text (Copyright, manche Details) */
  --color-text-subtle: #777777; /* Sehr heller Text (Event-Ort) */
  --color-text-placeholder: #999999; /* Text im Platzhalter */
  --color-text-inverted: #ffffff; /* Text auf dunklem/farbigem Hintergrund (z.B. primärer Button) */
  --color-text-link: #007bff; /* Standard-Linkfarbe */

  /* -- Akzentfarben (Buttons, Links) -- */
  --color-accent-primary: #007bff; /* Hauptakzentfarbe (Blau) */
  --color-accent-primary-hover: #0056b3; /* Hover für Hauptakzent */
  --color-accent-primary-text: var(
    --color-text-inverted
  ); /* Text auf primärem Akzent */

  /* -- Rahmenfarben (Borders) -- */
  --color-border-strong: #dee2e6; /* Dickere Linien (Tabellenkopf unten) */
  --color-border-medium: #cccccc; /* Mittlere Linien (Toggle Button) */
  --color-border-light: #eeeeee; /* Dünne Linien (Tabellenzeilen, Footer oben) */
  --color-border-dashed: #cccccc; /* Gestrichelte Linien (Platzhalter) */
  --color-border-hover: #bbbbbb; /* Hover für Rahmen (Toggle Button) */
  --color-border-active: #adb5bd; /* Aktiv für Rahmen (Toggle Button) */

  /* -- Schattenfarben (als Basis + Opazität) -- */
  /* Wir definieren die Farbe (meist schwarz) und die Opazität getrennt */
  --color-shadow-rgb: 0, 0, 0; /* RGB-Werte für Schwarz */
  --opacity-shadow-light: 0.05; /* z.B. Header/Footer */
  --opacity-shadow-medium: 0.08; /* z.B. Table Wrapper, Section */
  --opacity-shadow-heavy: 0.15; /* z.B. Modal, Button Hover */
  --opacity-shadow-inset: 0.1; /* z.B. Aktiver Button Innen */

  /* -- Icon-Farben -- */
  --color-icon-default: #555555; /* Standard Icon-Farbe */
  --color-icon-hover: var(--color-accent-primary); /* Icon Hover */
  --color-icon-close: #888888; /* Schließen-Icon (Modal) */
  --color-icon-close-hover: var(--color-text-primary);

  --c-bg-button: #fff;
  --slider-shadow: inset 0 1px 1px #ddd, 0 2px 3px #ccc;
}

:root.dark-theme {
  /* -- Hintergründe -- */
  --color-background-page: #121212; /* Sehr dunkler Seitenhintergrund */
  --color-background-content: #1e1e1e; /* Dunkelgrau für Content-Boxen */
  --color-background-subtle: #2a2a2a; /* Etwas helleres Dunkelgrau (Tabellenkopf) */
  --color-background-hover-light: #333333; /* Dunkler Hover */
  --color-background-active-light: #3a3a3a; /* Aktiver Button */
  --color-background-overlay: rgba(
    0,
    0,
    0,
    0.7
  ); /* Overlay evtl. etwas dunkler/opaker */
  --color-background-placeholder: #2c2c2c;

  /* -- Textfarben -- */
  --color-text-primary: #e0e0e0; /* Helles Grau für Haupttext */
  --color-text-secondary: #b0b0b0; /* Mittleres Grau */
  --color-text-tertiary: #999999; /* Dunkleres Grau */
  --color-text-subtle: #808080; /* Sehr dunkles Grau */
  --color-text-placeholder: #777777;
  --color-text-inverted: #121212; /* Dunkler Text auf hellem Hintergrund (selten im Dark Mode) */
  --color-text-link: #58a6ff; /* Helleres Blau für bessere Lesbarkeit */

  /* -- Akzentfarben (Buttons, Links) -- */
  /* Blau kann oft bleiben, evtl. leicht anpassen für Kontrast */
  --color-accent-primary: #0d6efd; /* Etwas helleres Blau evtl.? (Original: #007bff) */
  --color-accent-primary-hover: #3b8bfd; /* Helleres Hover-Blau */
  --color-accent-primary-text: var(
    --color-text-inverted
  ); /* Ggf. anpassen, wenn Akzent zu hell wird */

  /* -- Rahmenfarben (Borders) -- */
  --color-border-strong: #444444;
  --color-border-medium: #555555;
  --color-border-light: #3a3a3a;
  --color-border-dashed: #555555;
  --color-border-hover: #666666;
  --color-border-active: #777777;

  /* -- Schattenfarben -- */
  --color-shadow-rgb: 0, 0, 0; /* Bleibt schwarz */

  /* -- Icon-Farben -- */
  --color-icon-default: #b0b0b0; /* Passend zu Secondary Text */
  --color-icon-hover: var(--color-text-link); /* Helleres Blau */
  --color-icon-close: #999999;
  --color-icon-close-hover: var(--color-text-primary);

  --c-bg-button: #494a50;
  --slider-shadow: inset 0 1px 1px #767676;
}