/* =============================================================
   THEME STYLES - data_visualization
   -------------------------------------------------------------
   Enthält Farbdefinitionen und Unterstützung für Light/Dark-Mode
   sowie Akzentfarben für Diagramme und markierte Datenpunkte.
   ============================================================= */

:root {
  --color-light-background: #f8f9fa;
  --color-light-surface: #ffffff;
  --color-light-text: #212529;

  --color-dark-background: #1e1e1e;
  --color-dark-surface: #252526;
  --color-dark-text: #e0e0e0;

  --color-accent-primary: #007acc;
  --color-accent-secondary: #ff9800;
  --color-highlight: #4caf50;

  --transition-theme: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================================
   Color Modes
   ============================================================= */

[data-theme='light'] {
  background-color: var(--color-light-background);
  color: var(--color-light-text);
  transition: var(--transition-theme);
}

[data-theme='light'] main,
[data-theme='light'] section,
[data-theme='light'] .card {
  background-color: var(--color-light-surface);
  color: var(--color-light-text);
}

[data-theme='dark'] {
  background-color: var(--color-dark-background);
  color: var(--color-dark-text);
  transition: var(--transition-theme);
}

[data-theme='dark'] main,
[data-theme='dark'] section,
[data-theme='dark'] .card {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
}

/* =============================================================
   Accent Colors
   ============================================================= */

.highlight {
  color: var(--color-highlight);
  font-weight: 600;
  text-decoration: none;
}

.accent {
  color: var(--color-accent-primary);
  transition: color 0.2s ease;
}

.accent:hover,
.accent:focus {
  color: var(--color-accent-secondary);
}

/* =============================================================
   Responsive Adjustments (optional for better UI readability)
   ============================================================= */

@media (min-width: 640px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 1.1rem;
  }
}

/* =============================================================
   Footer Branding (Konformitäts-Hinweis)
   ============================================================= */

footer {
  font-size: 0.85rem;
  color: var(--color-accent-secondary);
  text-align: center;
  margin-top: 2rem;
}

footer::after {
  content: "© 2026 Donau2Space.de";
  display: block;
  margin-top: 0.5rem;
  color: var(--color-dark-text);
}