/*
 * Tokens de marca de PIPOL.
 *
 * Salen del boceto aprobado el 2026-09-02. El sistema es blanco y negro: el
 * único elemento ornamental es el logotipo caligráfico. No agregar colores de
 * acento sin consultar.
 */

:root {
	/* Base */
	--pipol-tinta: #0b0b0b;
	--pipol-papel: #ffffff;
	--pipol-niebla: #f5f4f2;

	/* Grises */
	--pipol-gris: #6f6b68;
	--pipol-gris-tenue: #a5a09c;
	--pipol-gris-texto: #4a4644;
	--pipol-linea: #e5e2df;
	--pipol-linea-fuerte: #dcd8d5;
	--pipol-linea-control: #c9c4c0;

	/* Estado. Se usan poco y nunca como decoración. */
	--pipol-alerta: #b20000;

	/* Roles semánticos: usar estos en los componentes */
	--pipol-fondo: var(--pipol-papel);
	--pipol-fondo-suave: var(--pipol-niebla);
	--pipol-texto: var(--pipol-tinta);
	--pipol-texto-secundario: var(--pipol-gris);
	--pipol-borde: var(--pipol-linea);

	/* Tipografía */
	--pipol-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--pipol-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Radios. El boceto es de rectángulos de esquinas curvas. */
	--pipol-radio-sm: 14px;
	--pipol-radio: 20px;
	--pipol-radio-lg: 24px;
	--pipol-pastilla: 999px;

	/* Ritmo */
	--pipol-ancho: 1440px;
	--pipol-margen: 56px;
	--pipol-margen-movil: 16px;

	/* Alto mínimo de cualquier control tocable */
	--pipol-toque: 44px;

	/* Alto de la barra pegada. Fijo: si cambiara, la página saltaría. */
	--pipol-barra: 74px;
}

@media (max-width: 860px) {
	:root {
		--pipol-margen: var(--pipol-margen-movil);
	}
}

@media (min-width: 861px) {
	:root {
		--pipol-barra: 118px;
	}
}