/* ============================================================
   VARIABLES — Azure Luminary Design System
   Fuente: MOCAP/DESIGN.md + UI/UX Pro Max Skill
   Paleta: Midnight Azure × Turquoise accent
   Estilo: Dark Cinema Premium + Glassmorphism
   ============================================================ */

:root {
  /* ── Superficie tonal (capas de profundidad, sin líneas) ── */
  --clr-bg:           #0b1326;   /* Base de página — más oscuro */
  --clr-surface-low:  #0e1628;   /* Secciones alternas */
  --clr-surface:      #131b2e;   /* Cards base */
  --clr-surface-hi:   #1a2440;   /* Cards elevadas */
  --clr-surface-top:  #222d4a;   /* Nav / popups */
  --clr-surface-glass: rgba(19, 27, 46, 0.60); /* Glassmorphism */

  /* ── Colores de marca ── */
  --clr-primary:      #4dbee4;   /* Turquesa principal */
  --clr-primary-lt:   #73d9ff;   /* Hover / más claro */
  --clr-primary-dk:   #3aa8ce;   /* Pressed / más oscuro */
  --clr-secondary:    #0891b2;   /* Azure profundo */
  --clr-secondary-lt: #0ea5c9;   /* Container */

  /* ── Texto (sin blanco puro — regla MOCAP) ── */
  --clr-text:         #dae2fd;   /* Texto principal, blanco suave */
  --clr-text-muted:   #94a3b8;   /* Texto secundario */
  --clr-text-dim:     #64748b;   /* Captions / placeholders */
  --clr-on-primary:   #002535;   /* Texto sobre botones de acento */

  /* ── Semántica ── */
  --clr-error:        #f87171;
  --clr-error-bg:     rgba(248, 113, 113, 0.10);
  --clr-success:      #4dbee4;

  /* ── Gradientes ── */
  --gradient-cta:     linear-gradient(135deg, #4dbee4 0%, #0891b2 100%);
  --gradient-cta-rev: linear-gradient(135deg, #0891b2 0%, #4dbee4 100%);
  --gradient-hero-glow: radial-gradient(ellipse 65% 55% at 70% 45%, rgba(77,190,228,0.08) 0%, transparent 70%);
  --gradient-blob-1:  radial-gradient(circle, rgba(77,190,228,0.14) 0%, transparent 65%);
  --gradient-blob-2:  radial-gradient(circle, rgba(8,145,178,0.10) 0%, transparent 65%);
  --gradient-cta-bg:  linear-gradient(135deg, #0d2535 0%, #081c28 50%, #040f18 100%);

  /* ── Bordes (regla MOCAP: "felt, not seen") ── */
  --border-ghost:     rgba(255, 255, 255, 0.07);
  --border-soft:      rgba(255, 255, 255, 0.10);
  --border-accent:    rgba(77, 190, 228, 0.18);
  --border-accent-hi: rgba(77, 190, 228, 0.35);

  /* ── Espaciado (grilla de 8px) ── */
  --sp-1:  0.5rem;    /*  8px */
  --sp-2:  1rem;      /* 16px */
  --sp-3:  1.5rem;    /* 24px */
  --sp-4:  2rem;      /* 32px */
  --sp-5:  2.5rem;    /* 40px */
  --sp-6:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-10: 5rem;      /* 80px */
  --sp-12: 6rem;      /* 96px */
  --sp-16: 8rem;      /* 128px */

  /* ── Radios (Nivel 2 moderado — regla MOCAP) ── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-3xl:  48px;
  --radius-full: 9999px;

  /* ── Tipografía ── */
  --font:       'Plus Jakarta Sans', system-ui, -apple-system, 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:     1.875rem;   /* 30px */
  --fs-4xl:     2.25rem;    /* 36px */
  --fs-5xl:     3rem;       /* 48px */
  --fs-6xl:     3.75rem;    /* 60px */
  --fs-7xl:     4.5rem;     /* 72px */

  /* ── Animaciones (easing del skill) ── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);   /* Skill: entrada premium */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur:           220ms;
  --dur-mid:       400ms;
  --dur-slow:      600ms;

  /* ── Sombras tonales (nunca negro puro — regla MOCAP) ── */
  --shadow-sm:  0 2px 8px  rgba(5, 10, 25, 0.45);
  --shadow-md:  0 4px 24px rgba(5, 10, 25, 0.55);
  --shadow-lg:  0 8px 48px rgba(5, 10, 25, 0.65);
  --shadow-glow: 0 0 40px  rgba(77, 190, 228, 0.20);
  --shadow-glow-sm: 0 0 20px rgba(77, 190, 228, 0.15);

  /* ── Z-Index ── */
  --z-nav:    100;
  --z-overlay: 150;
  --z-float:  200;
}