/* =======================================================
   TEMA 1 — "Aqua Glass" (Banco Mexicano)
   Todos los valores específicos del tema viven aquí.
   Cambiar este archivo = cambiar de tema completo.
   ======================================================= */

:root {
  /* Paleta — Azul profundo con acento cyan (glassmorphism) */
  --color-bg-deep:        #050B1A;
  --color-bg-mid:         #0A1628;
  --color-bg-panel:       #0F2142;
  --color-brand:          #1E4D8B;
  --color-brand-bright:   #2E7DD7;
  --color-accent:         #4FC3F7;
  --color-accent-glow:    #7FD9FF;

  --color-text:           #FFFFFF;
  --color-text-muted:     #A7B8D1;
  --color-text-dim:       #6B7FA0;

  --color-success:        #4ADE80;
  --color-warning:        #FBBF24;
  --color-danger:         #F87171;

  /* Superficies glass */
  --glass-bg:             rgba(255, 255, 255, 0.06);
  --glass-bg-strong:      rgba(255, 255, 255, 0.10);
  --glass-border:         rgba(255, 255, 255, 0.14);
  --glass-border-strong:  rgba(255, 255, 255, 0.22);

  /* Gradientes */
  --grad-bg:              radial-gradient(ellipse at 30% 0%, #1E4D8B 0%, #0A1628 55%, #050B1A 100%);
  --grad-accent:          linear-gradient(135deg, #4FC3F7 0%, #2E7DD7 100%);
  --grad-orb:             radial-gradient(circle at 30% 30%, #7FD9FF, #2E7DD7 45%, #0F2142 100%);

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

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */

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

  /* Espaciado */
  --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;

  /* Radios */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Sombras y glows */
  --shadow-card:   0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-btn:    0 8px 20px rgba(46, 125, 215, 0.45);
  --glow-accent:   0 0 30px rgba(79, 195, 247, 0.55);
  --glow-strong:   0 0 60px rgba(79, 195, 247, 0.75);

  /* Blurs */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* Timings */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     600ms;

  /* Layout mobile (heredado del app) */
  --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:   1240px;
  --container-pad:   clamp(20px, 4vw, 48px);
  --section-pad-y:   clamp(64px, 10vw, 140px);
  --nav-height:      72px;
  --nav-height-sm:   60px;

  /* Tipografía fluida web */
  --fs-hero:    clamp(2.25rem, 6vw, 4.75rem);
  --fs-display: clamp(1.75rem, 4vw, 3rem);
  --fs-title:   clamp(1.375rem, 2.4vw, 2rem);
  --fs-body:    clamp(0.95rem, 1.05vw, 1.0625rem);

  --shadow-glass:  0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,.08);
}