/* Hauptquartier — Design-Tokens
   Hell ist Standard. Dunkel folgt prefers-color-scheme, solange der Nutzer nichts gewählt hat;
   die Wahl (localStorage "hq-theme", siehe js/theme.js) setzt data-theme="light|dark" auf <html>.
   Zahlen immer in --font-mono mit tabular-nums. Keine Webfonts: Systemschriften, kein CDN. */

:root {
  color-scheme: light;

  /* Flächen und Linien — neutrale Grautöne mit leichtem Cyan-Stich */
  --bg: #F3F7F7;
  --panel: #FFFFFF;
  --panel-2: #EBF2F2;
  --line: #D7E3E4;
  --line-strong: #BCCDCF;

  /* Text */
  --ink: #0E1B1E;
  --muted: #53666D;
  --dim: #7B8C92;

  /* Akzent: dunkleres Cyan auf Hell (Kontrast ≥ 4,5:1 auf Weiß), #00D4C8 auf Dunkel */
  --accent: #00867E;
  --accent-strong: #00716A;
  --accent-soft: rgba(0, 134, 126, .09);
  --accent-line: #7FC3BE;
  --on-accent: #FFFFFF;

  /* Semantik: grün ok, bernstein Warnung, rot überfällig */
  --green: #1B8738;   --green-soft: rgba(27, 135, 56, .10);
  --amber: #A86200;   --amber-soft: rgba(168, 98, 0, .11);
  --red:   #C62A30;   --red-soft:   rgba(198, 42, 48, .09);
  --red-ink: #A3171D;

  /* Status-LEDs und Diagrammfarben */
  --slate: #66777F;
  --blue: #2A6FC9;
  --violet: #7A4FC4;

  /* Overlays, Schatten */
  --overlay: rgba(14, 27, 30, .45);
  --hover: rgba(14, 27, 30, .035);
  --shadow-1: 0 1px 2px rgba(14, 27, 30, .06), 0 1px 1px rgba(14, 27, 30, .04);
  --shadow-2: 0 8px 28px rgba(14, 27, 30, .14), 0 2px 6px rgba(14, 27, 30, .06);
  --bg-glow: rgba(0, 134, 126, .05);

  /* Typografie */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Form und Raster */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Shell-Maße */
  --sidebar-w: 248px;
  --sidebar-w-rail: 64px;
  --topbar-h: 58px;

  /* Alte Variablennamen (style.css, Inline-Styles in Templates) — verweisen auf die neuen Tokens */
  --cyan: var(--accent);
  --cyan-dim: var(--accent-line);
  --mono: var(--font-mono);
  --sans: var(--font-sans);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0F12;
  --panel: #111820;
  --panel-2: #0E141A;
  --line: #1E2A32;
  --line-strong: #2C3B45;
  --ink: #E6EDF0;
  --muted: #8A9AA4;
  --dim: #5F6D77;
  --accent: #00D4C8;
  --accent-strong: #2BE3D8;
  --accent-soft: rgba(0, 212, 200, .09);
  --accent-line: #0A5F5B;
  --on-accent: #04211F;
  --green: #3FB950;  --green-soft: rgba(63, 185, 80, .13);
  --amber: #F0A83C;  --amber-soft: rgba(240, 168, 60, .13);
  --red: #E5484D;    --red-soft: rgba(229, 72, 77, .12);
  --red-ink: #FFB4B6;
  --slate: #4B5A64;
  --blue: #6AB0FF;
  --violet: #C79BFF;
  --overlay: rgba(4, 7, 9, .72);
  --hover: rgba(255, 255, 255, .03);
  --shadow-1: none;
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);
  --bg-glow: rgba(0, 212, 200, .07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0F12;
    --panel: #111820;
    --panel-2: #0E141A;
    --line: #1E2A32;
    --line-strong: #2C3B45;
    --ink: #E6EDF0;
    --muted: #8A9AA4;
    --dim: #5F6D77;
    --accent: #00D4C8;
    --accent-strong: #2BE3D8;
    --accent-soft: rgba(0, 212, 200, .09);
    --accent-line: #0A5F5B;
    --on-accent: #04211F;
    --green: #3FB950;  --green-soft: rgba(63, 185, 80, .13);
    --amber: #F0A83C;  --amber-soft: rgba(240, 168, 60, .13);
    --red: #E5484D;    --red-soft: rgba(229, 72, 77, .12);
    --red-ink: #FFB4B6;
    --slate: #4B5A64;
    --blue: #6AB0FF;
    --violet: #C79BFF;
    --overlay: rgba(4, 7, 9, .72);
    --hover: rgba(255, 255, 255, .03);
    --shadow-1: none;
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);
    --bg-glow: rgba(0, 212, 200, .07);
  }
}