/* ========================================
   InnovaLoa - CSS Variables (Light Theme - Azure/Cyan)
   ======================================== */

:root {
    /* === Colores Base (Tema Claro) === */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F0F4F8;
    /* Un poco más azulado que gris puro */
    --color-bg-tertiary: #E1E8F0;
    --color-bg-hero: #051020;
    /* Azul muy oscuro, casi negro */

    /* === Colores de Texto === */
    --color-text-primary: #0F172A;
    --color-text-secondary: #334155;
    --color-text-muted: #64748B;
    --color-text-on-dark: #F8FAFC;
    --color-text-on-dark-secondary: #CBD5E1;

    /* === Acentos (Nueva Paleta: Azul/Cian Fresco) === */
    /* Reemplaza al Naranja */
    --color-accent-copper: #0284C7;
    /* Sky Blue 600 - Ahora es el color primario "Fresco" */
    --color-accent-copper-light: #38BDF8;
    /* Sky Blue 400 */
    --color-accent-copper-dark: #0369A1;
    /* Sky Blue 700 */

    /* Reemplaza al Cian anterior (ahora más electrico/brillante) */
    --color-accent-cyan: #06B6D4;
    /* Cyan 500 */
    --color-accent-cyan-light: #22D3EE;
    /* Cyan 400 */
    --color-accent-cyan-dark: #0891B2;
    /* Cyan 600 */

    /* === Gradientes con más Pop/Contraste === */
    --gradient-hero: linear-gradient(135deg, #020617 0%, #0B1120 50%, #172554 100%);
    --gradient-copper: linear-gradient(135deg, var(--color-accent-copper) 0%, #0EA5E9 100%);
    /* Azul vibrante */
    --gradient-cyan: linear-gradient(135deg, var(--color-accent-cyan) 0%, #22D3EE 100%);
    --gradient-tech: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%);
    /* Gradiente Azul a Cian */

    /* Fondo sutil con gradiente para secciones claras para dar profundidad */
    --gradient-light-section: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    --gradient-footer: linear-gradient(180deg, #0F172A 0%, #020617 100%);

    /* === Tipografía === */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --fs-hero: clamp(2.5rem, 8vw, 5rem);
    --fs-h1: clamp(2rem, 5vw, 3.5rem);
    --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 3vw, 1.75rem);
    --fs-body: clamp(1rem, 2vw, 1.125rem);
    --fs-small: 0.875rem;
    --fs-tiny: 0.75rem;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

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

    /* === Layout === */
    --container-max: 1200px;
    --container-padding: 1.5rem;

    /* === Bordes y Sombras (Más profundidad) === */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    --border-tech: 1px solid rgba(6, 182, 212, 0.2);
    --border-copper: 1px solid rgba(2, 132, 199, 0.2);
    --border-subtle: 1px solid #CBD5E1;
    /* Un poco más oscuro para contraste */

    /* Sombras más marcadas para evitar el look "plano" */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

    /* Glows actualizados a azules */
    --shadow-glow-copper: 0 0 20px rgba(2, 132, 199, 0.4);
    --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.4);

    /* === Transiciones === */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === Z-Index === */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-overlay: 500;
}