/* ═══════════════════════════════════════════════════════════
   tokens.css — Los valores del sistema visual.

   Sistema: Geist, el lenguaje de Vercel (ver DESIGN.md en la raíz).
   Es un ejercicio de resta: una hoja casi blanca con tinta casi negra,
   filetes de 1px y prácticamente ningún color. El azul solo aparece en
   lo que se puede pulsar; el color fuerte se reserva para el semáforo.

   Ningun otro archivo escribe un color, un tamano de fuente o un radio
   a mano: todo sale de aqui. Cambiar la paleta entera es editar este
   archivo y nada mas.

   UN SOLO TEMA: claro.

   Aqui hubo tema oscuro, con su boton para alternarlo y su respeto por la
   preferencia del sistema operativo. Se quito entero —los tokens oscuros,
   el boton y el JS— porque mantener dos paletas cuesta en cada pantalla
   nueva y nadie lo estaba usando.

   Si algun dia vuelve, el patron correcto es: paleta clara completa en
   `:root`, y solo los tokens que cambian dentro de
   `@media (prefers-color-scheme: dark)` y de `:root[data-tema="oscuro"]`.
   Nunca definir un color unicamente dentro de un bloque de tema.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Le dice al navegador que pinte sus propios controles en claro:
     sin esto, con el sistema en oscuro las barras de desplazamiento y
     los desplegables nativos salian oscuros sobre una hoja blanca. */
  color-scheme: light;

  /* ── Superficies ──
     La hoja es #FAFAFA y lo que se eleva es blanco puro. Al reves de lo
     habitual: aqui el blanco es lo que destaca, no el fondo. */
  --fondo:        #FAFAFA;
  --superficie:   #FFFFFF;
  --superficie-2: #FAFAFA;
  --superficie-3: #F2F2F2;

  /* ── Lineas ──
     Un filete de 1px casi imperceptible define cada tarjeta. Es el unico
     recurso estructural del sistema: nada de sombras ni de fondos grises. */
  --linea:      #EBEBEB;
  --linea-fuerte: #D4D4D4;   /* bordes que tienen que verse: campos con foco, tiradores */
  --linea-suave:#F2F2F2;

  /* ── Texto: de mas a menos contraste ──
     Tinta casi negra, nunca #000.

     Los grises son mas oscuros que los de Vercel a proposito. Su paleta
     (#4D4D4D y #8F8F8F) esta pensada para una web de marketing con texto
     grande; aqui el gris claro lleva etiquetas, pistas y rotulos de 10-12px,
     y a 3,2:1 sobre blanco no llegaba al minimo legible de 4,5:1.

     Medido sobre blanco:  tinta 17,9:1 · tinta-2 10,9:1 · tinta-3 5,7:1 */
  --tinta:   #171717;
  --tinta-2: #3D3D3D;
  --tinta-3: #666666;

  /* ── Acento: lo que se puede pulsar ──
     Azul de enlace. El boton principal NO lo usa: va en tinta, que es
     como Vercel marca la accion primaria. */
  --acento:      #0070F3;
  --acento-suave:#D3E5FF;
  --acento-texto:#FFFFFF;

  /* ── Accion primaria: tinta sobre blanco ── */
  --primario:       #171717;
  --primario-texto: #FFFFFF;
  --primario-hover: #383838;

  /* ── Semaforo ──
     Los unicos colores que el sistema se permite fuera del acento. Se
     usan los de Vercel, escogiendo la variante que se lee sobre blanco. */
  --alerta:       #C50000;   /* error, algo se rompio */
  --alerta-suave: #FFF0F0;
  --aviso:        #AB570A;   /* atencion, revisar */
  --aviso-suave:  #FFEFCF;
  --exito:        #0F7B6C;   /* todo bien */
  --exito-suave:  #E6FBF6;

  /* El verde del interruptor. No es el del semaforo: aqui comunica un estado
     encendido, no que algo salio bien, y por eso es mas vivo. */
  --encendido:    #16A34A;

  /* Sombra casi inexistente: el sistema separa con filete, no con sombra. */
  --sombra: 0 1px 2px rgba(0, 0, 0, .04);

  /* ── Tipografia ──
     Geist para todo el texto y Geist Mono para lo tecnico: SKU, codigos,
     rotulos. La display es la misma familia, apretada con tracking
     negativo, que es lo que le da el aire del sistema. */
  --sans:  Geist, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --disp:  Geist, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Medidas ── */
  --lateral: 236px;   /* ancho de la barra de navegacion, abierta */
  --riel:     58px;   /* y en reposo: solo los iconos */
  --radio:    6px;    /* chrome de aplicacion: campos, botones, filas */
  --radio-md: 12px;   /* tarjetas y paneles */
  --radio-pill: 100px;
}