/**
 * Tokens de diseño del checkout y del área de cliente. Handle 'fanor-premium-tokens'.
 *
 * Es la capa que traduce esos dos widgets al lenguaje visual de Fanor: rojo sobre blanco,
 * la condensada del sitio en mayúsculas para la estructura y la de texto para el contenido. Los valores
 * NO son inventados: salen de medir el sitio (botón de tarjeta, títulos de resultados, pie de
 * página, cajón del carrito) y del diseño que la tienda ya tenía hecho a mano para el carrito
 * —conservado en `docs/diseno-heredado/`—.
 *
 * Va aparte de `tokens.css` (variables `--fn-*`, widgets de producto) porque son dos sistemas
 * con historias distintas y mezclarlos obligaría a tocar los dos cada vez. Aquí manda el
 * prefijo `--fnp-`.
 *
 * Los controles de color de cada widget ESCRIBEN sobre estas variables vía
 * `selector { --fanor-ck-acento: {{VALUE}} }`; no dupliques reglas de color.
 */

:root {
	/* ── Paleta ───────────────────────────────────────────────────────────────
	   El rojo es la marca y es también el color de la acción: en Fanor el botón de
	   comprar, el precio final y el enlace destructivo son el mismo rojo, y quien
	   navega ya lo lee así en el catálogo. No se inventa aquí un segundo acento. */
	--fnp-tinta: #1A1A1A;        /* Texto principal y botón oscuro */
	--fnp-tinta-hover: #333333;  /* Hover del botón oscuro */
	--fnp-crema: #FFFFFF;        /* Fondo de superficie principal */
	--fnp-hueso: #F7F7F7;        /* Fondo tenue: filas, chips, hover de ícono */
	--fnp-linea: #E5E5E5;        /* Bordes de 1px */

	/* El acento conserva los nombres `oro*` de los archivos que lo consumen. Renombrarlos
	   habría tocado ~200 sitios entre dos hojas y los `selectors` de dos widgets, para
	   ganar solo el nombre; se cambia el VALOR, que es lo que se ve. */
	--fnp-oro: #CC0000;          /* Acento principal: CTA, precio final, badges */
	--fnp-oro-osc: #A80000;      /* Hover del acento y texto rojo sobre claro */
	--fnp-oro-clr: #E01B1B;      /* Acento claro: bordes activos, íconos decorativos */
	--fnp-oro-pale: #FDECEC;     /* Fondo de pastillas y opciones elegidas */
	--fnp-oro-halo: rgba(204, 0, 0, .16); /* Halo de foco (respaldo sin color-mix) */

	--fnp-gris: #666666;         /* Texto secundario */
	--fnp-gris-2: #888888;       /* Texto terciario / metadatos */
	--fnp-gris-3: #9E9E9E;       /* Placeholder */
	--fnp-verde: #2E7D32;        /* Éxito: envío gratis, cupón aplicado */
	--fnp-rojo: #CC0000;         /* Eliminar / destructivo (el mismo rojo, por sistema) */
	--fnp-rojo-bg: #FDECEC;      /* Fondo hover de eliminar */
	--fnp-track: #ECECEC;        /* Riel de la barra de progreso */

	/* Grises neutros de detalle. */
	--fnp-tinta-precio: #1A1A1A; /* Precio grande */
	--fnp-hueso-2: #F0F0F0;      /* Fondo de miniatura activa */
	--fnp-hueso-3: #F2F2F2;      /* Fondo de pastilla secundaria */
	--fnp-txt-2: #444444;        /* Etiquetas de campo */
	--fnp-txt-3: #666666;        /* Metadatos, migas, conteos */
	--fnp-txt-4: #888888;        /* Nota de IVA, opción sin elegir */
	--fnp-txt-5: #9E9E9E;        /* Divisa junto al precio */
	--fnp-tachado: #BDBDBD;      /* Precio regular tachado */
	--fnp-sep: #C7C7C7;          /* Separador «›» de las migas */
	--fnp-ambar: #D4820A;        /* Stock bajo */
	--fnp-oferta: #CC0000;       /* Badge de oferta */
	--fnp-agotado: #B0B0B0;
	--fnp-agotado-2: #CFCFCF;
	--fnp-estrella-off: #DDDDDD;
	--fnp-manija: #DDDDDD;

	/* ── Tipografía ───────────────────────────────────────────────────────────
	   Dos familias, tres papeles. La condensada en mayúsculas construye la
	   ESTRUCTURA (títulos, encabezados de bloque, botones, etiquetas) y la de texto
	   lleva el CONTENIDO (nombres de producto, importes, campos, texto corrido). El
	   checkout no estrena tipografía: la hereda del resto del sitio.

	   Los valores vienen de `fuentes.css` (`--fanor-font-*`), el único sitio donde
	   se decide la letra del plugin; aquí solo se reparten los papeles. */
	--fnp-font-display: var(--fanor-font-display, 'Madiffy Sans Bold Condensed', sans-serif);
	--fnp-font-ui: var(--fanor-font-display, 'Madiffy Sans Bold Condensed', sans-serif);
	--fnp-font-body: var(--fanor-font-body, 'Manrope', system-ui, sans-serif);

	/* ── Curvas de animación ─────────────────────────────────────────────── */
	--fnp-e-out: cubic-bezier(.22, 1, .36, 1);    /* Entradas de UI, drawers, escalas */
	--fnp-e-quint: cubic-bezier(.23, 1, .32, 1);  /* Paneles grandes, altura y blur */
	--fnp-e-soft: ease;                            /* Micro-transiciones de color/opacidad */
	--fnp-e-sheet: cubic-bezier(.32, .72, 0, 1);   /* Paneles que entran desde un borde */

	/* ── Radios ───────────────────────────────────────────────────────────────
	   Fanor redondea POCO. El botón de las tarjetas del catálogo va a 3px y el del
	   cajón del carrito a 6px; nada en la tienda llega a las esquinas blandas de 14–16px
	   que traía el sistema de origen, y dejarlas habría delatado el injerto. */
	--fnp-r-sm: 3px;    /* botones pequeños, chips */
	--fnp-r-md: 4px;    /* CTA, campos, ítems de lista */
	--fnp-r-lg: 6px;    /* botones de ícono, miniaturas */
	--fnp-r-xl: 8px;    /* paneles */
	--fnp-r-2xl: 8px;   /* tarjetas grandes */
	--fnp-r-pill: 99px; /* badges */

	/* ── Sombras ──────────────────────────────────────────────────────────────
	   Discretas: la tienda separa con BORDE, no con sombra. La única que pesa es la
	   del cajón, que sí flota sobre la página. */
	--fnp-sh-dropdown: 0 12px 32px rgba(0, 0, 0, .12);
	--fnp-sh-panel: 0 2px 10px rgba(26, 26, 26, .06);
	--fnp-sh-drawer: -12px 0 54px rgba(26, 26, 26, .18);

	/* ── Contenedor ───────────────────────────────────────────────────────────
	   80rem es el ancho del header y del pie del sitio; el checkout se alinea con
	   ellos. El padding va POR FUERA de esa medida (ver `.fanor-ck`), así que el
	   contenido cae exactamente sobre la misma columna. */
	--fnp-max: 80rem;
	--fnp-pad-x: 24px;

	/* ── Capas (z-index) ──────────────────────────────────────────────────── */
	--fnp-z-panel: 30;
	--fnp-z-scrim: 40;
	--fnp-z-encima: 44;
	--fnp-z-drop: 45;
	--fnp-z-lightbox: 200;
	--fnp-z-drawer: 310;
	--fnp-z-modal: 380;
	--fnp-z-modal-caja: 381;
	--fnp-z-toast: 400;
}