/* ═══════════════════════════════════════════════════════════════
   LOALVIC SPORTS — DESIGN TOKENS
   Identidad: blanco y negro con el verde de marca como único acento.
   Tipografía serif de alto contraste, en línea con el logotipo.
   Migración a Next.js: este archivo se convierte en tailwind.config.js
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ COLOR ═══════════════════════════════════════════════
     La web es esencialmente negra y blanca. El verde aparece
     solo en botones y detalles. Para cambiar el acento a otro
     color, basta con tocar --acento y sus dos variantes.       */

  --tinta:        #0B0B0C;   /* negro dominante */
  --tinta-suave:  #16171A;   /* negro elevado (tarjetas sobre negro) */
  --tinta-borde:  #26282D;   /* bordes sobre fondo negro */

  --blanco:       #FFFFFF;
  --hueso:        #F6F5F2;   /* blanco cálido para secciones claras */
  --hueso-alt:    #EDEBE6;

  --acento:       #1650D9;   /* azul LOALVIC — color de acento principal */
  --acento-alto:  #0F3CAB;   /* hover / variante profunda */
  --acento-suave: #E8EFFD;   /* fondos muy claros */
  --acento-vivo:  #2C6BFF;   /* destellos y degradados */

  /* ─── Texto ─────────────────────────────────────────────── */
  --texto:        #0B0B0C;
  --texto-medio:  #45474D;
  --suave:        #6B6E76;
  --tenue:        #9A9DA5;

  /* Sobre fondo negro */
  --sobre-negro:        rgba(255, 255, 255, 0.72);
  --sobre-negro-tenue:  rgba(255, 255, 255, 0.42);

  /* ─── Neutros heredados (compatibilidad) ────────────────── */
  --verde:        var(--acento);
  --verde-claro:  var(--acento-alto);
  --verde-suave:  var(--acento-suave);
  --verde-oscuro: #0A3220;
  --marino:       var(--tinta);
  --marino-claro: var(--tinta-suave);
  --marino-deep:  #000000;
  --oro:          var(--acento);
  --oro-claro:    var(--acento-alto);
  --oro-suave:    var(--acento-suave);
  --fondo:        var(--hueso);
  --fondo-alt:    var(--hueso-alt);
  --borde:        #DCDAD5;
  --borde-suave:  #E9E7E2;

  /* ─── Estado ────────────────────────────────────────────── */
  --error:        #B42318;
  --exito:        #0E4429;
  --aviso:        #B54708;

  /* ═══ TIPOGRAFÍA ══════════════════════════════════════════
     Display: serif de alto contraste, en la línea del logotipo.
     Texto:   sans neutra y muy legible.                        */
  --font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --t-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-2xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem);
  --t-3xl:  clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --t-4xl:  clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
  --t-hero: clamp(3rem, 1.8rem + 6vw, 8rem);

  /* Interletrado de las etiquetas pequeñas, como en el logotipo */
  --track-marca: 0.32em;

  /* ─── Espaciado ─────────────────────────────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;

  --seccion-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ─── Radios ────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ─── Sombras ───────────────────────────────────────────── */
  --sh-sm:  0 1px 2px rgba(11, 11, 12, 0.05);
  --sh-md:  0 6px 20px rgba(11, 11, 12, 0.07);
  --sh-lg:  0 16px 44px rgba(11, 11, 12, 0.10);
  --sh-xl:  0 30px 70px rgba(11, 11, 12, 0.16);
  --sh-oro: 0 8px 24px rgba(14, 68, 41, 0.22);

  /* ─── Layout ────────────────────────────────────────────── */
  --ancho-max:    1240px;
  --ancho-texto:  66ch;
  --header-h:     84px;

  /* ─── Movimiento ────────────────────────────────────────── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.18s;
  --dur:       0.32s;
  --dur-slow:  0.7s;

  /* ─── Capas ─────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   1000;
  --z-toast:   1100;
}

@media (max-width: 768px) {
  :root { --header-h: 68px; }
}