/*
 * Design tokens: colores, tipografía y espaciado (mismo sistema que Net Lab, con el azul de Math como acento).
 * 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;
  /* Fórmulas: serif cursiva, como en un libro de texto. */
  --font-math: 'STIX Two Text', 'Cambria Math', Cambria, Georgia, 'Times New Roman', serif;

  --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: #5aa2ff;
  --on-accent: #04101f;
  --ok: #43c26b;
  --warn: #e5a93b;
  --drop: #f0605a;

  /* Colores de los dibujos: cada familia de líneas conserva su color de la entrada a la salida. */
  --c-point: #b49bff;
  --c-above: #f2a03d;
  --c-real: #ff6b6b;
  --c-below: #4cc77a;
  --c-vert: #a98bff;
  --c-imag: #4fb3ff;
  --c-region: #3ec7d4;
  --c-gold: #f0c04a;
  --c-probe: #ff6b6b;
  --plane-bg: #10161e;
  --plane-grid: rgb(228 235 243 / 0.07);
  --plane-axis: rgb(228 235 243 / 0.55);
  --plane-halo: #10161e;
  --dc-opacity: 0.78;

  --header-bg: rgb(11 15 20 / 0.85);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 8px 24px rgb(0 0 0 / 0.25);
}

/* ----------------------------------------------------------------- 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: #0b5fc6;
  --on-accent: #ffffff;
  --ok: #1d8a43;
  --warn: #b06d00;
  --drop: #cf3a33;

  --c-point: #7457d8;
  --c-above: #e07b17;
  --c-real: #d93a42;
  --c-below: #1d9a5b;
  --c-vert: #6d4fd6;
  --c-imag: #0b63ce;
  --c-region: #0e94a8;
  --c-gold: #c48f0e;
  --c-probe: #d93a42;
  --plane-bg: #ffffff;
  --plane-grid: rgb(16 35 63 / 0.08);
  --plane-axis: rgb(16 35 63 / 0.6);
  --plane-halo: #ffffff;
  --dc-opacity: 0.72;

  --header-bg: rgb(255 255 255 / 0.85);
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 16px rgb(16 24 40 / 0.06);
}

/* 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);
  --body-glow: color-mix(in srgb, var(--accent) 7%, transparent);
}