/* Dark theme — redefines every color token base.css's :root defines,
   nothing more. Every other rule in every other CSS file reads its colors
   through those tokens (var(--ink), var(--panel), etc.), so this file is
   the entire dark theme; nothing outside here (or base.css's :root)
   should ever hardcode a color that needs to differ by theme.

   Applied two ways, both wired up by public/js/theme.js:
   - :root[data-theme="dark"] — the user explicitly picked dark (the
     toolbar toggle), stored in localStorage, wins regardless of the OS.
   - the prefers-color-scheme media query below — no explicit choice
     stored yet, so this follows the OS setting instead, live (a system
     theme change takes effect without a reload). :not([data-theme="light"])
     guards against double-applying when dark IS the explicit choice, and
     lets an explicit "light" choice override a dark OS setting.

   Same hue families as the light palette throughout (blue accent, green
   accent2, red danger, amber warn) with lightness/saturation flipped for
   a dark backdrop — preserves what each color *means* across both themes
   rather than picking unrelated dark-mode colors.

   Keep the two token lists below in sync — CSS has no way to define a
   color once and apply it under two different selectors, so this is
   intentionally duplicated rather than a bug waiting to diverge. */

:root[data-theme="dark"] {
  --ink: #e8ecf2;
  --ink-soft: #9aa4b5;
  --line: #2f3546;

  --accent: #5b8dff;
  --accent-soft: #1c2b4d;
  --accent-strong: #7aa2ff;

  --accent2: #34c98d;
  --accent2-soft: #123626;
  --accent2-strong: #5fe0ab;

  --danger: #ff6b6f;
  --danger-soft: #3a1618;
  --danger-strong: #ff8a8d;
  --warn: #e0ab3a;

  --bg: #14171f;
  --panel: #1c2029;
  --panel-soft: #242938;
  --grid-dot: #262b38;

  --node-bg: #1c2029;
  --node-border: #3a4152;
  --node-selected: #5b8dff;
  --label-bg: #1c2029;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55);

  --border-muted: #4a5468;
  --border-hover: #6b7690;
  --ink-faint: #6b7690;
  --ink-fainter: #565f74;
  --panel-press: #2c3244;
  --panel-translucent: rgba(28, 32, 41, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf2;
    --ink-soft: #9aa4b5;
    --line: #2f3546;

    --accent: #5b8dff;
    --accent-soft: #1c2b4d;
    --accent-strong: #7aa2ff;

    --accent2: #34c98d;
    --accent2-soft: #123626;
    --accent2-strong: #5fe0ab;

    --danger: #ff6b6f;
    --danger-soft: #3a1618;
    --danger-strong: #ff8a8d;
    --warn: #e0ab3a;

    --bg: #14171f;
    --panel: #1c2029;
    --panel-soft: #242938;
    --grid-dot: #262b38;

    --node-bg: #1c2029;
    --node-border: #3a4152;
    --node-selected: #5b8dff;
    --label-bg: #1c2029;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55);

    --border-muted: #4a5468;
    --border-hover: #6b7690;
    --ink-faint: #6b7690;
    --ink-fainter: #565f74;
    --panel-press: #2c3244;
    --panel-translucent: rgba(28, 32, 41, 0.9);
  }
}