/*
 * Tokens de MJÑOZ BEAUTY · flamecarehub (--fch-*) · E6 · 15/10/2026
 *
 * COPIA del sistema de diseño del tema de referencia (tokens.css del 15/10/2026): MISMOS colores,
 * letras, escala, espacios, radios, sombras, tiempos y tamaños táctiles. Solo cambia el prefijo (ahora --fch-)
 * y se han quitado las fichas de la tienda de referencia que aquí no sirven (colecciones, vidrios, categorías,
 * escaparate, pase, pictogramas CLP, cesta). Medidas y hex, en MALETIN-FLAMECAREHUB.COM/03-DISENO.md.
 *
 * Tres capas (de abajo arriba):
 *   1. Primitivos: el valor bruto (un color, una medida). Solo se usan DENTRO de este archivo.
 *   2. Semánticos: para qué sirve (fondo, texto, acción, error…). Es lo que usan las pantallas.
 *   3. De componente: botón, campo, tarjeta… Apuntan a los semánticos.
 * Zona oscura (el pie) = cambiar SOLO la capa 2.
 *
 * Reglas: sin !important y sin @layer (WoodMart carga su CSS sin capas). Ningún color ni medida a mano fuera
 * de este archivo (salvo los colores de producto, que llegan como dato: --muestra en el selector de color).
 * Cada cambio aquí sube FCH_TEMA_VERSION (functions.php) para que la caché no sirva lo viejo.
 */

/* ---------------------------------------------------------------------------
 * 0. Letras servidas desde el tema (OFL: licencias en assets/fonts/OFL-*.txt).
 * Variables (un archivo cubre todos los pesos) y solo latín. font-display: swap.
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: "Brygada 1918";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/brygada-1918-latin-wght-normal.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: "Brygada 1918";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/brygada-1918-latin-wght-italic.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: "Jost";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/jost-latin-wght-normal.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: "Jost";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/jost-latin-wght-italic.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;
}

/* Letras de reserva AJUSTADAS a Jost y a Brygada (mismo ancho medio y misma altura de línea): el texto no se
 * mueve cuando llega la letra de verdad. Mismos valores que el tema de referencia. */
@font-face {
	font-family: "Jost reserva";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
	size-adjust: 95.22%;
	ascent-override: 112.37%;
	descent-override: 39.38%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Brygada reserva";
	src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Times");
	size-adjust: 114.25%;
	ascent-override: 80.52%;
	descent-override: 21.88%;
	line-gap-override: 0%;
}

