/* ═══════════════════════════════════════════════════════════════════
   TOMANA — TOKENS DE DISEÑO · v1 (identidad "Momento")
   Paleta: crema cálida / tinta casi negra / bermellón como señal.
   Tipografía: Newsreader (display) + Work Sans (texto), Google Fonts.
   Añade en el <head>:
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Work+Sans:wght@400;500;600&display=swap">
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* (10/10/2026) Se probó una condensada tipo adidas y se retiró: queda como alias. */
  --f-condensada: var(--f-display);

  /* ── COLOR ────────────────────────────────────────────────────────── */

  --c-fondo:          #ffffff;   /* blanco puro, como adidas (10/10/2026; antes #f4f9fc) */
  --c-superficie:     #ffffff;
  --c-superficie-alt: #e6f2fa;   /* franjas y bloques alternos */

  --c-tinta:          #0d2233;   /* 15.3:1 sobre el fondo */
  --c-tinta-suave:    #4a5d70;   /* 6.4:1 */
  --c-tinta-tenue:    #5a6b7a;   /* 5.2:1 — cumple AA, no solo al límite */

  /* El azul de marca puro (#0083bd) da 4.22:1 con texto blanco: NO cumple AA.
     Se reserva para gráficos y detalles (--c-marca) y se oscurece un punto
     para cualquier superficie que lleve texto encima.                      */
  --c-marca:          #0083bd;   /* el azul exacto del logo */
  --c-marca-honda:    #124a7a;   /* el trazo oscuro del logo */
  --c-acento:         #0075a8;   /* 5.1:1 con blanco — botones y enlaces */
  --c-acento-hover:   #124a7a;   /* 9.2:1 */
  --c-acento-texto:   #ffffff;

  --c-borde:          #d3e4ef;
  --c-borde-fuerte:   #a9c7dc;

  --c-exito:          #1c5c3d;
  --c-exito-fondo:    #e9f4ee;
  --c-error:          #98291a;
  --c-error-fondo:    #fbeeeb;
  --c-oferta:         #d6341f;   /* coral: 4.8:1 con blanco, contrasta con el azul */

  --c-realce:         rgba(13, 34, 51, 0.05);


  /* ── TIPOGRAFÍA ───────────────────────────────────────────────────── */

  --f-display: "Outfit", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-texto:   "Work Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-fuerte:  600;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --t-xl:   clamp(1.5rem, 1.4vw + 1.2rem, 2.25rem);
  --t-2xl:  clamp(2rem, 2.6vw + 1.35rem, 3.4rem);
  --t-3xl:  clamp(2.6rem, 4.4vw + 1.5rem, 5.25rem);

  --lh-apretado: 1.04;
  --lh-medio:    1.3;
  --lh-texto:    1.7;

  --track-display: -0.025em;
  --track-eyebrow:  0.18em;


  /* ── ESPACIADO ────────────────────────────────────────────────────── */

  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  3rem;
  --e-8:  4.5rem;
  --e-9:  7rem;
  --e-10: 9.5rem;

  --e-seccion: clamp(4.5rem, 9vw, 9rem);


  /* ── DISPOSICIÓN ──────────────────────────────────────────────────── */

  --ancho-caja:    1320px;
  --ancho-texto:   62ch;
  --gutter:        clamp(1.25rem, 5vw, 3.5rem);

  --rejilla-min:   clamp(250px, 26vw, 330px);
  --rejilla-hueco: clamp(1.25rem, 2.6vw, 2.75rem);


  /* ── FORMA ────────────────────────────────────────────────────────── */

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-full: 999px;

  --borde: 1px solid var(--c-borde);

  --sombra-sm: 0 1px 2px rgba(20, 18, 15, 0.04);
  --sombra-md: 0 10px 30px rgba(20, 18, 15, 0.06);
  --sombra-lg: 0 30px 70px rgba(20, 18, 15, 0.10);


  /* ── MOVIMIENTO ───────────────────────────────────────────────────── */

  --trans-rapida: 180ms cubic-bezier(.22, 1, .36, 1);
  --trans-media:  480ms cubic-bezier(.22, 1, .36, 1);


  /* ── PROPORCIÓN DE IMAGEN DE PRODUCTO ─────────────────────────────── */
  --ratio-producto: 1 / 1;   /* las fotos 1:1 actuales se conservan */
}

/* Sin modo oscuro por decisión de marca: la crema sostiene la foto de
   producto, que casi siempre viene sobre fondo blanco. Si más adelante se
   quiere, el bloque comentado del archivo original sigue siendo válido. */