/* tokens.css — ÚNICA fuente de color, tipografía y espaciado de la web de Malditas Locas.
   El rebranding (manual nuevo) re-viste la web cambiando sólo este archivo: estilos.css
   no tiene ni un color, tamaño de letra ni familia escritos a mano; todo sale de acá.

   LAGUNA: los hex exactos del monograma ML (negro, crema, dorado). Hoy son provisorios;
   se reemplazan cuando llegue el SVG del logo o el manual del rebranding. */

:root {
  /* — Paleta de marca (provisoria) — */
  --ml-negro: #151312;
  --ml-crema: #f4eee4;
  --ml-dorado: #b39062;

  /* — Derivados de la paleta — */
  --ml-crema-hondo: #e8e0d2;     /* superficies, cajas de espera */
  --ml-gris-tinta: #5c554d;      /* texto secundario: 6,4:1 sobre crema */
  --ml-linea: #cfc5b5;           /* filetes y bordes sin texto */

  /* — Roles: lo único que usa estilos.css — */
  --papel: var(--ml-crema);
  --tinta: var(--ml-negro);
  --tinta-suave: var(--ml-gris-tinta);
  --superficie: var(--ml-crema-hondo);
  --linea: var(--ml-linea);
  --placa: var(--ml-negro);          /* placa sólida para texto sobre foto */
  --placa-tinta: var(--ml-crema);    /* 16:1 sobre la placa */
  --boton: var(--ml-negro);
  --boton-tinta: var(--ml-crema);
  --deco: var(--ml-dorado);          /* dorado SOBRE CREMA = sólo decorativo (2,6:1, no llega a AA) */
  --deco-sobre-negro: var(--ml-dorado); /* sobre negro sí puede ser texto (6,3:1) */
  --foco: var(--ml-negro);
  --velo: color-mix(in srgb, var(--ml-negro) 55%, transparent); /* detrás de la ficha y del carrito */

  /* — Tipografía: una sola familia (provisoria, del sistema, 0 KB) —
     Cuando el rebranding defina la suya, se cambia --fuente (y se autohospeda en assets/fuentes/). */
  --fuente: Georgia, "Times New Roman", "Noto Serif", serif;
  --fuente-titulos: var(--fuente);
  --peso-normal: 400;
  --peso-fuerte: 700;
  --tracking-rotulo: 0.14em;
  --tracking-titulo: 0.04em;

  --texto-xs: 0.75rem;
  --texto-s: 0.875rem;
  --texto-m: 1rem;
  --texto-l: 1.25rem;
  --texto-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  --texto-hero: clamp(2.75rem, 1.4rem + 6.2vw, 6.5rem);
  --interlineado: 1.55;
  --interlineado-titulos: 1.05;

  /* — Espaciado (escala de 4 px) — */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --margen: clamp(1rem, 0.6rem + 2.2vw, 3rem);  /* margen lateral de página */
  --ancho-max: 90rem;

  /* — Medidas de interfaz — */
  --alto-barra: 3.5rem;
  --ancho-carrito: 28rem;
  --ancho-ficha: 72rem;
  --foto-linea: 4.5rem;    /* miniatura en el carrito */
  --tap: 2.75rem;          /* 44 px: área táctil mínima */
  --icono: 1.5rem;
  --trazo-icono: 1.5;
  --radio: 0;
  --filete: 1px;
  --duracion: 200ms;
}