/* =====================================================
   tokens.css — Variables de diseño (Design Tokens)
   =====================================================
   PARA MODIFICAR EL DISEÑO GLOBAL:
   - Colores      → editar las variables de color
   - Tipografía   → cambiar --font-body, --font-display
   - Tamaños      → cambiar --fs-* (font sizes)
   - Espaciado    → cambiar --space-*
   ===================================================== */

:root {

  /* ── Fondos ─────────────────────────────── */
  --bg:          #070910;
  --bg-2:        #0B0E17;
  --bg-3:        #10141F;
  --bg-4:        #161C2C;

  /* ── Bordes ─────────────────────────────── */
  --line:        rgba(255,255,255,0.07);
  --line-b:      rgba(30,144,255,0.28);
  --line-c:      rgba(0,198,255,0.28);

  /* ── Azul Eléctrico (color principal) ───── */
  --blue:        #1E90FF;
  --blue-d:      #0A6FD8;
  --blue-l:      #5BB3FF;
  --blue-xl:     #A8D8FF;
  --glow:        rgba(30,144,255,0.32);
  --soft:        rgba(30,144,255,0.09);

  /* ── Cian (Unlock / Apertura Bandas) ────── */
  --cyan:        #00C6FF;
  --cyan-d:      #0099CC;
  --c-glow:      rgba(0,198,255,0.32);
  --c-soft:      rgba(0,198,255,0.09);

  /* ── Texto ───────────────────────────────── */
  --white:       #FFFFFF;
  --silver:      #C8D8EC;   /* más claro que antes → más legible */
  --muted:       #7A8FA8;   /* subido de tono para legibilidad    */
  --dim:         #2A3240;

  /* ── Semánticos ─────────────────────────── */
  --green:       #00E676;
  --amber:       #FFB300;
  --violet:      #7C5CFC;
  --red:         #FF4444;

  /* ── Fuentes ─────────────────────────────── */
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Tamaños de fuente — ESCALADOS ARRIBA ── */
  --fs-xs:   0.85rem;    /* 13.6px — labels pequeños  */
  --fs-sm:   0.975rem;   /* 15.6px — texto secundario */
  --fs-base: 1.125rem;   /* 18px   — cuerpo principal */
  --fs-md:   1.2rem;     /* 19.2px — body grande      */
  --fs-lg:   1.35rem;    /* 21.6px — subtítulos       */
  --fs-xl:   1.6rem;     /* 25.6px — títulos card     */
  --fs-2xl:  2rem;       /* 32px   — h3               */
  --fs-3xl:  2.6rem;     /* 41.6px — h2 sección       */
  --fs-hero: clamp(3.8rem, 9.5vw, 7.8rem);

  /* ── Interlineado (line-height) ─────────── */
  --lh-tight:  1.1;
  --lh-snug:   1.35;
  --lh-base:   1.75;
  --lh-loose:  1.9;

  /* ── Radios ──────────────────────────────── */
  --r-xs:  3px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-2xl: 34px;
  --r-full: 9999px;

  /* ── Espaciado ───────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  2.75rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* ── Layout ──────────────────────────────── */
  --max-w:   1160px;
  --pad-x:   1.75rem;
  --nav-h:   70px;
  --touch:   52px;

  /* ── Animaciones ────────────────────────── */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}