:root {
  /* ─── Colores Base ─── */
  --navy-base:      #0A1C40;
  --navy-dark:      #0E1630;
  --navy-deeper:    #070F24;
  --navy-mid:       #122045;

  /* ─── Acentos ─── */
  --blue-primary:   #2471E7;
  --blue-light:     #4D8EF0;
  --neon-green:     #6FFF93;
  --purple-glow:    #7B5CF0;
  --purple-soft:    rgba(123, 92, 240, 0.30);
  --gold-accent:    #C9A84C;

  /* ─── Texto ─── */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary:  rgba(255, 255, 255, 0.45);

  /* ─── Glassmorphism ─── */
  --glass-bg:       rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-border-h: rgba(255, 255, 255, 0.18);
  --glass-blur:     blur(16px);
  --glass-blur-lg:  blur(24px);

  /* ─── Gradientes ─── */
  --grad-cta:       linear-gradient(135deg, var(--blue-primary) 0%, var(--neon-green) 100%);
  --grad-cta-hover: linear-gradient(135deg, #3D87F5 0%, #88FFB0 100%);
  --grad-card:      linear-gradient(145deg, rgba(36,113,231,0.12) 0%, rgba(111,255,147,0.06) 100%);
  --grad-hero-glow: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(123,92,240,0.20) 0%, transparent 70%);
  --grad-section:   linear-gradient(180deg, var(--navy-base) 0%, var(--navy-dark) 100%);

  /* ─── Espaciado (múltiplos de 8px) ─── */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ─── Border Radius ─── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ─── Sombras ─── */
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 0 var(--glass-border) inset;
  --shadow-btn:    0 4px 20px rgba(36, 113, 231, 0.40);
  --shadow-btn-h:  0 6px 32px rgba(36, 113, 231, 0.60);
  --shadow-glow-g: 0 0 40px rgba(111, 255, 147, 0.20);

  /* ─── Transiciones ─── */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   160ms;
  --duration-mid:    220ms;
  --duration-slow:   360ms;

  /* ─── Tipografía ─── */
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  2rem;      /* 32px */
  --fs-4xl:  2.5rem;    /* 40px */
  --fs-5xl:  3.5rem;    /* 56px */
  --fs-6xl:  4.5rem;    /* 72px */
  --fs-7xl:  6rem;      /* 96px */
}