/* ==========================================================================
   Wonder · Tokens de diseño
   Los colores están MEDIDOS sobre los píxeles de los comps aprobados con
   `comp-spec.mjs`, no estimados a ojo. El porcentaje indica la cobertura
   con que aparece cada tono en el comp donde se midió.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  /* Amarillo del logotipo: medido al 100% sobre wonder-logo-website.png.   */
  --wd-amarillo: #f8c808;
  /* Amarillo de interfaz: medido en la navegación y los CTA del comp.      */
  /* No coincide con el del logo. Pendiente de confirmar con el cliente si  */
  /* es intención o desviación de la compresión JPEG del comp.              */
  --wd-amarillo-ui: #f8b81b;
  --wd-amarillo-hover: #e5a70c;

  /* Navy: 24% del comp de home, 69% de la banda de navegación.            */
  --wd-navy: #082b3e;
  --wd-navy-medio: #1d4460;
  --wd-navy-suave: #3c596e;
  --wd-navy-hover: #0d3a52;

  /* Rojo promocional: 54% de la banda de ofertas.                          */
  --wd-rojo: #e40932;
  --wd-rojo-oscuro: #b80726;

  /* Teal: 8% del hero, tarjeta promocional secundaria.                     */
  --wd-teal: #26b6c2;
  --wd-teal-oscuro: #1a8c96;

  /* --- Superficies ------------------------------------------------------ */
  /* El comp mide un off-white (#f7f8f6, 71% de la superficie), pero el
     cliente pidió blanco puro como fondo de página.                        */
  --wd-fondo: #ffffff;
  --wd-superficie: #ffffff;
  /* Superficie hundida: el pozo donde se apoyan las fotos de producto, la
     franja de cabecera de las tablas y los estados hover. Conserva el
     off-white medido en el comp. Antes compartía token con el fondo de
     página, y al pasar este a blanco las fotos se quedaban sin separación
     del cuerpo de la tarjeta.                                              */
  --wd-pozo: #f4f6f5;
  /* Crema de la caja de precio, muestreada en la ficha de producto.        */
  --wd-crema: #faf5e9;
  --wd-crema-borde: #f0e6d0;

  /* --- Texto y bordes --------------------------------------------------- */
  --wd-texto: #0f2434;
  --wd-texto-medio: #55636e;
  --wd-texto-tenue: #8a959e;
  --wd-borde: #dfe4e7;
  --wd-borde-fuerte: #b9c0c6;

  /* --- Estado ----------------------------------------------------------- */
  --wd-exito: #12793f;
  --wd-exito-fondo: #eaf6ee;
  --wd-aviso: #9a6207;

  /* --- Tipografía -------------------------------------------------------- */
  /* DM Sans, por decisión del cliente.

     Contexto de la medición, que sigue siendo válido: los comps son
     miniaturas (512–684px de ancho) y el titular del hero mide 11,8px de
     altura de mayúscula, resolución a la que NO se puede identificar una
     familia tipográfica. `font-match` sí fijó con certeza el ancho normal,
     el peso 700 y el tracking ligeramente positivo, y situó el comp en la
     clase grotesca neo.

     DM Sans es geométrica, no grotesca neo: formas más circulares y de
     aspecto más amable. Se aparta de lo que sugería la huella del comp,
     pero acerca la interfaz al carácter redondeado del logotipo, que es una
     lectura defendible para una marca infantil. Queda anotado para que
     nadie lo tome después por un error de medición.

     Eje variable 400–700, así que los pesos 500 y 600 son reales y no
     sintetizados por el navegador. */
  --wd-fuente: "DM Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* El escalón más pequeño es de 12px, no de 11: por debajo de 12 el texto
     deja de ser legible en pantallas densas, y el detector lo marca con
     razón. Es la única corrección tipográfica que no viene del comp. */
  --wd-t-xs: 0.75rem;     /* 12px · etiquetas, marcas en versalitas */
  --wd-t-sm: 0.8125rem;   /* 13px · texto secundario, metadatos     */
  --wd-t-base: 0.9375rem; /* 15px · cuerpo                          */
  --wd-t-md: 1.0625rem;   /* 17px · títulos de tarjeta              */
  --wd-t-lg: 1.375rem;    /* 22px · títulos de sección              */
  --wd-t-xl: 1.75rem;     /* 28px · H1 de ficha                     */
  --wd-t-2xl: 2.25rem;    /* 36px · precio principal                */
  --wd-t-3xl: 2.75rem;    /* 44px · titular del hero                */

  /* NOTA sobre la jerarquía tipográfica.
     El detector de Impeccable marca los pasos 13 → 15 → 17 como demasiado
     próximos (ratio 1,3 frente al 1,25 que pide). Es una desviación
     DELIBERADA: el comp aprobado es una interfaz de retail densa, del tipo
     de las que ponen metadato, cuerpo y título de tarjeta a un escalón de
     distancia. Separar esos tamaños rompería la fidelidad al diseño que el
     cliente ya aprobó. La jerarquía real la sostienen el peso (400/700) y
     el color, no solo el tamaño. Revísese si aparece el archivo fuente. */

  --wd-peso-normal: 400;
  --wd-peso-medio: 500;
  --wd-peso-semi: 600;
  --wd-peso-bold: 700;

  /* --- Espaciado: escala de 4px ----------------------------------------- */
  --wd-e1: 0.25rem;
  --wd-e2: 0.5rem;
  --wd-e3: 0.75rem;
  --wd-e4: 1rem;
  --wd-e5: 1.25rem;
  --wd-e6: 1.5rem;
  --wd-e8: 2rem;
  --wd-e10: 2.5rem;
  --wd-e12: 3rem;
  --wd-e16: 4rem;

  /* --- Radios: medidos en el comp --------------------------------------- */
  --wd-r-sm: 4px;
  --wd-r: 8px;     /* botones, tarjetas        */
  --wd-r-md: 12px; /* caja de precio, paneles  */
  --wd-r-lg: 14px; /* hero y tarjetas promocionales, medido en el comp */
  --wd-r-full: 999px; /* chips, buscador       */

  /* --- Sombras: el comp casi no las usa. Contención deliberada. --------- */
  --wd-sombra-sutil: 0 1px 2px rgba(8, 43, 62, 0.06);
  --wd-sombra: 0 2px 8px rgba(8, 43, 62, 0.08);
  --wd-sombra-alta: 0 8px 24px rgba(8, 43, 62, 0.12);

  /* --- Disposición ------------------------------------------------------- */
  /* Altura común de los bloques de la barra superior: logotipo, buscador y
     accesos de cuenta. Estaban en 52, 48 y 50px, así que ninguno alineaba
     con los demás. Un solo mando para los tres.                             */
  --wd-alto-cabecera: 56px;
  --wd-ancho: 1280px;
  --wd-ancho-texto: 68ch;
}