/* =====================================================
   TENO — DESIGN TOKENS (TCK-F1)
   Fundación del sistema de diseño del panel v2.
   Solo define custom properties: no aplica estilos a
   ningún selector legacy. Se carga ANTES de style.css.

   Presupuesto tipográfico (< 150 KB, subset latin woff2):
     Inter 400/500 ........... ya cargada por style.css (variable, ~48 KB)
     JetBrains Mono 500 ...... link en index.html        (~22 KB)
     Instrument Serif 400 .... link en index.html        (~20 KB)
   Sin @import acá a propósito: encadenar @import bloquea
   el render; las fuentes van por <link> con display=swap.
===================================================== */

:root {
  /* ---------- Tipografía ---------- */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* solo 1-2 títulos de impacto */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-mono: 500;
  --font-weight-serif: 400;

  /* ---------- Escala de grises ---------- */
  --gris-100: #f5f5f5;
  --gris-200: #e5e5e5;
  --gris-300: #d4d4d4;
  --gris-400: #a3a3a3;
  --gris-500: #737373;
  --gris-600: #525252;
  --gris-700: #404040;
  --gris-800: #262626;
  --gris-900: #171717;

  /* ---------- Semánticos (modo claro) ---------- */
  --color-positivo: #15803d; /* solo deltas positivos — 5.0:1 sobre blanco */
  --color-negativo: #dc2626; /* solo deltas negativos — 4.8:1 sobre blanco */
  --color-acento: #a8841f;   /* dorado legible sobre claro */

  --bg-panel: #ffffff;
  --text-principal: var(--gris-900);
}

/* Modo oscuro: misma convención que style.css (body.dark) */
body.dark {
  --color-positivo: #22c55e; /* 8.7:1 sobre #0A0A0A */
  --color-negativo: #f87171; /* 7.0:1 sobre #0A0A0A */
  --color-acento: #d4af37;   /* dorado de marca */

  --bg-panel: #0a0a0a;
  --text-principal: var(--gris-100);
}