/* Tokens de diseño — color, medida, movimiento y tipografía.
 *
 * GENERADO por herramientas/tokens.mjs desde app/src/tema/. **No editar a
 * mano**: el próximo `npm run generar` lo pisa. Para cambiar un valor, se
 * cambia en la app y se vuelve a generar — así las dos superficies no pueden
 * separarse.
 *
 * Va enlazado DESPUÉS de app.css y ANTES de web.css, en sections/cabeza.php.
 * Ese orden es todo: app.css declara estos mismos nombres en su :root y no se
 * puede tocar (ver docs/adr/0001), así que lo de aquí lo pisa por cascada.
 *
 * Dos cosas quedan en app.css a propósito: --seguro-arriba y --seguro-abajo,
 * que no son valores sino consultas al navegador —env()— y no tienen
 * contraparte en la app, donde eso lo resuelve la zona segura.
 *
 * El barrido termina en #2666B8 y no en el #2F7FE0 al 128% de app.css. No es
 * una diferencia: 128% es una parada fuera de rango, y el color que le toca al
 * 100% real de ese mismo degradado es #2666B8. La app no puede escribirlo de
 * la otra forma porque recorta las paradas al rango, así que manda esta.
 *
 * Ver docs/adr/0003-app-y-web-son-dos-superficies-del-mismo-producto.md
 *     docs/adr/0005-los-tokens-se-emiten-desde-la-app.md
 */

