/* Variables de diseño: colores, espaciado, sombras, tipografía.
   Todo lo demás las usa; este archivo va primero y no depende de nada. */

/* -------------------- TOKENS -------------------- */
/* PALETA BANCA VE. La app vive en calculadora.bancaveoficial.com y tiene que sentirse
   parte de ese sitio, así que los tonos salen de su styles.css: azul marino en vez de
   negro neutro, y un dorado más suave. Los valores de referencia son los suyos —
   --bg:#07111f, --surface:#0e1b2b, --ink:#f5f8fc, --muted:#a8b4c5, --blue:#60a5fa,
   --gold:#f0c674, --line:#293646— y los intermedios se interpolan entre ellos.

   LO QUE NO SE TOCA, y no es descuido: el verde y el rojo. No son marca, son convención
   de mercado — verde sube, rojo baja — y cambiarlos para que peguen con el azul
   confundiría a quien lee un gráfico de velas. Se quedan. */
:root{
  --bg:#07111f;
  --bg-elevated:#0b1624;
  --panel:#0e1b2b;
  --panel-2:#13233a;
  --panel-3:#1a2d47;
  --border:#293646;
  --border-hover:#3c4d63;
  --border-active:#f0c674;
  --text:#f5f8fc;
  --text-secondary:#a8b4c5;
  /* Más claro que el #6b7280 de antes, y eso arregla de paso lo de "no llego a leer las
     letras chiquitas": el texto de 9 px sobre fondo oscuro necesita contraste. */
  --muted:#8295ab;
  --gold:#f0c674;
  --gold-dim:#c99f4a;
  --gold-glow:rgba(240,198,116,0.15);
  --green:#0ecb81;
  --green-dim:rgba(14,203,129,0.12);
  --red:#f6465d;
  --red-dim:rgba(246,70,93,0.12);
  --blue:#60a5fa;
  --amber:#f0c674;
  --font-ui:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
  --font-mono:"SF Mono","Cascadia Mono","Roboto Mono",ui-monospace,monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.6);
  --shadow-gold:0 0 20px rgba(240,198,116,0.08);
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;
  --transition-fast:150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:350ms cubic-bezier(0.4,0,0.2,1);
}