/* ========================================
   VARIABLES CSS - GORSE CORPORATIVO
   Configuración global de colores, fuentes y espaciado
   ========================================= */

:root {
    /* ========== COLORES CORPORATIVOS ========== */
    --color-primario: #c41e3a;
    --color-primario-hover: #a91735;
    --color-primario-light: #e84666;
    --color-primario-dark: #8b1426;
    
    --color-secundario: #2c3e50;
    --color-secundario-light: #34495e;
    --color-secundario-dark: #1a252f;
    
    --color-accent: #f39c12;
    --color-accent-light: #f5b041;
    --color-accent-dark: #d68910;
    
    /* ========== ESCALA DE GRISES ========== */
    --color-texto: #2c3e50;
    --color-texto-light: #7f8c8d;
    --color-texto-lighter: #95a5a6;
    --color-texto-dark: #1a1a1a;
    
    --color-fondo: #ffffff;
    --color-fondo-gris: #f8f9fa;
    --color-fondo-gris-light: #fdfdfe;
    --color-fondo-gris-dark: #e9ecef;
    
    --color-borde: #e9ecef;
    --color-borde-light: #f1f3f4;
    --color-borde-dark: #dee2e6;
    
    /* ========== COLORES DE ESTADO ========== */
    --color-exito: #27ae60;
    --color-advertencia: #f39c12;
    --color-error: #e74c3c;
    --color-info: #3498db;
    
    /* ========== GRADIENTES ========== */
    --gradiente-primario: linear-gradient(135deg, var(--color-primario), var(--color-primario-hover));
    --gradiente-secundario: linear-gradient(135deg, var(--color-secundario), var(--color-secundario-light));
    --gradiente-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    --gradiente-hero: linear-gradient(135deg, rgba(196, 30, 58, 0.9), rgba(44, 62, 80, 0.8));
    
    /* ========== TIPOGRAFÍA ========== */
    --fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fuente-display: 'Inter', system-ui, sans-serif;
    --fuente-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Tamaños de fuente */
    --texto-xs: 0.75rem;    /* 12px */
    --texto-sm: 0.875rem;   /* 14px */
    --texto-base: 1rem;     /* 16px */
    --texto-lg: 1.125rem;   /* 18px */
    --texto-xl: 1.25rem;    /* 20px */
    --texto-2xl: 1.5rem;    /* 24px */
    --texto-3xl: 1.875rem;  /* 30px */
    --texto-4xl: 2.25rem;   /* 36px */
    --texto-5xl: 3rem;      /* 48px */
    --texto-6xl: 3.75rem;   /* 60px */
    
    /* Pesos de fuente */
    --peso-light: 300;
    --peso-normal: 400;
    --peso-medium: 500;
    --peso-semibold: 600;
    --peso-bold: 700;
    --peso-extrabold: 800;
    
    /* Altura de línea */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* ========== ESPACIADO ========== */
    --contenedor-max: 1200px;
    --contenedor-wide: 1400px;
    --contenedor-narrow: 800px;
    
    --espaciado-seccion: 80px;
    --espaciado-seccion-sm: 60px;
    --espaciado-seccion-lg: 120px;
    
    --espaciado-elemento: 2rem;
    --espaciado-elemento-sm: 1rem;
    --espaciado-elemento-lg: 3rem;
    
    /* Escala de espaciado */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-32: 8rem;       /* 128px */
    
    /* ========== SOMBRAS ========== */
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.08);
    --sombra-media: 0 4px 20px rgba(0, 0, 0, 0.12);
    --sombra-fuerte: 0 8px 30px rgba(0, 0, 0, 0.15);
    --sombra-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    --sombra-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    /* Sombras de color */
    --sombra-primario: 0 4px 20px rgba(196, 30, 58, 0.3);
    --sombra-accent: 0 4px 20px rgba(243, 156, 18, 0.3);
    
    /* ========== BORDES Y RADIOS ========== */
    --radio-none: 0;
    --radio-sm: 0.25rem;    /* 4px */
    --radio-base: 0.375rem; /* 6px */
    --radio-md: 0.5rem;     /* 8px */
    --radio-lg: 0.75rem;    /* 12px */
    --radio-xl: 1rem;       /* 16px */
    --radio-2xl: 1.5rem;    /* 24px */
    --radio-full: 9999px;
    
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    
    /* ========== TRANSICIONES ========== */
    --transicion-rapida: 0.15s ease-out;
    --transicion-media: 0.3s ease-in-out;
    --transicion-lenta: 0.5s ease-in-out;
    --transicion-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Duraciones */
    --duracion-75: 75ms;
    --duracion-100: 100ms;
    --duracion-150: 150ms;
    --duracion-200: 200ms;
    --duracion-300: 300ms;
    --duracion-500: 500ms;
    --duracion-700: 700ms;
    --duracion-1000: 1000ms;
    
    /* Timing functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== Z-INDEX SCALE ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* ========== BREAKPOINTS (para referencia en JS) ========== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* ========== CONFIGURACIONES ESPECÍFICAS ========== */
    /* Header */
    --header-height: 80px;
    --header-height-mobile: 70px;
    
    /* Hero */
    --hero-min-height: 100vh;
    --hero-min-height-mobile: 80vh;
    
    /* Cards */
    --card-padding: var(--space-6);
    --card-radius: var(--radio-xl);
    
    /* Buttons */
    --button-padding-y: var(--space-3);
    --button-padding-x: var(--space-6);
    --button-radius: var(--radio-md);
    --button-font-weight: var(--peso-semibold);
    
    /* Forms */
    --input-padding-y: var(--space-3);
    --input-padding-x: var(--space-4);
    --input-radius: var(--radio-md);
    --input-border-width: var(--border-width-2);
    
    /* ========== CONFIGURACIONES DE ANIMACIÓN ========== */
    --animation-fade-in: fadeIn var(--duracion-500) var(--ease-out) forwards;
    --animation-slide-up: slideUp var(--duracion-300) var(--ease-out) forwards;
    --animation-slide-down: slideDown var(--duracion-300) var(--ease-out) forwards;
    --animation-scale-in: scaleIn var(--duracion-200) var(--ease-out) forwards;
    --animation-bounce: bounce var(--duracion-500) var(--transicion-bounce) forwards;
    
    /* ========== UTILIDADES DE COLOR ========== */
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(255, 255, 255, 0.9);
    --backdrop-blur: rgba(255, 255, 255, 0.8);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    
    /* ========== MODO OSCURO (preparación futura) ========== */
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #a0a0a0;
    --dark-border: #404040;
}

