/*
 * Design tokens: colores, tipografía y espaciado (mismo sistema que Net Lab y Math Lab, con un verde azulado de terminal 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;

  --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: #2fc4b2;
  --on-accent: #03201c;
  --ok: #43c26b;
  --warn: #e5a93b;
  --drop: #f0605a;

  /* Terminal y colores ANSI (los que usan ls --color y grep --color), y los de los paneles. */
  --term-bg: #0a0e13;
  --term-fg: #d6e2ee;
  --term-dim: #6f7f93;
  --term-caret: #2fc4b2;
  --ansi-red: #ff6b6b;
  --ansi-green: #5fd38a;
  --ansi-yellow: #f0c04a;
  --ansi-blue: #6aa8ff;
  --ansi-magenta: #c79bff;
  --ansi-cyan: #45d0e0;
  --c-dir: #6aa8ff;
  --c-file: #c9d4e0;
  --c-exec: #5fd38a;
  --c-link: #45d0e0;
  --c-out: #5fd38a;
  --c-err: #ff6b6b;
  --c-in: #f0c04a;

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

  --term-bg: #fbfcfd;
  --term-fg: #1c2733;
  --term-dim: #7a8899;
  --term-caret: #0f766e;
  --ansi-red: #c62f2f;
  --ansi-green: #1b8a4a;
  --ansi-yellow: #9a6a00;
  --ansi-blue: #1f5fc4;
  --ansi-magenta: #7a3fc4;
  --ansi-cyan: #0b7f8f;
  --c-dir: #1f5fc4;
  --c-file: #33414f;
  --c-exec: #1b8a4a;
  --c-link: #0b7f8f;
  --c-out: #1b8a4a;
  --c-err: #c62f2f;
  --c-in: #9a6a00;

  --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);
}