/**
 * Tokens de Flavia Donatti.
 *
 * Los valores portados del design system del prototipo. La regla que gobierna
 * este archivo: NINGÚN color se escribe dos veces en el tema.
 *
 * Los diez colores que el editor de bloques ofrece viven en theme.json, que es
 * quien tiene el literal; aquí sólo se les pone el nombre con el que el CSS
 * portado los conoce. Los que el editor no ofrece —porque nadie los elegiría
 * de un selector: hovers, overlays, el rosa del badge— son literales aquí, y
 * aparecen exactamente una vez.
 *
 * Esta hoja se encola con dependencia del handle `global-styles` (ver
 * inc/assets.php). Sin esa dependencia el orden no está garantizado y los
 * alias resolverían a vacío.
 */

:root {
	/* ---------------------------------------------------------------
	   Rampa cruda
	   Los que theme.json declara se toman de ahí, no se repiten.
	   --------------------------------------------------------------- */

	--flv-ivory-50: var(--wp--preset--color--base);
	--flv-cream-100: var(--wp--preset--color--crema);
	--flv-ink-900: var(--wp--preset--color--tinta);
	--flv-espresso-900: var(--wp--preset--color--espresso);
	--flv-salmon-500: var(--wp--preset--color--salmon);
	--flv-salmon-700: var(--wp--preset--color--salmon-oscuro);
	--flv-mustard-500: var(--wp--preset--color--mostaza);
	--flv-sand-300: var(--wp--preset--color--arena);
	--flv-mud-500: var(--wp--preset--color--barro);
	--flv-line-200: var(--wp--preset--color--linea);

	/* Los que el editor no ofrece. Literales, una sola vez. */
	--flv-white: #FFFFFF;
	--flv-salmon-400: #EF8778;
	--flv-salmon-600: #C9503F;
	--flv-terracotta-500: #B85440;
	--flv-mustard-600: #C99A2E;
	--flv-burgundy-700: #6B1F1F;
	--flv-brown-800: #3B2418;
	--flv-sand-200: #E4D2B8;
	--flv-mud-300: #B8AA9C;

	/* Un barro más oscuro para texto pequeno. El mud-500 se queda en 3,75:1
	   sobre marfil y no pasa AA; este da 5,22:1. No es un color inventado:
	   es el que el prototipo ya usa en el "Disponible en:" de la tarjeta. */
	--flv-mud-600: #7A6255;
	--flv-mud-700: #5C453A;   /* talles disponibles en la tarjeta */

	/* El rojo de los antetitulos y del boton de la home. Medido en el
	   prototipo: no es el terracota ni el salmon 700, es un tono propio. */
	--flv-rojo-titulo: #8F2E20;

	/* Dos colores que el prototipo usa literalmente en el marcado y que no
	   pertenecen a la rampa: el rosa del badge y del bloque de newsletter, y
	   el gris cálido del pie. */
	--flv-rose-300: #F6BDB1;
	--flv-footer-bg: #F4F1ED;

	/* De la ficha de producto: el rojo del precio con Santander (el de la
	   marca del banco; a 24px en negrita pasa AA como texto grande) y el fondo
	   rosado del aviso del envío en el día. */
	--flv-santander: #EC0000;
	--flv-rose-50: #FDF1ED;

	/* ---------------------------------------------------------------
	   Alias semánticos
	   Vocabulario de componente, no de editor: `--flv-color-price` en
	   theme.json aparecería como "Precio" en un selector de color de
	   párrafo, que no es lo que significa.
	   --------------------------------------------------------------- */

	--flv-color-bg: var(--flv-ivory-50);
	--flv-color-bg-warm: var(--flv-cream-100);
	--flv-color-bg-inverse: var(--flv-espresso-900);
	--flv-color-surface: var(--flv-white);
	--flv-color-surface-warm: var(--flv-cream-100);

	--flv-color-text: var(--flv-ink-900);
	--flv-color-text-muted: var(--flv-mud-600);
	/* El 500 sólo para lo que no es texto: bordes, iconos, separadores. */
	--flv-color-decor-muted: var(--flv-mud-500);
	--flv-color-text-inverse: var(--flv-cream-100);

	--flv-color-border: var(--flv-line-200);
	--flv-color-border-strong: var(--flv-mud-300);

	--flv-color-accent: var(--flv-salmon-500);
	--flv-color-accent-hover: var(--flv-salmon-600);
	--flv-color-cta: var(--flv-mustard-500);
	--flv-color-cta-hover: var(--flv-mustard-600);

	/* El precio va en salmón oscuro y no en el salmón de marca: sobre crema,
	   el 500 no llega a 4,5:1 y el 700 da 7:1. */
	--flv-color-price: var(--flv-salmon-700);
	--flv-color-price-alt: var(--flv-burgundy-700);

	--flv-color-sale-badge-bg: var(--flv-rose-300);
	--flv-color-sale-badge-text: var(--flv-espresso-900);

	/* ---------------------------------------------------------------
	   Tipografía
	   --------------------------------------------------------------- */

	--flv-font-display: var(--wp--preset--font-family--display);
	--flv-font-serif: var(--wp--preset--font-family--display);
	--flv-font-sans: var(--wp--preset--font-family--sans);
	--flv-font-ui: var(--wp--preset--font-family--ui);

	/* Los cinco que theme.json expone se toman de ahí; los intermedios sólo
	   existen en CSS porque nadie los elige de un desplegable. */
	--flv-fs-xs: 12px;
	--flv-fs-sm: var(--wp--preset--font-size--sm);
	--flv-fs-base: var(--wp--preset--font-size--md);
	--flv-fs-md: 17px;
	--flv-fs-lg: var(--wp--preset--font-size--lg);
	--flv-fs-xl: 26px;
	--flv-fs-2xl: var(--wp--preset--font-size--xl);
	--flv-fs-3xl: 46px;
	--flv-fs-4xl: var(--wp--preset--font-size--display);
	--flv-fs-display: 96px;

	--flv-lh-tight: 1.1;
	--flv-lh-snug: 1.25;
	--flv-lh-normal: 1.5;
	--flv-lh-loose: 1.7;

	--flv-tracking-wide: 0.14em;
	--flv-tracking-normal: 0.02em;
	--flv-tracking-tight: -0.01em;

	--flv-fw-light: 300;
	--flv-fw-regular: 400;
	--flv-fw-medium: 500;
	--flv-fw-semibold: 600;
	--flv-fw-bold: 700;

	/* ---------------------------------------------------------------
	   Espaciado, contenedores y forma
	   --------------------------------------------------------------- */

	--flv-sp-0: 0;
	--flv-sp-1: 4px;
	--flv-sp-2: 8px;
	--flv-sp-3: var(--wp--preset--spacing--30);
	--flv-sp-4: var(--wp--preset--spacing--40);
	--flv-sp-5: var(--wp--preset--spacing--50);
	--flv-sp-6: var(--wp--preset--spacing--60);
	--flv-sp-7: var(--wp--preset--spacing--70);
	--flv-sp-8: var(--wp--preset--spacing--80);
	--flv-sp-9: 96px;
	--flv-sp-10: 128px;

	--flv-container-narrow: 720px;
	--flv-container: 1200px;
	--flv-container-wide: 1440px;

	/* Ancho del contenido del encabezado y del pie: los dos bordes del sitio
	   alinean con la misma medida. */
	--flv-ancho-sitio: 1400px;

	/* Margen lateral del contenido. El prototipo usa 20px en móvil y respira
	   más en pantallas grandes. */
	--flv-pad-x: clamp(16px, 4vw, 48px);

	--flv-radius-none: 0;
	--flv-radius-sm: 2px;
	--flv-radius-md: 4px;
	--flv-radius-lg: 8px;
	--flv-radius-pill: 999px;

	/* ---------------------------------------------------------------
	   Sombras, movimiento y capas
	   --------------------------------------------------------------- */

	--flv-shadow-xs: 0 1px 2px rgba(42, 24, 16, 0.06);
	--flv-shadow-sm: 0 2px 6px rgba(42, 24, 16, 0.08);
	--flv-shadow-md: 0 8px 24px rgba(42, 24, 16, 0.10);
	--flv-shadow-lg: 0 24px 60px rgba(42, 24, 16, 0.14);
	--flv-shadow-hairline: inset 0 0 0 1px var(--flv-line-200);

	--flv-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--flv-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
	--flv-dur-fast: 120ms;
	--flv-dur-base: 220ms;
	--flv-dur-slow: 420ms;

	--flv-overlay-warm: rgba(42, 24, 16, 0.55);
	--flv-overlay-caption: linear-gradient(180deg, transparent 40%, rgba(26, 18, 16, 0.55) 100%);

	--flv-z-header: 50;
	--flv-z-drawer: 80;
	--flv-z-overlay: 70;
}

/* Quien pida no animarse, no se anima. Afecta a los carruseles, al drawer y a
   los desplegables del mega menú. */
@media ( prefers-reduced-motion: reduce ) {
	:root {
		--flv-dur-fast: 0ms;
		--flv-dur-base: 0ms;
		--flv-dur-slow: 0ms;
	}
}