/* ============================================
   01-VARIABLES.CSS — Design Tokens
   Cambiar aquí afecta toda la web
   ============================================ */

:root {
  /* === PALETA AZUL CORPORATE ===
     #0d1b2a (azul muy oscuro / casi negro)
     #1b3a5c (navy)
     #5a8fc4 (azul claro / cielo)
     #000 (negro)
     #fff (blanco)
  */
  --c-bg:           #0d1b2a;
  --c-bg-deep:      #07111c;
  --c-bg-soft:      #11243a;
  --c-surface:      #152e48;

  --c-white:        #ffffff;
  --c-white-soft:   #f0f4f8;
  --c-muted:        #98a8bd;
  --c-muted-deep:   #5b6c83;

  /* Alias para retrocompatibilidad (las usaba el código viejo) */
  --c-blue:         #5a8fc4;   /* azul claro / acento */
  --c-blue-deep:    #1b3a5c;   /* navy / acento profundo */
  --c-blue-glow:    #88b3de;   /* glow más claro para highlights */
  --c-blue-soft:    #2a4d7a;   /* azul medio */

  --c-purple:       var(--c-blue);
  --c-purple-deep:  var(--c-blue-deep);
  --c-purple-glow:  var(--c-blue-glow);
  --c-purple-soft:  var(--c-blue-soft);

  --c-border:       rgba(90, 143, 196, 0.25);
  --c-border-soft:  rgba(90, 143, 196, 0.12);

  /* === GRADIENTES === */
  --g-purple:   linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-deep) 100%);
  --g-blue:     linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-deep) 100%);
  --g-glow:     radial-gradient(circle at 50% 50%, rgba(90, 143, 196, 0.35) 0%, transparent 70%);
  --g-vignette: radial-gradient(ellipse at center, transparent 40%, var(--c-bg-deep) 100%);

  /* === TIPOGRAFÍA === */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body:    "Geist", -apple-system, sans-serif;
  --f-mono:    "Geist Mono", "JetBrains Mono", monospace;

  --fs-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --fs-md:   clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-lg:   clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-xl:   clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-hero: clamp(2.8rem, 2rem + 4.5vw, 6.5rem);
  --fs-display: clamp(2.2rem, 1.6rem + 3vw, 4.5rem);

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;
  --tracking-tight: -0.02em;

  /* === ESPACIADO === */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4.5rem;
  --sp-12: 6rem;
  --sp-16: 8rem;
  --sp-20: 11rem;

  /* === LAYOUT === */
  --maxw-content: 1280px;
  --maxw-narrow:  720px;
  --pad-page:     clamp(1.25rem, 2vw + 0.5rem, 3rem);

  /* === RADIOS === */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* === EASING === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;
  --dur-epic:  1000ms;

  /* === SOMBRAS === */
  --shadow-glow:    0 0 60px -10px rgba(90, 143, 196, 0.45);
  --shadow-card:    0 12px 40px -8px rgba(7, 17, 28, 0.7);
  --shadow-button:  0 4px 20px -4px rgba(90, 143, 196, 0.5);

  /* === Z-INDEX === */
  --z-bg:      0;
  --z-base:    1;
  --z-content: 10;
  --z-top:     20;
  --z-nav:     50;
  --z-loader:  100;
}