:root {
	color-scheme: light;

	/* =======================================================================
	 * 1. PRIMITIVOS — valores brutos. No usar fuera de este archivo.
	 * ==================================================================== */

	/* Cera: los blancos cálidos de la vela recién hecha. */
	--fch-cera-50: #fbf8f3;
	--fch-cera-100: #f4eee4;
	--fch-cera-200: #e8dfd1;
	--fch-cera-300: #d6c9b5;

	/* Piedra: grises cálidos para texto secundario y bordes de controles. */
	--fch-piedra-300: #bfb5a8;
	--fch-piedra-400: #978b7b;
	--fch-piedra-500: #857a6d;
	--fch-piedra-600: #5f574f;

	/* Pabilo: la mecha. El casi-negro de la marca. */
	--fch-pabilo-700: #3a332d;
	--fch-pabilo-800: #2a2521;
	--fch-pabilo-900: #1d1a17;
	--fch-noche-700: #3d3631;
	--fch-noche-900: #1f1b18;
	--fch-noche-950: #161311;

	--fch-blanco: #fff;

	/* Oro de llama. */
	--fch-oro-100: #f6ecd6;
	--fch-oro-300: #e2c27f;
	--fch-oro-500: #b8892e;
	--fch-oro-600: #9a7426;
	--fch-oro-700: #7a5a17;

	/* Estados. */
	--fch-romero-100: #e4eee7;
	--fch-romero-300: #8cc8a8;
	--fch-romero-700: #2f5a46;
	--fch-rojo-100: #fbeae8;
	--fch-rojo-300: #f0a39b;
	--fch-rojo-700: #b3261e;
	--fch-ambar-100: #fff3d6;
	--fch-ambar-300: #f2cf7a;
	--fch-ambar-800: #6b4a00;
	--fch-azul-100: #e7eef6;
	--fch-azul-300: #9cc3e8;
	--fch-azul-800: #1f4e79;

	/* Transparencias (sombras y velos), siempre sobre el pabilo. */
	--fch-pabilo-a06: rgb(29 26 23 / 6%);
	--fch-pabilo-a10: rgb(29 26 23 / 10%);
	--fch-pabilo-a18: rgb(29 26 23 / 18%);
	--fch-pabilo-a28: rgb(29 26 23 / 28%);
	--fch-pabilo-a52: rgb(29 26 23 / 52%);

	/* Marcas «[PENDIENTE…]»: se leen de día (11,9) y de noche (10,1). Sombras de las piezas recortadas. */
	--fch-pendiente-100: #fff3a8;
	--fch-pendiente-800: #4a3f00;
	--fch-pendiente-950: #3a2f00;
	--fch-tierra-a22: rgb(70 50 25 / 22%);
	--fch-negro-a35: rgb(0 0 0 / 35%);
	--fch-negro-a55: rgb(0 0 0 / 55%);
	--fch-blanco-a10: rgb(255 255 255 / 10%);

	/* =======================================================================
	 * 2. SEMÁNTICOS — tema claro (por defecto). Ratios medidos en 03-DISENO.md.
	 * ==================================================================== */

	--fch-color-fondo: var(--fch-cera-50);
	--fch-color-superficie: var(--fch-blanco);
	--fch-color-superficie-alt: var(--fch-cera-100);
	--fch-color-superficie-hundida: var(--fch-cera-200);
	--fch-color-texto: var(--fch-pabilo-900);               /* 16,35 sobre fondo */
	--fch-color-texto-suave: var(--fch-piedra-600);         /* 6,69 sobre fondo · 6,14 sobre superficie-alt */
	--fch-color-borde: var(--fch-cera-200);                 /* decorativo: separa, no informa */
	--fch-color-borde-fuerte: var(--fch-cera-300);
	--fch-color-borde-control: var(--fch-piedra-500);       /* 3,96 sobre fondo (≥ 3 para controles) */
	--fch-color-accion: var(--fch-pabilo-900);              /* botón principal */
	--fch-color-accion-hover: var(--fch-pabilo-700);
	--fch-color-accion-activa: var(--fch-pabilo-800);
	--fch-color-sobre-accion: var(--fch-cera-50);           /* 16,35 sobre acción · 11,72 sobre hover */
	--fch-color-enlace: var(--fch-pabilo-900);
	--fch-color-enlace-hover: var(--fch-oro-700);           /* 6,00 sobre fondo */
	--fch-color-subrayado: var(--fch-oro-500);              /* decorativo; el texto del enlace ya contrasta */
	--fch-color-acento: var(--fch-oro-700);                 /* texto dorado: 6,00 sobre fondo */
	--fch-color-acento-decor: var(--fch-oro-500);           /* filetes e iconos grandes: nunca texto */
	--fch-color-acento-fondo: var(--fch-oro-100);
	--fch-color-exito: var(--fch-romero-700);               /* 7,42 */
	--fch-color-exito-fondo: var(--fch-romero-100);
	--fch-color-error: var(--fch-rojo-700);                 /* 6,17 */
	--fch-color-error-fondo: var(--fch-rojo-100);
	--fch-color-atencion: var(--fch-ambar-800);             /* 7,61 */
	--fch-color-atencion-fondo: var(--fch-ambar-100);
	--fch-color-info: var(--fch-azul-800);                  /* 8,18 */
	--fch-color-info-fondo: var(--fch-azul-100);
	--fch-color-foco: var(--fch-pabilo-900);                /* anillo de foco: 16,35 sobre fondo */
	--fch-color-velo: var(--fch-pabilo-a52);                /* capa detrás de paneles */

	/* Ningún producto sobre blanco: toda foto de producto va sobre --fch-foto-fondo. */
	--fch-foto-fondo: linear-gradient(180deg, var(--fch-cera-50) 0%, var(--fch-cera-200) 100%);
	--fch-sombra-pieza: drop-shadow(0 1.125rem 0.875rem var(--fch-tierra-a22));
	--fch-pendiente-fondo: var(--fch-pendiente-100);   /* 11,9 con el texto de pendiente */
	--fch-pendiente-texto: var(--fch-pendiente-950);
	--fch-logo-filtro: none;

	/* Tipografía. */
	--fch-fuente-titulos: "Brygada 1918", "Brygada reserva", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--fch-fuente-texto: "Jost", "Jost reserva", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	--fch-peso-normal: 400;
	--fch-peso-medio: 500;
	--fch-peso-semi: 600;

	/* Escala: tercera mayor (1,25) en móvil que se abre hacia cuarta justa (1,333) en ordenador. Mínimo 16 px. */
	--fch-texto-xs: 1rem;                                      /* 16 px: lo más pequeño que se permite */
	--fch-texto-sm: 1rem;                                      /* 16 px */
	--fch-texto-base: 1.0625rem;                               /* 17 px: Jost tiene la «x» pequeña */
	--fch-texto-lg: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);      /* 19 → 21 */
	--fch-texto-xl: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);       /* 22 → 26 */
	--fch-texto-2xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);          /* 26 → 34 */
	--fch-texto-3xl: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);            /* 32 → 46 */
	--fch-texto-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);             /* 36 → 64 */
	--fch-interlineado-ajustado: 1.08;
	--fch-interlineado-titulo: 1.15;
	--fch-interlineado-compacto: 1.35;
	--fch-interlineado-texto: 1.6;
	--fch-tracking-titulo: -0.01em;
	--fch-tracking-boton: 0.02em;
	--fch-tracking-versal: 0.16em;
	--fch-tracking-marca: 0.34em;
	--fch-medida-texto: 68ch;
	--fch-medida-corta: 46ch;
	--fch-medida-titular: 14ch;
	--fch-medida-titular-ancha: 18ch;
	--fch-medida-pie-marca: 30ch;

	/* Espacios: base 4 px. */
	--fch-esp-px: 1px;
	--fch-esp-0-5: 0.125rem;
	--fch-esp-1: 0.25rem;
	--fch-esp-2: 0.5rem;
	--fch-esp-3: 0.75rem;
	--fch-esp-4: 1rem;
	--fch-esp-5: 1.25rem;
	--fch-esp-6: 1.5rem;
	--fch-esp-8: 2rem;
	--fch-esp-10: 2.5rem;
	--fch-esp-12: 3rem;
	--fch-esp-16: 4rem;
	--fch-esp-20: 5rem;
	--fch-esp-24: 6rem;
	--fch-esp-pagina: clamp(1rem, 0.6rem + 2.2vw, 2.5rem);     /* margen lateral: 16 → 40 */
	--fch-esp-seccion: clamp(3rem, 2.2rem + 3.6vw, 6rem);      /* entre secciones: 48 → 96 */
	--fch-esp-bloque: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);   /* dentro de una sección */
	--fch-esp-rejilla: clamp(0.75rem, 0.55rem + 1vw, 1.5rem);  /* hueco entre tarjetas */

	/* Maquetación. */
	--fch-ancho-max: 80rem;           /* 1280 px */
	--fch-ancho-lectura: 46rem;       /* 736 px: textos largos y formularios */
	--fch-ancho-estrecho: 36rem;
	--fch-ancho-panel: min(26rem, 92vw);
	--fch-ancho-lateral: 20rem;
	--fch-alto-barra-superior: 2.25rem;
	--fch-alto-cabecera-movil: 3.5rem;
	--fch-alto-cabecera: 5rem;
	--fch-alto-minimo-contenido: 50vh;
	--fch-alto-area-texto: 9rem;
	--fch-proporcion-cuadrada: 1;
	--fch-proporcion-hero: 4 / 5;
	--fch-proporcion-panoramica: 16 / 9;
	--fch-proporcion-vertical: 9 / 16;
	--fch-video-alto-movil: 70vh;     /* tope de alto del clip vertical en el móvil */
	--fch-rejilla-min: 16rem;
	--fch-miniatura: 4.5rem;          /* miniaturas de la galería */
	--fch-despiece-min: 40rem;        /* ancho mínimo de la lámina del despiece en el móvil (se desliza) */
	--fch-despiece-punto: 2rem;       /* número del despiece en el móvil (32 px; WCAG 2.5.8 pide 24) */
	--fch-boton-min: 9rem;            /* botones en fila del aviso de cookies */

	/* Bordes y radios. Pocos y pequeños: elegancia de etiqueta, no de aplicación. */
	--fch-borde-fino: 1px;
	--fch-borde-medio: 2px;
	--fch-borde-grueso: 3px;
	--fch-radio-xs: 2px;
	--fch-radio-sm: 4px;
	--fch-radio-md: 8px;
	--fch-radio-lg: 16px;
	--fch-radio-pildora: 999px;
	--fch-radio-arco: 999px 999px var(--fch-radio-sm) var(--fch-radio-sm); /* el arco del cirio */

	/* Sombras cálidas (sobre el pabilo, nunca negro puro). */
	--fch-sombra-1: 0 1px 2px var(--fch-pabilo-a06), 0 1px 1px var(--fch-pabilo-a06);
	--fch-sombra-2: 0 8px 24px -12px var(--fch-pabilo-a28), 0 2px 4px var(--fch-pabilo-a06);
	--fch-sombra-3: 0 24px 48px -16px var(--fch-pabilo-a28), 0 4px 12px var(--fch-pabilo-a10);

	/* Movimiento. Se apaga solo con prefers-reduced-motion (abajo). */
	--fch-dur-rapida: 120ms;
	--fch-dur-media: 220ms;
	--fch-dur-lenta: 420ms;
	--fch-curva-salida: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fch-curva-entrada: cubic-bezier(0.4, 0, 1, 1);
	--fch-desplazamiento-entrada: 0.5rem;
	--fch-desenfoque: 0.625rem;

	/* Capas (z-index). */
	--fch-z-base: 1;
	--fch-z-pegajoso: 20;
	--fch-z-cabecera: 30;
	--fch-z-aviso: 45;
	--fch-z-velo: 50;
	--fch-z-panel: 60;
	--fch-z-salto: 100;

	/* Tamaños táctiles e iconos (WCAG 2.5.8 y Apple: mínimo 44 px). */
	--fch-tactil-min: 2.75rem;        /* 44 px */
	--fch-control-alto: 3rem;         /* 48 px */
	--fch-control-alto-lg: 3.5rem;    /* 56 px */
	--fch-icono-xs: 0.875rem;
	--fch-icono-sm: 1.125rem;
	--fch-icono: 1.5rem;
	--fch-icono-lg: 2rem;
	--fch-icono-xl: 3rem;
	--fch-icono-trazo: 1.5;
	--fch-muestra: 1.75rem;           /* círculo de color dentro de un objetivo de 44 px */
	--fch-punto: 0.375rem;            /* punto dorado delante de cada garantía */
	--fch-opacidad-desactivado: 0.5;
	--fch-opacidad-decor: 0.35;
	--fch-subrayado-separacion: 0.2em;
	--fch-foco-ancho: var(--fch-borde-grueso);
	--fch-foco-separacion: var(--fch-borde-medio);

	/* Logo MJÑOZ BEAUTY (SVG trazado, una tinta: toma el color del texto). Alto en la cabecera y en el pie. */
	--fch-logo-alto: 1.75rem;
	--fch-logo-alto-lg: 2.25rem;
	--fch-logo-pie: 10rem;
}

