/* SPACE — SPORTS & LIVE EXPERIENCES
   tokens.css · v1
   UNICO archivo del sitio donde puede aparecer un valor hexadecimal.
   Solo custom properties en :root. Cero selectores de elemento, cero clases.
   Los valores marcados [medido] salen del material de marca y NO se cambian. */

:root{

  /* 1. COLOR — paleta cruda (SPEC §2) */

  /* Negros */
  /* SUELO LEVANTADO (2026-08-19). Los medidos del PDF de marca eran
     #050505 y #090909, pero con esos la pagina entera media 17-31 de
     luminancia frente a los 66 del sitio anterior de SPACE: negro absoluto
     de arriba abajo. Se sube el suelo conservando el tono frio de la marca.
     Los medidos originales quedan anotados por si hay que volver. */
  --ink:        #0C0F11;  /* [ajustado] fondo de pagina — medido era #050505 */
  --ink-2:      #12161A;  /* [ajustado] paneles, nav — medido era #090909 */
  --ink-3:      #1A1F23;  /* [derivado] tarjetas, bordes de bloque */
  --ink-4:      #242B31;  /* [derivado] hover de superficie */

  /* Teal — el ADN de SPACE, H=191 grados */
  --teal-950:   #06191D;  /* [medido] */
  --teal-900:   #0A272C;  /* [medido] */
  --teal-800:   #0F434D;  /* [medido] */
  --teal-700:   #0F6073;  /* [medido] tono dominante del cierre */
  --teal-600:   #166474;  /* [medido] nav activo */
  --teal-500:   #1B8AA3;  /* [derivado] */
  --teal-400:   #22A9C6;  /* [derivado] ACENTO PRINCIPAL de interfaz */
  --teal-300:   #4FC6DE;  /* [derivado] hover / foco */
  --mist:       #71AABB;  /* [medido] texto secundario sobre oscuro */

  /* Neutros */
  --paper:      #FFFFFF;
  --paper-dim:  #C9D3D6;  /* [derivado] cuerpo de texto sobre negro */
  --paper-mute: #8A9498;  /* [derivado] metadatos, labels */
  --line:       #2E353A;  /* [derivado] hairlines */
  /* Superficies CLARAS (pie). El sitio necesitaba al menos una zona clara:
     con todo en negro la pagina media 17-38 de luminancia frente a los 66
     del sitio anterior de SPACE. */
  --paper-2:    #F1F4F5;  /* [derivado] fondo suave sobre blanco */
  --paper-3:    #E8EDEF;  /* [derivado] superficie sobre blanco */
  --ink-text:   #3A4348;  /* [derivado] texto sobre blanco, 10.1:1 */
  --ink-mute:   #5F6C72;  /* [derivado] secundario sobre blanco, 5.4:1 */
  --line-light: #CFD8DB;  /* [derivado] hairline sobre blanco */

  --line-2:     #616B6F;  /* [derivado] borde de campo: 3.73:1 sobre --ink y 3.1:1
                             sobre la caja. WCAG 1.4.11 pide 3:1 para el contorno
                             de un control; el #333B3E anterior daba 1.78:1 */

  /* 2. COLOR — alias semanticos
   Los componentes NUNCA usan la paleta cruda: usan estos alias, para que
   `.section--light` (base.css) invierta el tema remapeando solo esto. */
  --bg:             var(--ink);
  --bg-2:           var(--ink-2);
  --surface:        var(--ink-3);
  --surface-hover:  var(--ink-4);
  --fg:             var(--paper);
  --fg-dim:         var(--paper-dim);
  --fg-mute:        var(--paper-mute);
  --fg-soft:        var(--mist);
  --accent:         var(--teal-400);
  --accent-hi:      var(--teal-300);
  --accent-deep:    var(--teal-700);
  --accent-bg:      var(--teal-800);
  --accent-bg-deep: var(--teal-950);
  --hairline:       var(--line);
  --field-border:   var(--line-2);
  --focus:          var(--teal-400);
  /* La marca no tiene rojo y no se inventa: el error se marca en --paper
     (blanco puro) y el exito en --accent. Ver DESIGN.md. */
  --alert:          var(--paper);
  --ok:             var(--teal-400);

  /* 3. TIPOGRAFIA (SPEC §3) */
  --ff-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --ff-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Pesos ESTATICOS. Prohibido animar el peso o cualquier eje variable. */
  --fw-black:   800;
  --fw-bold:    700;
  --fw-semi:    600;
  --fw-med:     500;
  --fw-reg:     400;

  /* Escala fluida, base 16px, viewport 360 -> 1920 */
  --fs-mega:  clamp(2.75rem, 6.6vw, 6.25rem);  /* medido: a 11vw el titular
                                                  del hero rompia en 4 lineas
                                                  y empujaba el CTA fuera de pantalla */
  --fs-h1:    clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2:    clamp(1.75rem, 3.2vw, 3rem);
  --fs-h3:    clamp(1.25rem, 1.8vw, 1.75rem);
  --fs-lead:  clamp(1.05rem, 1.35vw, 1.375rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  /* Cifra de dato (.stat__num): mas grande que h1 pero acotada en movil */
  --fs-stat:  clamp(3rem, 7.5vw, 6.5rem);
  /* Numero de indice (01-05) */
  --fs-index: clamp(0.875rem, 1.1vw, 1.0625rem);

  --lh-mega:  0.92;
  --lh-h1:    1.02;
  --lh-h2:    1.06;
  --lh-h3:    1.2;
  --lh-lead:  1.45;
  --lh-body:  1.55;
  --lh-flat:  1;

  --tr-mega:  -0.03em;
  --tr-h:     -0.02em;
  --tr-h3:    -0.01em;
  --tr-cta:   0.12em;
  --tr-label: 0.22em;
  --tr-nav:   0.12em;

  --measure:    58ch;   /* nunca un parrafo a todo el ancho */
  --measure-sm: 46ch;

  /* 4. ESPACIADO Y LAYOUT */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --gap:             clamp(1rem, 2.4vw, 2rem);
  --gap-lg:          clamp(2rem, 5vw, 5rem);
  --gutter:          clamp(1.25rem, 4vw, 3.5rem);
  --section-y:       clamp(4.5rem, 9vw, 9.5rem);
  --section-y-tight: clamp(3rem, 5vw, 5rem);

  --wrap:        1440px;
  --wrap-wide:   1760px;
  --wrap-narrow: 980px;

  --nav-h:       96px;
  --nav-h-stuck: 64px;
  --brand-w:     clamp(140px, 16vw, 210px);
  --brand-w-m:   180px;   /* marca centrada en movil, medida a 390px */
  --logo-h-m:    56px;    /* a 34px el lockup vertical no se leia en movil */
  --brand-w-d:   clamp(190px, 18vw, 280px);  /* marca de escritorio */
  --logo-h-d:    clamp(52px, 5.2vw, 84px);   /* a 58px quedaba pequena */

  /* 5. GEOMETRIA — "THE CUT" (SPEC §4)
   Arista medida del hero: (665,790)->(900,105) en 1400x790 = 19 grados
   respecto de la vertical. */
  --cut-deg:   19deg;
  --cut-tan:   0.3443;                      /* tan(19deg) */
  --cut-sec:   1.0576;                      /* 1/cos(19deg) — largo de la hairline */
  --cut-x:     clamp(2.5rem, 9vw, 9.5rem);  /* desplazamiento horizontal por defecto */
  --cut-y:     8vw;        /* < 768px el corte pasa a horizontal */
  --cut-deg-m: 4.57deg;    /* atan(8vw/100vw) — hairline del corte movil */
  --cut-p:     0;          /* progreso 0..1 del hero-cut, lo escribe motion.js */
  --notch:     calc(var(--brand-w) * 0.5 * var(--cut-tan)); /* punta del nav__brand */

  /* 6. TRAZOS, RADIOS Y VELOS
   Sin sombras de color. Sin glow. (SPEC §5.1) */
  --bw:       1px;
  --bw-btn:   1.5px;
  --bw-thick: 2px;

  --r-0:     0;
  --r-1:     2px;
  --r-2:     6px;
  --r-pill:  999px;
  --r-round: 50%;

  --mask-op:       0.06;  /* opacidad maxima del isotipo decorativo */
  --scrim-op:      0.62;  /* velo oscuro sobre fotografia */
  --scrim-op-soft: 0.42;

  /* 7. MOVIMIENTO (SPEC §5.5) */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-cut: cubic-bezier(.65,.05,.36,1);

  --d-micro: 150ms;   /* micro-interacciones 150-250ms */
  --d-fast:  200ms;
  --d-mid:   250ms;
  --d-in:    600ms;   /* entradas 500-700ms */
  --d-slow:  700ms;
  --d-draw:  1200ms;  /* stroke-dashoffset del trazo de telemetria */

  --stagger:     60ms; /* escalonado: maximo 6 elementos por grupo */
  --marquee-dur: 42s;

  /* 8. Z-INDEX — escala unica */
  --z-under:   -1;
  --z-base:     0;
  --z-media:    1;
  --z-content:  2;
  --z-sticky:  50;
  --z-nav:    100;
  --z-drawer: 200;
  --z-top:    300;
  --z-skip:   400;
}