/* CSS Custom Properties (Variables) - Financity Style */
:root {
    /* Financity Color Palette */
    --primary-color: #1e40af;
    --primary-light: #3b82f6;
    --primary-dark: #1e3a8a;
    --secondary-color: #f97316;
    --secondary-light: #fb923c;
    --secondary-dark: #ea580c;
    --accent-color: #06b6d4;
    
    /* Neutral Colors */
    --text-color: #1f2937;
    --text-light: #6b7280;
    --text-lighter: #9ca3af;
    --background-color: #ffffff;
    --white: #ffffff;
    --black: #000000;
    --dark: #0f172a;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Status Colors */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 64, 175, 0.8) 100%);
    --gradient-secondary: linear-gradient(45deg, var(--secondary-color), #fbbf24);
    --gradient-orange: linear-gradient(135deg, #ff6b35 0%, #f59e0b 50%, #fbbf24 100%);
    --gradient-light: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    
    /* Typography */
    --font-primary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Inter', 'Open Sans', sans-serif;
    --font-accent: 'Inter', 'Playfair Display', serif;
    
    /* Font Sizes */
    --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 */
    --font-size-7xl: 4.5rem;      /* 72px */
    --font-size-8xl: 6rem;        /* 96px */
    --font-size-9xl: 8rem;        /* 128px */
    
    /* Font Weights */
    --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-weight-black: 900;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* Spacing Scale */
    --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-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */
    --space-9: 2.25rem;    /* 36px */
    --space-10: 2.5rem;    /* 40px */
    --space-11: 2.75rem;   /* 44px */
    --space-12: 3rem;      /* 48px */
    --space-14: 3.5rem;    /* 56px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-28: 7rem;      /* 112px */
    --space-32: 8rem;      /* 128px */
    --space-36: 9rem;      /* 144px */
    --space-40: 10rem;     /* 160px */
    --space-44: 11rem;     /* 176px */
    --space-48: 12rem;     /* 192px */
    --space-52: 13rem;     /* 208px */
    --space-56: 14rem;     /* 224px */
    --space-60: 15rem;     /* 240px */
    --space-64: 16rem;     /* 256px */
    --space-72: 18rem;     /* 288px */
    --space-80: 20rem;     /* 320px */
    --space-96: 24rem;     /* 384px */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Border Radius */
    --border-radius-none: 0px;
    --border-radius-sm: 0.125rem;    /* 2px */
    --border-radius: 0.25rem;        /* 4px */
    --border-radius-md: 0.375rem;    /* 6px */
    --border-radius-lg: 0.5rem;      /* 8px */
    --border-radius-xl: 0.75rem;     /* 12px */
    --border-radius-2xl: 1rem;       /* 16px */
    --border-radius-3xl: 1.5rem;     /* 24px */
    --border-radius-full: 9999px;
    
    /* Border Width */
    --border-width-0: 0px;
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;
    
    /* Z-Index Scale */
    --z-index-auto: auto;
    --z-index-0: 0;
    --z-index-10: 10;
    --z-index-20: 20;
    --z-index-30: 30;
    --z-index-40: 40;
    --z-index-50: 50;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* Transitions */
    --transition-none: none;
    --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    
    /* Animation Durations */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    /* Easing 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);
    
    /* Layout */
    --header-height: 70px;
    --header-height-mobile: 60px;
    --sidebar-width: 280px;
    --container-width: 1200px;
    --container-width-sm: 640px;
    --container-width-md: 768px;
    --container-width-lg: 1024px;
    --container-width-xl: 1280px;
    --container-width-2xl: 1536px;
    --section-padding: 120px;
    --section-padding-mobile: 80px;
    --container-padding: 24px;
    --container-padding-mobile: 16px;
    
    /* Breakpoints */
    --breakpoint-xs: 475px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* Grid */
    --grid-columns: 12;
    --grid-gap: 1.5rem;
    --grid-gap-sm: 1rem;
    --grid-gap-lg: 2rem;
    
    /* Forms */
    --form-input-height: 48px;
    --form-input-padding-x: 16px;
    --form-input-padding-y: 12px;
    --form-input-border-radius: var(--border-radius-lg);
    --form-input-border-color: var(--gray-300);
    --form-input-focus-color: var(--primary-color);
    --form-input-error-color: var(--danger-color);
    --form-input-success-color: var(--success-color);
    
    /* Buttons */
    --button-height: 48px;
    --button-height-sm: 36px;
    --button-height-lg: 56px;
    --button-padding-x: 24px;
    --button-padding-x-sm: 16px;
    --button-padding-x-lg: 32px;
    --button-border-radius: var(--border-radius-full);
    
    /* Cards */
    --card-padding: var(--space-6);
    --card-padding-sm: var(--space-4);
    --card-padding-lg: var(--space-8);
    --card-border-radius: var(--border-radius-xl);
    --card-shadow: var(--shadow-lg);
    
    /* Navigation */
    --nav-link-padding-x: var(--space-4);
    --nav-link-padding-y: var(--space-3);
    --nav-link-font-weight: var(--font-weight-medium);
    --nav-link-border-radius: var(--border-radius-md);
    
    /* Overlays */
    --overlay-backdrop: rgba(0, 0, 0, 0.5);
    --overlay-backdrop-blur: rgba(0, 0, 0, 0.25);
    
    /* Focus Ring */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--primary-color);
    --focus-ring-opacity: 0.5;
}

/* Dark Mode Variables (for future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #f8fafc;
        --text-light: #cbd5e1;
        --text-lighter: #94a3b8;
        --background-color: #0f172a;
        --gray-100: #1e293b;
        --gray-200: #334155;
        --gray-300: #475569;
        --gray-400: #64748b;
        --gray-500: #94a3b8;
        --gray-600: #cbd5e1;
        --gray-700: #e2e8f0;
        --gray-800: #f1f5f9;
        --gray-900: #f8fafc;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000080;
        --secondary-color: #ff4500;
        --text-color: #000000;
        --background-color: #ffffff;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-all: none;
        --transition-colors: none;
        --transition-opacity: none;
        --transition-shadow: none;
        --transition-transform: none;
        --transition-base: none;
        --transition-fast: none;
        --transition-slow: none;
    }
}