/* ========================================
   CSS VARIABLES - Ubuntu Seguros
   ======================================== */

   :root {
    /* Colors */
    --primary-color: #E95420;
    --primary-light: #D2572A;
    --primary-dark: #D44414;
    
    --secondary-color: #0F1419;
    --secondary-light: #1A1F2E;
    --secondary-accent: #2D1B69;
    
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-white: #ffffff;
    --text-white-80: rgba(255, 255, 255, 0.8);
    --text-white-70: rgba(255, 255, 255, 0.7);
    
    --background-white: #ffffff;
    --background-light: #f8f9fa;
    --background-dark: #0F1419;
    
    --border-light: rgba(0, 0, 0, 0.1);
    --border-white: rgba(255, 255, 255, 0.2);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    --gradient-hero: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 50%, var(--secondary-accent) 100%);
    --gradient-features: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Spacing */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 0.75rem;   /* 12px */
    --spacing-base: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 2.5rem;   /* 40px */
    --spacing-3xl: 3rem;     /* 48px */
    --spacing-4xl: 4rem;     /* 64px */
    --spacing-5xl: 5rem;     /* 80px */
    
    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-base: 0.375rem; /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.25rem;   /* 20px */
    --radius-full: 50rem;    /* 800px - essentially full */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-primary: 0 10px 25px rgba(233, 84, 32, 0.3);
    --shadow-primary-lg: 0 15px 30px rgba(233, 84, 32, 0.4);
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-transform: transform var(--transition-base);
    --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
    --transition-shadow: box-shadow var(--transition-base);
    --transition-all: all var(--transition-base);
    
    /* Container */
    --container-max-width: 1200px;
    --container-padding: 2rem;
    
    /* Header */
    --header-height: 80px;
    
    /* Breakpoints (for JS usage) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}