/* =======================================================
   TEMA 5 — "Pastel Aurora" (Banco Mexicano)
   Light nativo · gradientes aurora pastel · glassmorphism realista.
   Tipografía Space Grotesk + Inter.
   ======================================================= */

:root {
  /* ── Paleta base (capas claras) ── */
  --color-bg-deep:        #FAF8FF;   /* lavanda casi blanco — base del fondo */
  --color-bg-mid:         #F2EEFF;   /* capa de paneles */
  --color-bg-panel:       #EAE3FF;   /* superficie elevada (cards) */
  --color-bg-elev:        #FFFFFF;   /* superficie tope (modales) */

  /* ── Aurora pastel (acentos visibles) ── */
  --aurora-violet:        #C4B5FD;   /* lila pastel */
  --aurora-cyan:          #A5F3FC;   /* cian pastel */
  --aurora-magenta:       #FBCFE8;   /* rosa pastel */
  --aurora-indigo:        #C7D2FE;   /* indigo pastel */
  --aurora-teal:          #99F6E4;   /* teal pastel */

  /* Marca + acción (saturados para CTAs sobre claro) */
  --color-brand:          #8B5CF6;   /* violeta saturado */
  --color-brand-bright:   #A78BFA;
  --color-accent:         #06B6D4;   /* cian saturado */
  --color-accent-glow:    #22D3EE;

  /* ── Texto sobre claro ── */
  --color-text:           #1E1B4B;   /* indigo-navy profundo */
  --color-text-muted:     #5B5F7A;
  --color-text-dim:       #9598B5;
  --color-text-on-glass:  #1E1B4B;

  /* ── Estados ── */
  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-danger:         #EC4899;   /* magenta saturado, en armonía aurora */

  /* ── Glass (translúcidos sobre fondo claro) ── */
  --glass-bg:             rgba(255, 255, 255, 0.55);
  --glass-bg-mid:         rgba(255, 255, 255, 0.65);
  --glass-bg-strong:      rgba(255, 255, 255, 0.80);
  --glass-border:         rgba(255, 255, 255, 0.70);
  --glass-border-strong:  rgba(139, 92, 246, 0.22);
  --glass-tint-violet:    rgba(196, 181, 253, 0.18);
  --glass-tint-cyan:      rgba(165, 243, 252, 0.18);

  /* ── Gradientes aurora ── */
  --grad-aurora:          linear-gradient(135deg, #8B5CF6 0%, #06B6D4 50%, #EC4899 100%);
  --grad-aurora-soft:     linear-gradient(135deg, #C4B5FD 0%, #A5F3FC 50%, #FBCFE8 100%);
  --grad-cta:             linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  --grad-cta-cyan:        linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);
  --grad-cta-magenta:     linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  --grad-bg-deep:         linear-gradient(180deg, #FAF8FF 0%, #F2EEFF 100%);

  /* ── Tipografía ── */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:         'Space Grotesk', 'Inter', sans-serif;
  --font-mono:            'Space Grotesk', 'Inter', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm:  12px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Sombras + glows aurora (suaves, tintadas en violeta para no romper la luz) */
  --shadow-card:   0 18px 40px rgba(91, 33, 182, 0.10),
                   inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-elev:   0 28px 60px rgba(91, 33, 182, 0.16),
                   inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-btn:    0 10px 24px rgba(139, 92, 246, 0.30);
  --glow-violet:   0 0 24px rgba(139, 92, 246, 0.30);
  --glow-cyan:     0 0 24px rgba(6, 182, 212, 0.28);
  --glow-magenta:  0 0 24px rgba(236, 72, 153, 0.25);

  /* Blur (glassmorphism realista — punto de partida bajo) */
  --blur-sm: 6px;
  --blur-md: 10px;
  --blur-lg: 16px;
  --blur-xl: 24px;

  /* Easing & duración */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-aurora:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     600ms;

  /* App shell */
  --app-max-width: 480px;
  --app-min-width: 320px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ===== Layout web one-page ===== */
  --container-max:   1280px;
  --container-narrow: 920px;
  --container-pad:   clamp(20px, 4vw, 56px);
  --section-pad-y:   clamp(64px, 9vw, 120px);
  --nav-height:      72px;
  --nav-height-sm:   60px;

  /* Tipografía fluida */
  --fs-hero:    clamp(2.75rem, 7vw, 5.5rem);
  --fs-display: clamp(2rem, 5vw, 3.5rem);
  --fs-section: clamp(1.625rem, 3vw, 2.5rem);
  --fs-body:    clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-lead:    clamp(1rem, 1.4vw, 1.25rem);

  /* Stack cards */
  --stack-top:       calc(var(--nav-height) + 24px);
  --stack-card-h:    clamp(420px, 72vh, 640px);
}