/*
 * DeFábrica Directo — tokens de diseño (versión 1, 6/10/2026)
 *
 * Fuente: imágenes de referencia de Biel (docs/diseno/referencias) y su especificación
 * (docs/evidencias/2026-10-06-especificacion-theme-biel.txt). La referencia gráfica manda.
 * Colores MEDIDOS con muestreo de píxeles; tamaños ESTIMADOS (las imágenes son generadas, no
 * capturas 1:1) que se calibran en la comparación visual con Playwright (especificación §59).
 * Detalle de cada medida, contrastes y diferencias entre referencias: docs/15-sistema-de-diseno.md.
 *
 * Contraste WCAG AA (decisión de Biel 6/10: «AA con ajuste mínimo»):
 *   --df-naranja con texto blanco o como color de texto da 3,15:1. Solo se usa así en texto
 *   grande (≥ 19 px en negrita: botones principales, precios) y en rellenos, iconos, estrellas,
 *   subrayados y bordes. Texto naranja pequeño, insignias con texto blanco, contadores, página
 *   activa y botones con texto pequeño usan --df-naranja-aa (4,82:1).
 */
:root {
  /* Marca — acento (rellenos medidos #FD5501…#FE6112; Home = #FD5B04 exacto) */
  --df-naranja: #FD5B04;
  --df-naranja-hover: #E95000;          /* especificación; no aparece en las imágenes */
  --df-naranja-aa: #C84702;             /* mismo tono, 4,82:1 sobre blanco y 4,53:1 sobre --df-fondo-suave */
  --df-naranja-aa-hover: #A93C02;       /* paso más oscuro para :hover de lo que usa --df-naranja-aa */
  --df-naranja-suave: #FFF1E8;          /* fondos de foco y selección; derivado */
  --df-naranja-precio: #FC5804;         /* precio grande de la ficha sobre --df-fondo-suave: 3,02:1 (el exacto da 2,96:1) */

  /* Descuentos */
  --df-descuento-tarjeta: var(--df-naranja-aa); /* «-20 %» en tarjetas (medido #FE5809; ajuste AA) */
  --df-descuento-ficha: #DF201E;                /* «-15 %» en la ficha (medido; 4,81:1) */

  /* Neutros */
  --df-antracita: #2D3134;              /* barra superior (medido; la especificación decía #25292C) */
  --df-texto-fuerte: #14181D;           /* H1, H2, títulos de filtros (medido #0A0E12…#131A21) */
  --df-texto: #202328;                  /* títulos de tarjeta y texto general (medido #20242B) */
  --df-texto-2: #6D7278;                /* marca, recuentos, descripciones (medido #6E737E…#7C8289; AA) */
  --df-blanco: #FFFFFF;
  --df-fondo-suave: #F7F8F9;            /* fondo de página en categoría y producto (medido) */
  --df-campo: #F5F7F8;                  /* fondo del buscador (medido) */
  --df-borde: #E6E8EB;
  --df-borde-suave: #EEEEEE;
  --df-borde-hover: #D5D9DE;            /* borde de tarjeta al pasar el ratón */
  --df-estrella-vacia: #D9DCE0;         /* estrella sin rellenar */

  /* Estados */
  --df-verde: #13833F;                  /* tono de la especificación (#159447) oscurecido a AA; medido #0E8410 en la ficha */

  /* Contenido de los banners de la Home (configurable por banner) */
  --df-banner-velo: #5E7992;            /* panel de texto de los banners de la derecha (medido) */

  /* Tipografía */
  --df-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --df-fuente-banner: "Barlow Condensed", "Arial Narrow", sans-serif; /* títulos de banners de la Home: elegida por comparación con 01 (6/10) */

  /* Escala de texto: proporciones de las referencias con un mínimo legible de 12 px (en las imágenes el texto
     pequeño sale a 11 px; docs/15, sección 3) */
  --df-t-barra: 0.75rem;                /* 12 px — barra superior */
  --df-t-menu: 0.8125rem;               /* 13 px — menú principal, acciones de la cabecera y buscador */
  --df-t-marca: 0.75rem;                /* 12 px — marca en mayúsculas */
  --df-t-tarjeta: 0.875rem;             /* 14 px — título de tarjeta (2 líneas máx.) */
  --df-t-pie: 0.75rem;                  /* 12 px — enlaces del pie */
  --df-t-cuerpo: 1rem;                  /* 16 px */
  --df-t-precio-tarjeta: 1.1875rem;     /* 19 px, negrita: texto grande AA con --df-naranja (≥ 18,7 px); 03: ≈ 1,15 × título */
  --df-t-precio-ficha: 2rem;            /* 32 px */
  --df-t-boton: 1.1875rem;              /* 19 px, negrita: texto blanco sobre --df-naranja */
  --df-t-h1-categoria: 2rem;            /* 32 px */
  --df-t-h1-producto: 1.75rem;          /* 28 px */
  --df-t-h2-seccion: 1.375rem;          /* 22 px */

  /* Medidas (estimadas con contenedor 1480 px) */
  --df-contenedor: 1480px;
  --df-margen: 24px;
  --df-alto-barra: 32px;
  --df-alto-cabecera: 72px;
  --df-alto-menu: 44px;
  --df-ancho-filtros: 248px;
  --df-hueco: 16px;
  --df-boton-carrito: 40px;             /* círculo de la tarjeta (03 y 04: 40 px) */
  --df-tarjeta-foto: 1 / 1;             /* foto de la tarjeta de producto: cuadrada como las fotos del catálogo (Biel, 9/10; docs/15, sección 8) */
  --df-entrada-foto: 16 / 9;            /* foto de la tarjeta de una entrada del blog (fotos de ambiente apaisadas) */
  --df-alto-boton: 48px;
  --df-radio: 8px;
  --df-radio-panel: 12px;
  --df-radio-pastilla: 999px;
  --df-sombra: 0 2px 10px rgba(20, 30, 40, 0.05);
}