/* ================================================
   Themes & Colors
   ================================================ */

:root {
  --color-accent-light: #2d6cdf;
  --color-accent-dark: #5aa4f8;
  --color-bg-light: #f9f9fb;
  --color-bg-dark: #1c1c1e;
  --color-surface-light: #ffffff;
  --color-surface-dark: #2b2b2e;
  --color-text-light: #1a1a1a;
  --color-text-dark: #f3f3f3;
  --color-muted-light: #e0e0e3;
  --color-muted-dark: #3b3b3d;
  --color-cpu-high: #ff5c5c;
  --color-cpu-mid: #ffb841;
  --color-cpu-low: #4caf50;
}

.theme-light {
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
}

.theme-light .chart-surface {
  background-color: var(--color-surface-light);
  border: 1px solid var(--color-muted-light);
}

.theme-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}

.theme-dark .chart-surface {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-muted-dark);
}

/* ================================================
   CPU Highlight States
   ================================================ */

.cpu-highlight[data-level="high"] {
  fill: var(--color-cpu-high);
  stroke: #b80000;
  stroke-width: 1.5;
}

.cpu-highlight[data-level="mid"] {
  fill: var(--color-cpu-mid);
  stroke: #d08100;
  stroke-width: 1.2;
}

.cpu-highlight[data-level="low"] {
  fill: var(--color-cpu-low);
  stroke: #2c8c35;
  stroke-width: 1.2;
}

/* ================================================
   Interactive Emphasis & Animations
   ================================================ */

.cpu-highlight:hover {
  opacity: 0.9;
  transform: scale(1.1);
  transition: transform 0.15s ease-in-out, opacity 0.15s;
}

.theme-light .tooltip {
  background-color: var(--color-surface-light);
  border: 1px solid var(--color-muted-light);
  color: var(--color-text-light);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.theme-dark .tooltip {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-muted-dark);
  color: var(--color-text-dark);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* ================================================
   Footer & Meta
   ================================================ */

footer {
  font-size: 0.8rem;
  text-align: center;
  margin-top: 2rem;
  color: var(--color-muted-light);
}

footer::after {
  content: "© 2026 Donau2Space.de";
  display: block;
  margin-top: 0.5rem;
  color: inherit;
}