/*
 * Design tokens: colores, tipografía y espaciado.
 * El tema se elige con el atributo data-theme en <html> ("dark" | "light").
 * Ningún otro archivo CSS debe usar colores literales: solo estas variables.
 */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --max-width: 1440px;
}

/* ---------------------------------------------------------------- oscuro */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b0f14;
  --bg-elev: #121820;
  --panel: #151c25;
  --panel-2: #1b2430;
  --border: #263241;
  --border-strong: #34445a;

  --text: #e4ebf3;
  --text-strong: #ffffff;
  --text-soft: #c9d4e0;
  --text-muted: #8a9ab0;
  --text-dim: #5d6c80;

  --accent: #3ec7d4;
  --on-accent: #041014;
  --ok: #43c26b;
  --warn: #e5a93b;
  --drop: #f0605a;
  --vpn: #a98bff;
  --request: #a5b4c6;
  --reply: #6ea8ff;

  --header-bg: rgb(11 15 20 / 0.85);
  --topo-overlay: rgb(18 24 32 / 0.82);
  --node-router: #13303a;
  --node-cloud: #18222e;
  --node-screen: #0e2a31;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 8px 24px rgb(0 0 0 / 0.25);
  --glow-strength: 60%;
}

/* ----------------------------------------------------------------- claro */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #f3f6f9;
  --bg-elev: #f8fafc;
  --panel: #ffffff;
  --panel-2: #eef2f6;
  --border: #dbe2ea;
  --border-strong: #c3cdd8;

  --text: #1c2733;
  --text-strong: #0b121a;
  --text-soft: #33414f;
  --text-muted: #5b6b7c;
  --text-dim: #8595a6;

  --accent: #0b8793;
  --on-accent: #ffffff;
  --ok: #1d8a43;
  --warn: #b06d00;
  --drop: #cf3a33;
  --vpn: #6a4bd8;
  --request: #566579;
  --reply: #2d6cd2;

  --header-bg: rgb(255 255 255 / 0.85);
  --topo-overlay: rgb(248 250 252 / 0.88);
  --node-router: #dff3f5;
  --node-cloud: #eef2f6;
  --node-screen: #d7eef1;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 16px rgb(16 24 40 / 0.06);
  --glow-strength: 35%;
}

/* Tintes derivados: se recalculan solos con cada tema. */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 16%, transparent);
  --drop-soft: color-mix(in srgb, var(--drop) 14%, transparent);
  --vpn-soft: color-mix(in srgb, var(--vpn) 14%, transparent);
  --body-glow: color-mix(in srgb, var(--accent) 7%, transparent);
}