/* =====================================================
    ANCLAJE SOLAR ENERGY - CSS Variables & Design Tokens
    Archivo de configuración central del sistema de diseño
    ===================================================== */
 
 :root {
     /* =====================================================
        Color Palette - Brand Colors
        ===================================================== */
     
     /* Primary Colors - Amarillo/Dorado del sol */
     --primary: #F5B800;
     --primary-dark: #D4A000;
     --primary-light: #FFD84D;
     --primary-rgb: 245, 184, 0;
     
     /* Secondary Colors - Cyan/Turquesa de los paneles */
     --secondary: #00A3C4;
     --secondary-dark: #008299;
     --secondary-light: #22D3EE;
     --secondary-rgb: 0, 163, 196;
     
     /* Accent Colors - Dorado intenso */
     --accent: #F5B800;
     --accent-dark: #D4A000;
     
     /* =====================================================
        Neutral Colors
        ===================================================== */
     --dark: #0f172a;
     --dark-light: #1e293b;
     --gray-900: #111827;
     --gray-800: #1f2937;
     --gray-700: #374151;
     --gray-600: #4b5563;
     --gray-500: #6b7280;
     --gray-400: #9ca3af;
     --gray-300: #d1d5db;
     --gray-200: #e5e7eb;
     --gray-100: #f3f4f6;
     --white: #ffffff;
     
     /* =====================================================
        Functional Colors
        ===================================================== */
     --success: #10b981;
     --success-light: #d1fae5;
     --warning: #f59e0b;
     --warning-light: #fef3c7;
     --error: #ef4444;
     --error-light: #fee2e2;
     --info: #3b82f6;
     --info-light: #dbeafe;
     
     /* =====================================================
        Gradients
        ===================================================== */
     --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
     --gradient-dark: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
     --gradient-hero: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
     --gradient-solar: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     
     /* =====================================================
        Typography
        ===================================================== */
     --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-display: 'Playfair Display', Georgia, serif;
     
     /* Font Sizes */
     --text-xs: 12px;
     --text-sm: 14px;
     --text-base: 16px;
     --text-lg: 18px;
     --text-xl: 20px;
     --text-2xl: 24px;
     --text-3xl: 30px;
     --text-4xl: 36px;
     --text-5xl: 48px;
     --text-6xl: 60px;
     
     /* Line Heights */
     --leading-tight: 1.1;
     --leading-snug: 1.25;
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;
     --leading-loose: 2;
     
     /* =====================================================
        Spacing
        ===================================================== */
     --space-1: 4px;
     --space-2: 8px;
     --space-3: 12px;
     --space-4: 16px;
     --space-5: 20px;
     --space-6: 24px;
     --space-8: 32px;
     --space-10: 40px;
     --space-12: 48px;
     --space-16: 64px;
     --space-20: 80px;
     --space-24: 96px;
     
     --section-padding: 100px;
     --container-width: 1280px;
     
     /* =====================================================
        Shadows
        ===================================================== */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     --shadow-primary: 0 10px 40px rgba(var(--primary-rgb), 0.4);
     --shadow-secondary: 0 10px 40px rgba(var(--secondary-rgb), 0.4);
     
     /* =====================================================
        Border Radius
        ===================================================== */
     --radius-sm: 4px;
     --radius: 8px;
     --radius-md: 12px;
     --radius-lg: 16px;
     --radius-xl: 24px;
     --radius-2xl: 32px;
     --radius-full: 9999px;
     
     /* =====================================================
        Transitions
        ===================================================== */
     --transition: all 0.3s ease;
     --transition-fast: all 0.15s ease;
     --transition-slow: all 0.5s ease;
     --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     
     /* =====================================================
        Z-Index Scale
        ===================================================== */
     --z-dropdown: 100;
     --z-sticky: 200;
     --z-fixed: 300;
     --z-modal-backdrop: 400;
     --z-modal: 500;
     --z-popover: 600;
     --z-tooltip: 700;
     --z-toast: 800;
     --z-preloader: 9999;
 }
 
 /* =====================================================
    Dark Mode Variables (opcional para futuro)
    ===================================================== */
 @media (prefers-color-scheme: dark) {
     :root {
         /* Se pueden sobrescribir variables aquí para dark mode */
     }
 }