:root {
  /* Paleta cruda — muestreada del isotipo */
  --navy-900: #081527;
  --navy-800: #0C2043;
  --navy-700: #12305E;
  --brand-700: #1A5FB8;
  --brand-600: #1F6FD0;
  --brand-500: #2F7FE0;
  --brand-400: #5B9CEA;
  --brand-300: #8FBEF3;
  --brand-200: #C2DBFA;
  --brand-100: #DEEBFD;
  --brand-050: #EFF6FE;
  --calido-700: #A8380F;
  --calido-600: #C7431E;
  --calido-500: #E4572E;
  --calido-100: #FBDDD2;
  --calido-050: #FDF0EB;
  --ok-700: #086243;
  --ok-600: #0B7A54;
  --ok-500: #0E9F6E;
  --ok-050: #E8F7F1;
  --aero-900: #0F2137;
  --aero-700: #003D9B;
  --aero-600: #0C56D0;
  --aero-500: #1E6FF2;
  --aero-100: #DDE8FF;
  --aero-050: #EEF3FF;
  --blanco: #FFFFFF;

  /* Nombres semánticos
     El azul es marca y acciones; el cálido, dinero y urgencia. */
  --fondo: var(--blanco);
  --superficie: #F5F8FC;
  --superficie-2: #EAF0F8;
  --borde: #E3EAF3;
  --borde-fuerte: #C9D6E6;
  --texto: var(--navy-800);
  --texto-2: #46587A;
  --texto-3: #7C8CA8;
  --sobre-marca: var(--blanco);
  --marca: var(--brand-600);
  --marca-fuerte: var(--brand-700);
  --marca-clara: var(--brand-500);
  --marca-suave: var(--brand-100);
  --marca-tenue: var(--brand-050);
  --navy: var(--navy-800);
  --navy-profundo: var(--navy-900);
  --aero: var(--aero-600);
  --aero-fuerte: var(--aero-700);
  --aero-clara: var(--aero-500);
  --aero-tinta: var(--aero-900);
  --aero-suave: var(--aero-100);
  --aero-tenue: var(--aero-050);
  --dinero: var(--calido-500);
  --dinero-fuerte: var(--calido-600);
  --dinero-texto: var(--calido-700);
  --dinero-suave: var(--calido-100);
  --dinero-tenue: var(--calido-050);
  --ok: var(--ok-500);
  --ok-fuerte: var(--ok-600);
  --ok-texto: var(--ok-700);
  --ok-tenue: var(--ok-050);

  /* Radios */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --radio-etiqueta: 8px 8px 8px 2px;
  --radio-contador: 9px 9px 9px 3px;

  /* Medidas */
  --nav-h: 66px;
  --header-h: 58px;
  --boton-h: 50px;
  --boton-radio: 15px;
  --icon-btn: 44px;
  --chip-h: 44px;
  --etiqueta-h: 23px;
  --margen: 18px;
  --carrusel-item: 156px;
  --carrusel-item-ancho: 190px;
  --gap: 13px;

  /* Separación vertical
     La jerarquía es la diferencia entre dos separaciones, no una separación. */
  --espacio-pieza: 12px;
  --espacio-bloque: 22px;
  --espacio-seccion: 34px;
  --espacio-corte: 52px;

  /* Movimiento */
  --curva-transicion: cubic-bezier(0.32, 0.72, 0, 1);
  --curva-resorte: cubic-bezier(0.34, 1.46, 0.54, 1);
  --curva-presion: cubic-bezier(0.34, 1.3, 0.64, 1);
  --transicion-ms: 220ms;
  --transicion: var(--transicion-ms) var(--curva-transicion);
  --resorte-ms: 380ms;
  --resorte: var(--resorte-ms) var(--curva-resorte);
  --presion-ms: 150ms;
  --presion: var(--presion-ms) var(--curva-presion);

  /* Sombras
     Tintadas en navy: una sombra gris sobre azul se ve sucia. */
  --sombra-1: 0 1px 2px rgba(12, 32, 67,.05), 0 2px 8px -4px rgba(12, 32, 67,.10);
  --sombra-2: 0 2px 4px rgba(12, 32, 67,.05), 0 10px 24px -12px rgba(12, 32, 67,.22);
  --sombra-3: 0 12px 28px -8px rgba(12, 32, 67,.20), 0 32px 60px -20px rgba(12, 32, 67,.24);
  --sombra-cta: 0 4px 12px -2px rgba(31,111,208,.32), 0 12px 28px -10px rgba(12, 32, 67,.40);

  /* Degradados */
  --barrido: linear-gradient(135deg, #0C2043 0%, #16386E 48%, #2666B8 100%);
  --aerocuota: linear-gradient(135deg, #003D9B 0%, #0C56D0 52%, #1E6FF2 100%);
  --barrido-cta: linear-gradient(135deg, #12305E 0%, #1F6FD0 58%, #3B8AE8 100%);
  --filete: linear-gradient(90deg, #E3EAF3 0%, rgba(227,234,243,0) 100%);
  --veta: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  --foto-vacia: linear-gradient(135deg, #F5F8FC 0%, #EFF6FE 100%);

  /* Pesos de la fuente */
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Roles de tipografía
     Se aplican los cinco juntos, que es como están definidos en la app. */
  --tipo-h1-size: 25px;
  --tipo-h1-lh: 29.5px;
  --tipo-h1-ls: -0.7px;
  --tipo-h1-peso: 800;
  --tipo-h1-color: var(--texto);
  --tipo-h2-size: 18px;
  --tipo-h2-lh: 21.24px;
  --tipo-h2-ls: -0.5px;
  --tipo-h2-peso: 700;
  --tipo-h2-color: var(--texto);
  --tipo-h3-size: 15.5px;
  --tipo-h3-lh: 18.29px;
  --tipo-h3-ls: -0.43px;
  --tipo-h3-peso: 700;
  --tipo-h3-color: var(--texto);
  --tipo-cuerpo-size: 15px;
  --tipo-cuerpo-lh: 21.75px;
  --tipo-cuerpo-ls: -0.07px;
  --tipo-cuerpo-peso: 500;
  --tipo-cuerpo-color: var(--texto);
  --tipo-cuerpo-2-size: 14px;
  --tipo-cuerpo-2-lh: 20.3px;
  --tipo-cuerpo-2-ls: -0.07px;
  --tipo-cuerpo-2-peso: 500;
  --tipo-cuerpo-2-color: var(--texto-2);
  --tipo-chico-size: 12.5px;
  --tipo-chico-lh: 17.5px;
  --tipo-chico-ls: -0.06px;
  --tipo-chico-peso: 500;
  --tipo-chico-color: var(--texto-2);
  --tipo-etiqueta-size: 10.5px;
  --tipo-etiqueta-lh: 11.55px;
  --tipo-etiqueta-ls: 0.42px;
  --tipo-etiqueta-peso: 800;
  --tipo-etiqueta-caja: uppercase;
}