/**
 * Variables CSS - Sistema de Diseño ViaWeb
 * 
 * Este archivo contiene todas las variables CSS que definen
 * el sistema de diseño del sitio. Modificar estos valores
 * afectará globalmente el aspecto visual.
 * 
 * @package ViaWeb
 */

:root {
  /* ==========================================
     COLORES BASE DEL LOGO
     ========================================== */
  
  --color-primary: #00AEE7;           /* Cyan principal */
  --color-primary-dark: #00679A;      /* Azul oscuro 1 */
  --color-primary-darker: #005A82;    /* Azul oscuro 2 */
  --color-primary-darkest: #004D75;   /* Azul más oscuro */
  --color-accent: #06D2FE;            /* Cyan brillante/neón */
  --color-neutral: #E0E0E0;           /* Gris neutro */
  
  
  /* ==========================================
     COLORES EXTENDIDOS
     ========================================== */
  
  /* Blancos y negros */
  --color-white: #FFFFFF;
  --color-black: #1A1A1A;
  
  /* Escala de grises */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F8F9FA;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-400: #CED4DA;
  --color-gray-500: #ADB5BD;
  --color-gray-600: #6B6B6B;
  --color-gray-700: #495057;
  --color-gray-800: #343A40;
  --color-gray-900: #212529;
  
  /* Colores de estado */
  --color-success: #28A745;
  --color-success-light: #D4EDDA;
  --color-warning: #FFC107;
  --color-warning-light: #FFF3CD;
  --color-error: #DC3545;
  --color-error-light: #F8D7DA;
  --color-info: #17A2B8;
  --color-info-light: #D1ECF1;
  
  /* Colores de fondo */
  --color-background: #FFFFFF;
  --color-background-alt: #F8F9FA;
  --color-background-dark: #1A1A1A;
  
  /* Colores de texto */
  --color-text: #1A1A1A;
  --color-text-light: #6B6B6B;
  --color-text-lighter: #ADB5BD;
  --color-text-inverse: #FFFFFF;
  
  /* Colores de borde */
  --color-border: #E0E0E0;
  --color-border-light: #F0F0F0;
  --color-border-dark: #CED4DA;
  
  
  /* ==========================================
     TIPOGRAFÍA - FAMILIAS
     ========================================== */
  
  --font-heading: 'Saira', sans-serif;          /* Títulos principales */
  --font-body: 'Ubuntu', sans-serif;            /* Cuerpo de texto */
  --font-accent: 'Montserrat', sans-serif;      /* Texto destacado */
  --font-ui: 'Inter', sans-serif;               /* UI elements (botones, labels) */
  --font-mono: 'JetBrains Mono', monospace;     /* Código */
  
  
  /* ==========================================
     TIPOGRAFÍA - TAMAÑOS
     ========================================== */
  
  /* Headings (títulos) */
  --text-h1: clamp(2.5rem, 5vw, 3.5rem);    /* 40-56px */
  --text-h2: clamp(2rem, 4vw, 2.5rem);      /* 32-40px */
  --text-h3: clamp(1.75rem, 3vw, 2rem);     /* 28-32px */
  --text-h4: 1.5rem;                        /* 24px */
  --text-h5: 1.25rem;                       /* 20px */
  --text-h6: 1.125rem;                      /* 18px */
  
  /* Párrafos y cuerpo */
  --text-body-xl: 1.25rem;                  /* 20px - Intro/destacado */
  --text-body-lg: 1.125rem;                 /* 18px - Párrafo grande */
  --text-body: 1rem;                        /* 16px - Párrafo normal */
  --text-body-sm: 0.875rem;                 /* 14px - Párrafo pequeño */
  --text-body-xs: 0.75rem;                  /* 12px - Texto muy pequeño */
  
  /* UI elements */
  --text-button: 1rem;                      /* 16px */
  --text-button-sm: 0.875rem;               /* 14px */
  --text-label: 0.875rem;                   /* 14px */
  --text-caption: 0.75rem;                  /* 12px */
  
  
  /* ==========================================
     TIPOGRAFÍA - PESOS
     ========================================== */
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  
  /* ==========================================
     TIPOGRAFÍA - LINE HEIGHT
     ========================================== */
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  
  /* ==========================================
     TIPOGRAFÍA - LETTER SPACING
     ========================================== */
  
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  
  
  /* ==========================================
     ESPACIADO
     ========================================== */
  
  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 2rem;        /* 32px */
  --space-lg: 4rem;        /* 64px */
  --space-xl: 6rem;        /* 96px */
  --space-2xl: 8rem;       /* 128px */
  --space-3xl: 10rem;      /* 160px */
  
  
  /* ==========================================
     LAYOUT
     ========================================== */
  
  /* Contenedores */
  --container-max: 1200px;
  --container-max-wide: 1400px;
  --container-max-narrow: 900px;
  --container-padding: 1.5rem;
  
  /* Grid */
  --grid-gap: 2rem;
  --grid-gap-sm: 1rem;
  --grid-gap-lg: 3rem;
  
  /* Sections */
  --section-padding-y: 5rem;
  --section-padding-y-sm: 3rem;
  --section-padding-y-lg: 8rem;
  
  
  /* ==========================================
     BORDES
     ========================================== */
  
  /* Border radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Border width */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  
  /* ==========================================
     SOMBRAS
     ========================================== */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
  
  /* Sombras de color (para hover states) */
  --shadow-primary: 0 8px 20px rgba(0, 174, 231, 0.3);
  --shadow-accent: 0 8px 20px rgba(6, 210, 254, 0.3);
  
  
  /* ==========================================
     TRANSICIONES
     ========================================== */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Timing functions personalizadas */
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  
  /* ==========================================
     Z-INDEX (Capas)
     ========================================== */
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 600;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
  
  
  /* ==========================================
     BREAKPOINTS (para referencia en JS)
     ========================================== */
  
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  
  
  /* ==========================================
     OPACIDADES
     ========================================== */
  
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-overlay: 0.75;
  
  
  /* ==========================================
     COMPONENTES ESPECÍFICOS
     ========================================== */
  
  /* Botones */
  --button-padding-x: 1.5rem;
  --button-padding-y: 0.75rem;
  --button-padding-x-sm: 1rem;
  --button-padding-y-sm: 0.5rem;
  --button-padding-x-lg: 2rem;
  --button-padding-y-lg: 1rem;
  
  /* Inputs */
  --input-height: 48px;
  --input-height-sm: 40px;
  --input-height-lg: 56px;
  --input-padding-x: 1rem;
  --input-border-width: 1px;
  --input-border-radius: var(--radius-md);
  
  /* Cards */
  --card-padding: 1.5rem;
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  
  /* Header */
  --header-height: 80px;
  --header-height-mobile: 64px;
  
  /* Footer */
  --footer-padding-y: 3rem;
  
  
  /* ==========================================
     GRADIENTES
     ========================================== */
  
  /* Gradiente principal (cyan a azul) */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  
  /* Gradiente accent (cyan brillante a cyan) */
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-primary) 100%
  );
  
  /* Gradiente oscuro */
  --gradient-dark: linear-gradient(
    135deg,
    var(--color-primary-darkest) 0%,
    var(--color-primary-darker) 100%
  );
  
  /* Overlay oscuro (para imágenes) */
  --overlay-dark: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  
  /* Overlay claro */
  --overlay-light: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}


/* ==========================================
   DARK MODE (Opcional - para futuro)
   ========================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Colores invertidos para dark mode */
    --color-background: #1A1A1A;
    --color-background-alt: #212529;
    --color-background-dark: #000000;
    
    --color-text: #FFFFFF;
    --color-text-light: #ADB5BD;
    --color-text-lighter: #6B6B6B;
    --color-text-inverse: #1A1A1A;
    
    --color-border: #343A40;
    --color-border-light: #212529;
    --color-border-dark: #495057;
    
    /* Ajustar sombras para dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  }
}


/* ==========================================
   RESPONSIVE - VARIABLES AJUSTADAS
   ========================================== */

@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
    --section-padding-y: 3rem;
    --grid-gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 0.75rem;
    --section-padding-y: 2rem;
    --grid-gap: 1rem;
  }
}