/* ==========================================================================
   VARIABLES CSS — Innova Theme
   Paleta futurista: azules eléctricos, dorado, degradados, efectos glow.
   ========================================================================== */

:root {
  /* --- Colores base (fondo oscuro profundo) --- */
  --color-bg:           #050510;
  --color-bg-elevated:  #0A0A1A;
  --color-bg-card:      #0D0D20;
  --color-surface:      #111128;
  --color-border:       #1A1A3E;
  --color-border-light: #2A2A5E;

  /* --- Texto --- */
  --color-text:         #F0F0FF;
  --color-text-muted:   #A0A0CC;
  --color-text-dim:     #6A6A99;

  /* --- Acento primario: azul eléctrico --- */
  --color-accent:       #0088FF;
  --color-accent-hover: #339DFF;
  --color-accent-dim:   rgba(0, 136, 255, 0.12);
  --color-accent-muted: rgba(0, 136, 255, 0.4);
  --color-accent-light: #00BFFF;

  /* --- Acento secundario: dorado --- */
  --color-gold:         #FFB800;
  --color-gold-hover:   #FFCC40;
  --color-gold-dim:     rgba(255, 184, 0, 0.12);
  --color-gold-muted:   rgba(255, 184, 0, 0.4);

  /* --- Gradientes --- */
  --gradient-hero:      linear-gradient(135deg, #050510 0%, #0A1628 40%, #0D0D20 100%);
  --gradient-accent:    linear-gradient(135deg, #0066FF 0%, #00BFFF 100%);
  --gradient-gold:      linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
  --gradient-mixed:     linear-gradient(135deg, #0066FF 0%, #00BFFF 50%, #FFB800 100%);
  --gradient-card:      linear-gradient(145deg, #0D0D20 0%, #111135 100%);
  --gradient-border:    linear-gradient(135deg, #0066FF, #00BFFF, #FFB800);
  --gradient-text:      linear-gradient(135deg, #0088FF 0%, #00BFFF 40%, #FFB800 100%);
  --gradient-section:   linear-gradient(180deg, transparent 0%, rgba(0, 102, 255, 0.03) 50%, transparent 100%);
  --gradient-radial:    radial-gradient(ellipse at 50% 0%, rgba(0, 136, 255, 0.08) 0%, transparent 60%);

  /* --- Estados --- */
  --color-error:        #FF4466;
  --color-success:      #00DD88;
  --color-white:        #FFFFFF;

  /* --- Tipografía ---
   * Todo el sitio usa Geist: limpia, moderna, legible.
   * Diferenciación por peso: Medium (500) para headings, Regular (400) para body.
   */
  --font-heading:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'Geist Mono', 'SF Mono', 'Fira Code', monospace;

  /* Tamaños (clamp para fluidez) */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm:    clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-xl:    clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-3xl:   clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --text-4xl:   clamp(2.5rem, 2rem + 2vw, 4rem);
  --text-5xl:   clamp(3rem, 2.2rem + 3vw, 5rem);

  /* Pesos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Interlineado */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* --- Espaciado --- */
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  --section-pad: clamp(4rem, 3rem + 4vw, 8rem);

  /* --- Layout --- */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-wide:   1400px;
  --nav-height:       72px;

  /* --- Bordes --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* --- Transiciones --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Sombras y glows --- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6);
  --glow-blue:    0 0 20px rgba(0, 136, 255, 0.3);
  --glow-blue-lg: 0 0 40px rgba(0, 136, 255, 0.2), 0 0 80px rgba(0, 136, 255, 0.1);
  --glow-gold:    0 0 20px rgba(255, 184, 0, 0.3);
  --glow-gold-lg: 0 0 40px rgba(255, 184, 0, 0.2);

  /* --- Z-index --- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-nav:       300;
  --z-overlay:   400;
  --z-modal:     500;
}