/* Akento · tokens del sistema de diseño.
   Fuente medida: akento-v2/estilos.css (:root y @font-face) y §4 de
   docs/especificacion.md. Nada de valores inventados: si falta un token, se
   mide en el prototipo antes de añadirlo.

   Breakpoints (CSS plano, no hay custom properties para media queries):
     1600  centrar la cabecera y titulares grandes
     1150  contenedor 64px, rejillas a dos columnas, secciones 85px
      900  oculta ayuda de cabecera, tipografía menor
      760  móvil: una columna, menú hamburguesa, cabecera 68px
      360  ajustes finos (contenedor 32px)
   El tema no tiene breakpoint propio de tableta: 900 y 760 cubren 768. */

@font-face {
  font-family: Roxborough;
  src: url('../fuentes/roxborough-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Roxborough;
  src: url('../fuentes/roxborough-cursiva.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Neulis;
  src: url('../fuentes/neulis-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Neulis;
  src: url('../fuentes/neulis-medium.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}

:root {
  /* Color */
  --rojo: #951937;
  --marfil: #fffafa;
  --rosa: #f2e3e3;
  --negro: #050c18;
  --gris: #37383e;
  --linea: rgba(149, 25, 55, .2);
  --calma: #3788ff; /* estado «camino» de Mi cuenta */

  /* Tipografía */
  --serif: Roxborough, Georgia, serif;
  --sans: Neulis, Arial, sans-serif;
  --texto: 16px;
  --interlinea: 1.6;
  --titulo: 52px;
  --titulo-pagina: clamp(42px, 4.1vw, 62px);
  --interletra-titulo: -1.8px;
  --ceja: 11px;

  /* Espaciado y rejilla */
  --contenedor: min(1280px, calc(100% - 112px));
  --seccion: 110px;
  --esp-xs: 8px;
  --esp-s: 16px;
  --esp-m: 24px;
  --esp-l: 40px;
  --esp-xl: 72px;

  /* Radios, sombras y bordes */
  --radio: 0; /* esquinas rectas en superficies, tarjetas y botones */
  --radio-circulo: 50%;
  --radio-pastilla: 28px;
  --borde: 1px solid var(--linea);
  --sombra-compra: 0 -5px 25px rgba(5, 12, 24, .05);
  --velo: rgba(5, 12, 24, .45);

  /* Movimiento */
  --transicion: .2s;
  --transicion-foto: .7s;
  --curva-foto: cubic-bezier(.2, .8, .2, 1);

  /* Foco accesible */
  --foco: 2px solid var(--rojo);
  --foco-offset: 5px;
}