/*
 * Tokens de AVAPE.
 *
 * Los contrastes están comprobados con la fórmula WCAG 2.1 y anotados al lado.
 * Ver avape-docs/BRIEF-VISUAL.md.
 *
 * Ojo con las unidades: el tema isida fija `html { font-size: 13px }` y construye
 * todo su layout en `em` sobre esa base. Cambiarla descoloca el tema entero, así
 * que aquí los tamaños van en píxeles y dentro de cada componente se usa `em`.
 */
:root {
	/* Color */
	--avape-morado: #7e2069;        /* campo de marca · blanco encima 9,14:1 · como tinta sobre blanco 9,14:1 */
	--avape-morado-hondo: #5e1850;  /* campo oscuro · blanco encima 12,19:1 */
	--avape-magenta: #c2186a;       /* acento · blanco encima 5,78:1 */
	--avape-magenta-hondo: #9e1356; /* hover del acento · blanco encima 7,83:1 */
	--avape-tinta-rosada: #fbeaf2;  /* texto secundario sobre magenta 5,0:1 (#f2d9e8 se queda en 4,37) */
	--avape-tinta: #1c1418;         /* texto sobre papel 16,53:1 */
	--avape-tinta-suave: #6b5f66;   /* texto secundario sobre papel 5,56:1 (sustituye al #8d989a, 2,96:1) */
	--avape-tinta-clara: #f2d9e8;   /* texto sobre morado 6,91:1 */
	--avape-papel: #f7f4f5;

	/* Tipografía: cinco pasos, ni uno más */
	--avape-menudo: 14px;
	--avape-texto: 17px;
	--avape-subtitulo: 24px;
	--avape-titulo: 38px;
	--avape-display: clamp(64px, 14vw, 150px);

	/* Ritmo */
	--avape-margen: 5vw;
	--avape-capitulo: clamp(48px, 5.5vw, 84px);   /* antes 72–128 px: la portada medía 9,5 pantallas */
}

/*
 * Un precio, una fecha o un rótulo son datos, no encabezados (§7.1.3 de la skill):
 * van en <p> o <div> y se estilan con tipografía.
 */
.avape-precio {
	font-family: "Josefin Sans", sans-serif;
	font-size: var(--avape-titulo);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--avape-morado);
	margin: 0 0 12px;
}