/*
 * Fuentes y variables de diseño.
 *
 * El prototipo repetía los mismos hex literales en cientos de atributos `style`
 * inline. Aquí se declaran una vez y solo aquí: si el cliente cambia el rojo de
 * marca, se cambia en esta línea.
 *
 * Nota sobre los grises: hay dos escalas, una para fondos oscuros y otra para
 * fondos claros, porque el sitio alterna bandas negras y bandas claras. No son
 * intercambiables — un `--re-gris-40` sobre banda clara es ilegible.
 */

/* --- Tipografías auto-hospedadas ------------------------------------- */

@font-face {
	font-family: "Saira";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("../fonts/saira-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Saira";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("../fonts/saira-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* --- Variables --------------------------------------------------------- */

:root {
	/* Marca */
	--re-rojo: #e11b22;
	--re-rojo-oscuro: #b8141a;
	--re-rojo-claro: #ff4a4f;
	--re-rojo-suave: rgba(225, 27, 34, 0.16);

	/* Superficies */
	--re-negro: #0b0b0c;
	--re-superficie: #141416;
	--re-superficie-alta: #1c1c1f;
	--re-tinta: #17171a;
	--re-banda: #f4f4f5;
	--re-blanco: #ffffff;
	--re-placeholder: #e4e4e7;

	/* Texto sobre oscuro */
	--re-claro-100: #f5f4f2;
	--re-claro-90: #e6e5e2;
	--re-claro-80: #d7d6d4;
	--re-claro-60: #b9b9be;
	--re-claro-45: #9a9a9f;
	--re-claro-35: #8a8a90;
	--re-claro-25: #6e6e74;

	/* Texto sobre claro */
	--re-oscuro-100: #17171a;
	--re-oscuro-80: #3a3a3f;
	--re-oscuro-60: #5f5f65;
	--re-oscuro-50: #78787f;
	--re-oscuro-40: #8e8e96;
	--re-oscuro-30: #9c9ca4;

	/* Estado */
	--re-verde: #3e9e63;
	--re-verde-claro: #4be08c;
	--re-ambar: #b8801f;
	--re-whatsapp: #25d366;
	--re-whatsapp-oscuro: #1fbe5b;

	/* Filetes */
	--re-linea-oscura: rgba(255, 255, 255, 0.1);
	--re-linea-oscura-fuerte: rgba(255, 255, 255, 0.22);
	--re-linea-clara: rgba(0, 0, 0, 0.12);
	--re-linea-clara-fuerte: rgba(0, 0, 0, 0.25);

	/*
	 * Tinta por banda.
	 *
	 * Las dos escalas de arriba no son intercambiables, y decidir cuál toca con
	 * selectores de descendencia (`.re-banda--clara .lo-que-sea`) solo funciona
	 * mientras las bandas sean hermanas: en cuanto una se anida dentro de otra
	 * gana la de fuera, porque el selector de la de dentro no existe. Así se
	 * pintaba el titular de "Vende tu auto" en #17171a sobre fondo #0b0b0c.
	 *
	 * Estos roles se redefinen en cada banda (ver base.css) y los componentes
	 * consumen el rol, no el color. Como las custom properties heredan, gana
	 * siempre la banda más cercana, se anide como se anide y sin pelear
	 * especificidades.
	 *
	 * Los valores de aquí son los de banda oscura, que es el fondo por defecto
	 * del sitio: lo que quede fuera de toda banda —cabecera, pie, modales— sigue
	 * teniendo tinta válida.
	 *
	 * Son cuatro niveles de tinta y tres de superficie/filete. Al unificar, un
	 * puñado de componentes se mueve un escalón en la rampa de grises: los
	 * niveles estaban elegidos uno a uno y no coincidían del todo entre bandas.
	 * Es texto secundario en todos los casos y va a favor del contraste.
	 */
	--re-ink: var(--re-claro-100);
	--re-ink-suave: var(--re-claro-60);
	--re-ink-media: var(--re-claro-45);
	--re-ink-tenue: var(--re-claro-35);
	--re-linea: var(--re-linea-oscura);
	--re-linea-campo: var(--re-linea-oscura-fuerte);
	--re-ink-ok: var(--re-verde-claro);

	/* Superficies que también dependen de la banda. */
	--re-superficie-art: var(--re-superficie);
	--re-superficie-caja: var(--re-superficie);
	--re-superficie-tenue: rgba(255, 255, 255, 0.1);
	--re-badge-nuevo-fondo: rgba(37, 211, 102, 0.15);
	--re-badge-nuevo-ink: var(--re-verde-claro);
	--re-velo: rgba(11, 11, 12, 0.72);

	/* Tipografía */
	--re-titulo: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--re-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--re-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Retícula */
	--re-ancho: 1280px;
	--re-medianil: clamp(20px, 3.3vw, 48px);
	--re-seccion: clamp(72px, 9vw, 140px);
	--re-cabecera: 86px;

	/* Escalas tipográficas del prototipo */
	--re-h1: clamp(42px, 6.4vw, 92px);
	--re-h2: clamp(38px, 4.4vw, 62px);
	--re-h3: clamp(24px, 2.4vw, 34px);
	--re-cuerpo: 17px;

	/* Movimiento */
	--re-transicion: 0.2s ease;
}

/*
 * Quien prefiere menos movimiento no debería sufrir el marquee de marcas ni el
 * carrusel del hero. Se anula aquí, en la capa de tokens, para que valga en
 * todas las hojas sin repetir la media query.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--re-transicion: 0s;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}