/* Design tokens — swapped from Conduitly's warm mustard theme to a cooler,
   ops/infra-appropriate graphite-and-blue theme. Token names are unchanged so
   every selector elsewhere in app.css still applies. */
  /* ============================= TOKENS =============================
     Graphite-and-blue "network ops" theme.
  ==================================================================== */
  :root {
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --ink: #151b23;
    --ink-2: #5b6b7c;
    --muted: #8b97a3;
    --surface: #f2f5f8;
    --surface-raised: #ffffff;
    --surface-sunken: #e7ecf1;
    --border: #dbe2e9;
    --border-strong: #c1ccd6;
    --accent: #2f6fed;
    --accent-strong: #1d54c4;
    --accent-soft: #e4ecfd;
    --accent-contrast: #ffffff;
    --focus-ring: #2f6fed;

    --good: #1f9254;
    --good-ink: #147a41;
    --critical-ink: #b23327;

    --env-1: #2a78d6;
    --env-2: #eb6834;
    --env-3: #1baf7a;
    --env-4: #8b5cf6;
    --env-5: #e87ba4;

    --shadow-drawer: 0 20px 60px rgba(10, 20, 35, 0.16);
    --shadow-pop: 0 8px 28px rgba(10, 20, 35, 0.14);
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ink: #e8edf2;
      --ink-2: #b8c4cf;
      --muted: #8b97a3;
      --surface: #11151b;
      --surface-raised: #1a2029;
      --surface-sunken: #0d1015;
      --border: #2a323d;
      --border-strong: #3a4552;
      --accent: #4c86ff;
      --accent-strong: #6f9dff;
      --accent-soft: rgba(76, 134, 255, 0.16);
      --accent-contrast: #ffffff;
      --focus-ring: #4c86ff;
      --good-ink: #4ade80;
      --critical-ink: #f87171;
      --env-1: #3987e5; --env-2: #d95926; --env-3: #199e70; --env-4: #a78bfa; --env-5: #d55181;
      --shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.55);
      --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e8edf2; --ink-2: #b8c4cf; --muted: #8b97a3;
    --surface: #11151b; --surface-raised: #1a2029; --surface-sunken: #0d1015;
    --border: #2a323d; --border-strong: #3a4552;
    --accent: #4c86ff; --accent-strong: #6f9dff; --accent-soft: rgba(76, 134, 255, 0.16); --accent-contrast: #ffffff;
    --focus-ring: #4c86ff;
    --good-ink: #4ade80; --critical-ink: #f87171;
    --env-1: #3987e5; --env-2: #d95926; --env-3: #199e70; --env-4: #a78bfa; --env-5: #d55181;
    --shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
  }