/* ========== VARIABLES PERSONALIZADAS POR SECCIÓN ========== */
:root {
    /* Timeline */
    --timeline-line-color: var(--color-borde);
    --timeline-dot-size: 12px;
    --timeline-gap: var(--space-6);
    
    /* Servicios */
    --service-card-hover-transform: translateY(-10px);
    --service-icon-size: 80px;
    --service-grid-gap: var(--space-8);
    
    /* Proyectos */
    --project-image-height: 200px;
    --project-hover-scale: 1.05;
    
    /* Clientes */
    --client-logo-height: 120px;
    --client-hover-lift: -5px;
    
    /* Footer */
    --footer-bg: var(--color-secundario);
    --footer-text: #bdc3c7;
    --footer-accent: var(--color-accent);
}

/* ========== MEDIA QUERIES PARA VARIABLES RESPONSIVAS ========== */
@media (max-width: 768px) {
    :root {
        --espaciado-seccion: var(--espaciado-seccion-sm);
        --texto-6xl: var(--texto-4xl);
        --texto-5xl: var(--texto-3xl);
        --texto-4xl: var(--texto-2xl);
        --hero-min-height: var(--hero-min-height-mobile);
        --header-height: var(--header-height-mobile);
    }
}

@media (max-width: 480px) {
    :root {
        --contenedor-max: 100%;
        --espaciado-seccion: 40px;
        --card-padding: var(--space-4);
        --service-grid-gap: var(--space-4);
    }
}

/* ========== VARIABLES DE TEMA CLARO/OSCURO ========== */
[data-theme="light"] {
    --bg-primary: var(--color-fondo);
    --bg-secondary: var(--color-fondo-gris);
    --text-primary: var(--color-texto);
    --text-secondary: var(--color-texto-light);
    --border-color: var(--color-borde);
}

[data-theme="dark"] {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --border-color: var(--dark-border);
}

/* ========== DEBUGGING Y DESARROLLO ========== */
:root {
    --debug-border: 1px solid red;
    --debug-bg: rgba(255, 0, 0, 0.1);
}

/* Activar con clase .debug en body */
.debug * {
    border: var(--debug-border) !important;
    background: var(--debug-bg) !important;
}