/* Tokens de diseño — terminal financiera densa (blueprint §7).
   Oscuro por defecto; @media (prefers-color-scheme: light) redefine los mismos tokens.
   Ningún componente vive aquí: solo variables y los resets globales de tipografía,
   foco y movimiento reducido que aplican a toda la app. */

:root {
  /* Los controles nativos (select, input, barras de desplazamiento) siguen el tema */
  color-scheme: dark;

  /* Color */
  --color-fondo: #020617;
  --color-superficie: #0E1223;
  --color-superficie-2: #1A1E2F;
  --color-borde: #334155;
  --color-texto: #F8FAFC;
  --color-texto-suave: #94A3B8;
  --color-primario: #1E293B;
  --color-acento: #22C55E;
  --color-peligro: #EF4444;
  --color-aviso: #EAB308;
  --color-foco: #FFFFFF;

  /* Espaciado */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;

  /* Radio — 4px en botones, inputs, tarjetas y etiquetas de semáforo, sin excepciones */
  --radio: 4px;
  --ancho-borde: 1px;

  /* Tipografía — ningún tamaño por debajo de --texto-cuerpo (14px) en toda la app */
  --fuente-sans: "Fira Sans", ui-sans-serif, system-ui, sans-serif;
  --fuente-mono: "Fira Code", ui-monospace, monospace;
  --texto-cuerpo: 0.875rem;
  --interlineado-cuerpo: 1.5;

  /* Layout */
  --ancho-maximo: 1440px;
  --alto-grafico-velas: 480px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-fondo: #F8FAFC;
    --color-superficie: #FFFFFF;
    --color-superficie-2: #F1F5F9;
    --color-borde: #CBD5E1;
    --color-texto: #0F172A;
    --color-texto-suave: #475569;
    --color-primario: #E2E8F0;
    --color-acento: #15803D;
    --color-peligro: #B91C1C;
    /* #A16207 medía 4.49:1 sobre --color-superficie-2 (filas pares); oscurecido a ≥ 4.5:1 */
    --color-aviso: #9C6006;
    --color-foco: #0F172A;
  }
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-sans);
  font-size: var(--texto-cuerpo);
  line-height: var(--interlineado-cuerpo);
}

/* Sin esto, los controles de formulario usan la fuente del sistema a ~13.3px */
button,
input,
select,
textarea {
  font: inherit;
}

/* Cifras (precios, VaR, tablas): monoespaciado y alineado por columna */
.cifra {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

/* Foco siempre visible, nunca solo el outline por defecto del navegador */
:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}