/* ---------------------------------------------------------------------------
 * 3. DE COMPONENTE — apuntan a los semánticos.
 * Se declaran también en .fch-zona-oscura: una variable que apunta a otra se resuelve donde se declara.
 * ------------------------------------------------------------------------ */
:root,
.fch-zona-oscura {
	--fch-btn-alto: var(--fch-control-alto);
	--fch-btn-alto-sm: var(--fch-tactil-min);
	--fch-btn-alto-lg: var(--fch-control-alto-lg);
	--fch-btn-relleno-x: var(--fch-esp-6);
	--fch-btn-radio: var(--fch-radio-xs);
	--fch-btn-fuente: var(--fch-fuente-texto);
	--fch-btn-peso: var(--fch-peso-medio);
	--fch-btn-texto: var(--fch-texto-base);

	--fch-campo-alto: var(--fch-control-alto);
	--fch-campo-radio: var(--fch-radio-sm);
	--fch-campo-fondo: var(--fch-color-superficie);
	--fch-campo-borde: var(--fch-color-borde-control);
	--fch-campo-relleno-x: var(--fch-esp-4);
	--fch-check-lado: 1.375rem;

	--fch-tarjeta-fondo: var(--fch-color-superficie);
	--fch-tarjeta-radio: var(--fch-radio-md);
	--fch-tarjeta-relleno: var(--fch-esp-3);
	--fch-tarjeta-sombra: var(--fch-sombra-1);
	--fch-tarjeta-sombra-hover: var(--fch-sombra-2);

	--fch-sello-alto: 1.625rem;
	--fch-sello-texto: var(--fch-texto-xs);
	--fch-sello-radio: var(--fch-radio-xs);
}

