/*
 * CSS Custom Properties (Variables)
 * BluInvest Theme Core Variables
 */

:root {
    /* Brand Colors */
    --blue-invest-dark: #0d2c4f;
    --blue-invest-medium: #1a5a9c;
    --blue-invest-light: #5b9bd5;
    --blue-invest-accent: #a5c8e7;
    --blue-invest-primary: var(--blue-invest-medium); /* Alias for forms */

    /* Text Colors */
    --text-light: #f5f5f5;
    --text-dark: #333333;
    --text-muted: #6c757d;
    --text-secondary: #666666;

    /* Background Colors */
    --background-color: #ffffff;
    --background-light: #f8f9fa;
    --background-muted: #e9ecef;
    --border-color: #dddddd;

    /* Enhanced Spacing System */
    --container-max-width: 1200px;
    --container-padding: clamp(1rem, 4vw, 2rem);
    --section-spacing: clamp(3rem, 8vw, 6rem);
    --element-spacing: clamp(1rem, 2.5vw, 1.5rem);

    /* Responsive Typography Scale */
    --font-size-hero: clamp(2rem, 5vw, 3rem);
    --font-size-h1: clamp(1.75rem, 4vw, 2.5rem);
    --font-size-h2: clamp(1.5rem, 3.5vw, 2rem);
    --font-size-h3: clamp(1.25rem, 3vw, 1.5rem);
    --font-size-h4: clamp(1.1rem, 2.5vw, 1.25rem);
    --font-size-body: clamp(0.9rem, 2.5vw, 1rem);
    --font-size-small: clamp(0.8rem, 2vw, 0.875rem);

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

    /* Grid System */
    --grid-gap: clamp(1rem, 3vw, 2rem);
    --grid-gap-small: clamp(0.5rem, 2vw, 1rem);
    --grid-gap-large: clamp(1.5rem, 4vw, 3rem);

    /* Border Radius */
    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 12px;
    --radius-xl: 15px;
    --radius-round: 50%;
    --card-radius: var(--radius-large);

    /* Shadows */
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.16);
    --shadow-focus: 0 0 0 3px rgba(26, 90, 156, 0.1);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 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;

    /* Form Element Heights */
    --input-height: 50px;
    --button-height: 50px;
    --textarea-min-height: 120px;

    /* Responsive Breakpoints (for use in container queries when supported) */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* Dark mode variables (future-proofing) */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1a1a;
        --background-light: #2d2d2d;
        --background-muted: #404040;
        --text-dark: #333333;
        --text-secondary: #cccccc;
        --border-color: #404040;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.2);
        --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.3);
        --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.4);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01s;
        --transition-base: 0.01s;
        --transition-slow: 0.01s;
        --transition-bounce: 0.01s;
    }
}