/* ============================================================================
   tokens.css — HATHOR CrossFit · identidad REAL de marca
   Negro + blanco + VERDE LIMA (#90C018, del logo). El 80% del look vive aquí.
   ========================================================================== */
:root{
  /* ---- PALETA (marca real) ------------------------------------------------ */
  --bg:        #0a0b09;   /* negro casi puro                  */
  --surface:   #111310;   /* paneles                          */
  --surface-2: #171a14;   /* segundo nivel / hover            */
  --surface-3: #20241b;   /* borde iluminado                  */
  --text:      #f3f6ee;   /* blanco cálido                    */
  --muted:     #9aa38c;   /* texto secundario                 */
  --faint:     #666e5a;   /* terciario / captions             */
  --line:      rgba(144,192,24,.16);   /* hairline verde       */
  --line-2:    rgba(243,246,238,.08);  /* hairline neutro      */

  --accent:    #90c018;   /* VERDE LIMA HATHOR (marca)        */
  --accent-hi: #a9de2a;   /* verde claro (brillo/hover)       */
  --accent-lo: #6f9612;   /* verde oscuro (sombra/gradiente)  */
  --accent-2:  #cfe98a;   /* verde pálido (acentos suaves)    */
  --accent-ink:#0a0b09;   /* texto SOBRE el verde (AA)        */

  --footer-bg: #060704;
  --footer-text:#d6dbca;

  /* gradientes de marca */
  --grad-green: linear-gradient(103deg, #a9de2a 0%, #90c018 48%, #6f9612 100%);
  --grad-veil:  linear-gradient(180deg, rgba(10,11,9,0) 0%, rgba(10,11,9,.55) 55%, var(--bg) 100%);

  /* ---- TIPOGRAFÍA --------------------------------------------------------- */
  --font-display: "Oswald", "Anton", Impact, system-ui, sans-serif; /* atlético condensado */
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace; /* WOD / timer / labels */

  --fs-1000:clamp(3.2rem, 10.5vw, 9rem);  /* hero mega       */
  --fs-900: clamp(2.6rem, 6.2vw, 4.8rem); /* display         */
  --fs-800: clamp(2rem, 4.4vw, 3.2rem);   /* h2 sección      */
  --fs-700: clamp(1.4rem, 2.3vw, 1.85rem);/* h3              */
  --fs-600: 1.2rem;                        /* lead            */
  --fs-500: 1.0625rem;                     /* body            */
  --fs-400: .9375rem;                      /* small           */
  --fs-300: .8125rem;                      /* caption/label   */
  --lh-tight: .98;
  --lh-snug:  1.3;
  --lh-body:  1.68;
  --tracking-label: .24em;
  --tracking-display: .012em;
  --weight-display: 700;                   /* Oswald bold     */
  --weight-strong: 800;

  /* ---- ESPACIADO / RITMO -------------------------------------------------- */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem;  --space-6:4.5rem; --space-7:7rem; --space-8:10rem;
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* ---- FORMA -------------------------------------------------------------- */
  --radius-sm:6px; --radius:12px; --radius-lg:20px; --radius-pill:999px;
  --border:1px solid var(--line);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.6);
  --shadow:   0 22px 50px -26px rgba(0,0,0,.78);
  --shadow-lg:0 50px 90px -32px rgba(0,0,0,.82);
  --glow-green: 0 0 0 1px rgba(144,192,24,.35), 0 18px 60px -22px rgba(144,192,24,.4);

  /* ---- MOVIMIENTO --------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.76,0,.24,1);
  --dur-fast:.25s; --dur:.5s; --dur-slow:.85s;

  /* ---- CAPAS -------------------------------------------------------------- */
  --z-hero-media:0; --z-hero-canvas:1; --z-nav:50; --z-overlay:80; --z-modal:100;
}