/* ---------------------------------------------------------------------------
 * Zona oscura (el pie). Claro SIEMPRE por defecto. Solo se cambia la capa 2.
 * ------------------------------------------------------------------------ */
.fch-zona-oscura {
	color-scheme: dark;
	--fch-color-fondo: var(--fch-noche-950);
	--fch-color-superficie: var(--fch-noche-900);
	--fch-color-superficie-alt: var(--fch-pabilo-800);
	--fch-color-superficie-hundida: var(--fch-noche-700);
	--fch-color-texto: var(--fch-cera-100);                 /* 16,03 sobre fondo */
	--fch-color-texto-suave: var(--fch-piedra-300);         /* 9,15 */
	--fch-color-borde: var(--fch-noche-700);
	--fch-color-borde-fuerte: var(--fch-pabilo-700);
	--fch-color-borde-control: var(--fch-piedra-400);       /* 5,54 */
	--fch-color-accion: var(--fch-cera-100);
	--fch-color-accion-hover: var(--fch-cera-50);
	--fch-color-accion-activa: var(--fch-cera-200);
	--fch-color-sobre-accion: var(--fch-noche-950);         /* 16,03 */
	--fch-color-enlace: var(--fch-cera-100);
	--fch-color-enlace-hover: var(--fch-oro-300);           /* 10,80 */
	--fch-color-subrayado: var(--fch-oro-500);
	--fch-color-acento: var(--fch-oro-300);                 /* 10,80 */
	--fch-color-acento-decor: var(--fch-oro-500);
	--fch-color-acento-fondo: var(--fch-pabilo-800);
	--fch-color-foco: var(--fch-oro-300);
	--fch-pendiente-fondo: var(--fch-pendiente-800);   /* 10,1 */
	--fch-pendiente-texto: var(--fch-pendiente-100);
	--fch-foto-fondo: linear-gradient(180deg, var(--fch-pabilo-800) 0%, var(--fch-noche-950) 100%);
	--fch-sombra-pieza: drop-shadow(0 1.125rem 0.875rem var(--fch-negro-a55));
}

/* Movimiento reducido: todo lo que se mueve pasa a 0 ms (las transiciones usan estos tokens). */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fch-dur-rapida: 0ms;
		--fch-dur-media: 0ms;
		--fch-dur-lenta: 0ms;
		--fch-desplazamiento-entrada: 0;
	}
}