/* ============================================================
   Tokens de diseno: tipografia, color, radios y sombras.
   Unico sitio donde se declaran variables. Tema claro + oscuro.
   ============================================================ */

:root {
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* --- Estado (semántico, sobrio) --- */
  --run: #21b45a;      --run-glow: rgba(33, 180, 90, 0.5);
  --stop: #e8971b;     --fault: #e23b4e;    --mode: #3b7ff5;
  --pending: #e8971b;

  --radius: 14px;
  --radius-sm: 9px;

  /* ================= TEMA CLARO ================= */
  --bg: #d6dfe9;
  --bg-grid: rgba(20, 40, 65, 0.05);
  --grid: rgba(22, 52, 92, 0.05);
  --surface: #ece9e2;
  --surface-2: #e3e0d9;
  --surface-3: #dbd7d0;
  --border: #d4dde7;
  --border-strong: #b9c6d4;
  --text: #132030;
  --muted: #5c6d7f;
  --accent: #0d84b4;
  --accent-soft: rgba(13, 132, 180, 0.12);
  --accent-ink: #ffffff;
  --unknown: #c3ced9;

  --stage-bg: radial-gradient(120% 130% at 50% 0%, #eef3f8, #dbe3ec);
  --stage-edge: #cdd8e3;
  --plate-bg: #12202e;
  --plate-text: #dfe8f1;
  --shadow: 0 1px 2px rgba(16, 32, 52, 0.06), 0 10px 30px rgba(16, 32, 52, 0.09);
  --shadow-lg: 0 20px 55px rgba(16, 32, 52, 0.16);

  /* --- Traza del histórico --- */
  /* El verde --run (#21b45a) sólo llega a 2.24:1 sobre la superficie clara.
     Para la traza se usa un verde más oscuro que sí pasa 3:1 (validado). */
  --trend-run: #178a44;
  --trend-run-fill: rgba(23, 138, 68, 0.14);
  --trend-grid: rgba(22, 52, 92, 0.10);
  --trend-axis: rgba(22, 52, 92, 0.28);
  --trend-unknown: rgba(92, 109, 127, 0.10);
  font-synthesis: none;
}

/* ================= TEMA OSCURO ================= */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0a1420;
    --bg-grid: rgba(120, 170, 210, 0.05);
    --grid: rgba(130, 175, 215, 0.15);
    --surface: #10202f;
    --surface-2: #16293b;
    --surface-3: #1d3446;
    --border: #21384d;
    --border-strong: #34526e;
    --text: #e8f0f8;
    --muted: #8ca2ba;
    --accent: #17a9dc;
    --accent-soft: rgba(23, 169, 220, 0.16);
    --accent-ink: #04141f;
    --unknown: #2c4256;
    --stage-bg: radial-gradient(120% 130% at 50% 0%, #16293a, #0d1a27);
    --stage-edge: #24384d;
    --plate-bg: #0a1622;
    --plate-text: #cfe0ef;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0a1420;
  --bg-grid: rgba(120, 170, 210, 0.05);
  --grid: rgba(130, 175, 215, 0.15);
  --surface: #10202f;
  --surface-2: #16293b;
  --surface-3: #1d3446;
  --border: #21384d;
  --border-strong: #34526e;
  --text: #e8f0f8;
  --muted: #8ca2ba;
  --accent: #17a9dc;
  --accent-soft: rgba(23, 169, 220, 0.16);
  --accent-ink: #04141f;
  --unknown: #2c4256;
  --stage-bg: radial-gradient(120% 130% at 50% 0%, #16293a, #0d1a27);
  --stage-edge: #24384d;
  --plate-bg: #0a1622;
  --plate-text: #cfe0ef;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* Traza en oscuro: escalón propio, no un volteo automático del claro.
     Aquí el --run original ya pasa 3:1 sobre #10202f. */
  --trend-run: #21b45a;
  --trend-run-fill: rgba(33, 180, 90, 0.16);
  --trend-grid: rgba(130, 175, 215, 0.12);
  --trend-axis: rgba(140, 162, 186, 0.38);
  --trend-unknown: rgba(140, 162, 186, 0.10);
}