/*
 * Puente entre lo que genera theme.json y los nombres cortos con los que está
 * escrito el CSS del proyecto.
 *
 * La paleta, la escala tipográfica y el espaciado se declaran una sola vez, en
 * theme/tokens.json, para que el editor los ofrezca en sus selectores. Aquí no
 * se repite ningún valor: solo se les da el alias con el que los llama el CSS
 * portado de la web estática, así que --ink sigue siendo --ink y ninguna hoja
 * de estilo tiene que escribir --wp--preset--color--contrast.
 *
 * Lo que sí lleva valor propio es lo que no es una decisión de quien edita: no
 * tiene sentido ofrecer en el editor el radio de una esquina, el color de una
 * línea divisoria o la altura de la cabecera.
 */

:root {
	/* Color: alias de la paleta del editor. */
	--ink: var(--wp--preset--color--contrast);
	--paper: var(--wp--preset--color--base);
	--surface: var(--wp--preset--color--surface);
	--blue: var(--wp--preset--color--accent-1);
	--blue-dark: var(--wp--preset--color--blue-dark);
	--cyan: var(--wp--preset--color--accent-2);
	--lime: var(--wp--preset--color--accent-3);
	--peach: var(--wp--preset--color--accent-4);
	--sky: var(--wp--preset--color--accent-5);
	--muted: var(--wp--preset--color--accent-6);

	/* Color estructural, fuera de la paleta. */
	--ink-soft: #344054;
	--surface-strong: #ffffff;
	--line: #e4e7ec;
	--line-dark: rgba(17, 24, 39, 0.16);
	--success: #176b49;
	--error: #b42318;

	/* Tipografía. */
	--font-sans: var(--wp--preset--font-family--sans);
	--font-editorial: var(--wp--preset--font-family--editorial);

	--step--1: var(--wp--preset--font-size--small);
	--step-0: var(--wp--preset--font-size--medium);
	--step-1: var(--wp--preset--font-size--large);
	--step-2: var(--wp--preset--font-size--x-large);
	--step-3: var(--wp--preset--font-size--xx-large);
	--step-4: var(--wp--preset--font-size--xxx-large);

	/* Medida y ritmo. */
	--content-max: 75rem;
	--reading-max: 43rem;
	--gutter: var(--wp--preset--spacing--50);
	--section-space: var(--wp--preset--spacing--80);
	--header-height: 4.75rem;

	/* Forma. */
	--radius-sm: 0.8rem;
	--radius-md: 1.15rem;
	--radius-lg: 1.5rem;
	--radius-xl: 2.25rem;
	--shadow-sm: 0 0.6rem 1.8rem rgba(16, 24, 40, 0.07);
	--shadow-lg: 0 1.5rem 4.5rem rgba(16, 24, 40, 0.12);
}