/**
 * AlfaBeta Eduentretenimiento S.A.S. - Guardianes del Mundo Digital
 * Sistema de Diseño y Tokens Globales — VERSIÓN LIGHT (CLARA)
 * Compatible 1:1 con Elementor (Versión Gratuita) y WordPress
 */

:root {
  /* ==========================================================================
     PALETA DE COLOR OFICIAL ALFABETA (Actualizada)
     Colores maestros: #4CA5BB, #5FD3E3, #B97599, #CD7EA7, #CF6C9E
     ========================================================================== */
  /* Cyan / Aqua Palette */
  --color-cyber-cyan: #4CA5BB;            /* Cyan base de alto contraste (#4CA5BB) */
  --color-cyber-cyan-bright: #5FD3E3;     /* Cyan brillante / aqua luminoso (#5FD3E3) */
  --color-cyber-cyan-rgb: 76, 165, 187;   /* RGB #4CA5BB */
  --color-cyber-cyan-bright-rgb: 95, 211, 227; /* RGB #5FD3E3 */
  --color-cyber-cyan-dark: #327C8E;       /* Cyan profundo accesible para texto WCAG AAA */
  --color-cyber-cyan-glow: rgba(95, 211, 227, 0.38);
  --color-cyber-cyan-soft: rgba(76, 165, 187, 0.09);

  /* Magenta / Rose Palette */
  --color-tech-magenta: #CF6C9E;          /* Magenta vibrante de acción (#CF6C9E) */
  --color-tech-magenta-bright: #CD7EA7;   /* Magenta suave / orquídea (#CD7EA7) */
  --color-tech-magenta-muted: #B97599;    /* Malva / rosa atenuado (#B97599) */
  --color-tech-magenta-rgb: 207, 108, 158; /* RGB #CF6C9E */
  --color-tech-magenta-bright-rgb: 205, 126, 167; /* RGB #CD7EA7 */
  --color-tech-magenta-muted-rgb: 185, 117, 153; /* RGB #B97599 */
  --color-tech-magenta-dark: #A44675;     /* Magenta profundo accesible para texto WCAG AAA */
  --color-tech-magenta-glow: rgba(207, 108, 158, 0.35);
  --color-tech-magenta-soft: rgba(207, 108, 158, 0.09);

  /* Gris Plata Líquido (estilo.png & colores.png) */
  --color-liquid-silver: #CBD5E1;
  --color-liquid-silver-rgb: 203, 213, 225;
  --color-liquid-silver-light: #F1F5F9;
  --color-liquid-silver-border: #CBD5E1;
  --color-liquid-silver-glow: rgba(203, 213, 225, 0.4);

  /* Fondos y Superficies de Modo Claro (Luminoso, Limpio, Sofisticado) */
  --color-bg-deep: #F8FAFC;               /* Fondo base claro */
  --color-bg-base: #FFFFFF;               /* Superficie blanca pura */
  --color-bg-surface: #FFFFFF;            /* Tarjetas y módulos */
  --color-bg-surface-elevated: #F1F5F9;   /* Capa de contraste suave */
  --color-bg-glass: rgba(255, 255, 255, 0.88);
  --color-bg-glass-light: rgba(255, 255, 255, 0.95);
  --color-bg-subtle: #F8FAFC;

  /* Tipografía y Textos de Alto Contraste (WCAG AAA) */
  --color-text-primary: #0F172A;          /* Slate ultra oscuro, máxima legibilidad */
  --color-text-secondary: #475569;        /* Slate intermedio para párrafos */
  --color-text-tertiary: #64748B;         /* Slate suave para metadatos y fuentes */
  --color-text-inverted: #FFFFFF;         /* Texto sobre botones oscuros/vibrantes */

  /* Bordes y Delimitadores */
  --color-border-subtle: #E2E8F0;
  --color-border-medium: #CBD5E1;
  --color-border-cyan: rgba(76, 165, 187, 0.38);
  --color-border-magenta: rgba(207, 108, 158, 0.35);

  /* Acentos de Métricas Estadísticas (Versiones Pasteles de los 5 Colores Originales) */
  --color-stat-internet: #4C8EEB;
  --color-stat-internet-track: #EBF3FD;
  --color-stat-internet-text: #2462B7;

  --color-stat-social: #8F75D0;
  --color-stat-social-track: #F3EFFC;
  --color-stat-social-text: #5E40A2;

  --color-stat-emotional: #E88C48;
  --color-stat-emotional-track: #FEF2E8;
  --color-stat-emotional-text: #A45119;

  --color-stat-concern: #42B68C;
  --color-stat-concern-track: #E8F8F2;
  --color-stat-concern-text: #1A7B56;

  --color-stat-alert: #E06666;
  --color-stat-alert-track: #FDEFEF;
  --color-stat-alert-text: #AE3232;
  --color-stat-alert-glow: rgba(224, 102, 102, 0.16);

  /* ==========================================================================
     TIPOGRAFÍA (fonts.png)
     ========================================================================== */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala Tipográfica Fluida (clamp) */
  --font-size-hero: clamp(2.25rem, 5vw + 0.8rem, 4.25rem);
  --font-size-h1: clamp(1.85rem, 3.5vw + 0.6rem, 3.25rem);
  --font-size-h2: clamp(1.5rem, 2.3vw + 0.5rem, 2.25rem);
  --font-size-h3: clamp(1.2rem, 1.5vw + 0.4rem, 1.65rem);
  --font-size-h4: clamp(1.05rem, 1.1vw + 0.3rem, 1.25rem);
  --font-size-body-large: clamp(1rem, 0.8vw + 0.5rem, 1.15rem);
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-micro: 0.75rem;

  /* Tracking & Leading */
  --tracking-tightest: -0.035em;
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.1em;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;

  /* ==========================================================================
     CABECERA Y HERO PADDING
     ========================================================================== */
  --header-height: 84px;
  --header-height-mobile: 72px;
  --hero-padding-top: calc(var(--header-height) + clamp(2.5rem, 4.5vw, 4.5rem));

  /* ==========================================================================
     ESPACIADO Y CONTENEDORES RESPONSIVE 100%
     ========================================================================== */
  --container-max-width: 1240px;
  --container-narrow-width: 920px;
  --container-wide-width: 1380px;
  --container-padding: clamp(1rem, 3vw, 2.5rem);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 5.5rem;
  --space-5xl: 7.5rem;

  /* ==========================================================================
     BORDES RADIADOS Y SOMBRAS LIGHT ELEVATION
     ========================================================================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  --shadow-subtle: 0 2px 10px rgba(15, 23, 42, 0.04);
  --shadow-medium: 0 10px 25px rgba(15, 23, 42, 0.07);
  --shadow-elevated: 0 20px 40px rgba(15, 23, 42, 0.1);
  --shadow-cyan-glow: 0 6px 25px rgba(76, 165, 187, 0.28);
  --shadow-magenta-glow: 0 6px 25px rgba(207, 108, 158, 0.28);

  /* Degradados de Identidad Pentacromática (#4CA5BB, #5FD3E3, #B97599, #CD7EA7, #CF6C9E) */
  --gradient-brand-spectrum: linear-gradient(90deg, #5FD3E3 0%, #4CA5BB 32%, #B97599 62%, #CD7EA7 82%, #CF6C9E 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(76, 165, 187, 0.12) 0%, rgba(185, 117, 153, 0.08) 50%, rgba(207, 108, 158, 0.1) 100%);

  /* ==========================================================================
     TRANSICIONES Y CURVAS BEZIER
     ========================================================================== */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1);
  
  --transition-fast: 0.2s var(--ease-quart-out);
  --transition-medium: 0.35s var(--ease-expo-out);
  --transition-slow: 0.6s var(--ease-expo-out);
}