/* Modern Color Palette Options */
:root {
    /* Option 1: Orange + Deep Blue (Complementary - High contrast) */
    --option1-primary: #ff6b35;
    --option1-secondary: #1e3a8a;
    --option1-gradient: linear-gradient(135deg, #1e3a8a 0%, #ff6b35 100%);

    /* Option 2: Orange + Teal (Analogous warm-cool) */
    --option2-primary: #ff6b35;
    --option2-secondary: #0d9488;
    --option2-gradient: linear-gradient(135deg, #0d9488 0%, #ff6b35 100%);

    /* Option 3: Orange + Purple (Triadic - Modern & Trendy) */
    --option3-primary: #ff6b35;
    --option3-secondary: #7c3aed;
    --option3-gradient: linear-gradient(135deg, #7c3aed 0%, #ff6b35 100%);

    /* Option 4: Monochromatic Orange (Most Harmonious) */
    --option4-primary: #ff6b35;
    --option4-secondary: #ea580c;
    --option4-gradient: linear-gradient(135deg, #ea580c 0%, #ff6b35 100%);

    /* Option 5: Orange + Slate (Modern & Professional) */
    --option5-primary: #ff6b35;
    --option5-secondary: #1e293b;
    --option5-gradient: linear-gradient(135deg, #1e293b 0%, #ff6b35 100%);

    /* Active Palette (Currently Option 5 - Most Balanced) */
    --primary-color: var(--option5-primary);
    --secondary-color: var(--option5-secondary);
    --main-gradient: var(--option5-gradient);

    /* Derived Colors */
    --primary-light: #ff8555;
    --primary-dark: #e55a2b;
    --secondary-light: #334155;
    --secondary-dark: #0f172a;

    /* Background Colors */
    --bg-navy-primary: #1e293b;
    --bg-navy-secondary: #334155;
    --bg-navy-dark: #0f172a;
    --bg-gradient-navy: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --bg-gradient-orange: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);
    --bg-gradient-mixed: linear-gradient(135deg, #1e293b 0%, #ff6b35 50%, #f59e0b 100%);
    --bg-gradient-fun: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #ff6b35 75%, #f093fb 100%);
    --bg-gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 25%, #fecfef 50%, #ff6b35 100%);
    --bg-gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff6b35 100%);

    /* Text Colors */
    --text-white: #ffffff;
    --text-white-80: rgba(255, 255, 255, 0.8);
    --text-white-70: rgba(255, 255, 255, 0.7);
    --text-white-50: rgba(255, 255, 255, 0.5);
    --text-orange: #ff6b35;
    --text-orange-dark: #e55a2b;

    /* Border Colors */
    --border-white-10: rgba(255, 255, 255, 0.1);
    --border-white-20: rgba(255, 255, 255, 0.2);
    --border-white-30: rgba(255, 255, 255, 0.3);
    --border-orange: #ff6b35;
    --border-orange-light: rgba(255, 107, 53, 0.3);

    /* Button Colors */
    --btn-primary-bg: #ff6b35;
    --btn-primary-hover: #e55a2b;
    --btn-secondary-bg: rgba(255, 255, 255, 0.1);
    --btn-secondary-hover: rgba(255, 255, 255, 0.2);
    --btn-outline-border: rgba(255, 107, 53, 0.5);
    --btn-outline-hover: rgba(255, 107, 53, 0.1);

    /* Shadow Colors */
    --shadow-orange: rgba(255, 107, 53, 0.25);
    --shadow-orange-lg: rgba(255, 107, 53, 0.35);
    --shadow-navy: rgba(0, 35, 102, 0.3);
}

/* CSS Custom Classes */
.text-primary-orange {
    color: var(--primary-orange);
}

.text-primary-orange-dark {
    color: var(--primary-orange-dark);
}

.bg-primary-orange {
    background-color: var(--primary-orange);
}

.bg-primary-orange-dark {
    background-color: var(--primary-orange-dark);
}

.bg-gradient-orange {
    background: var(--bg-gradient-orange);
}

.bg-gradient-navy {
    background: var(--bg-gradient-navy);
}

.bg-gradient-mixed {
    background: var(--bg-gradient-mixed);
}

.border-primary-orange {
    border-color: var(--primary-orange);
}

.border-orange-light {
    border-color: var(--border-orange-light);
}

.shadow-orange {
    box-shadow: 0 4px 14px 0 var(--shadow-orange);
}

.shadow-orange-lg {
    box-shadow: 0 10px 25px -3px var(--shadow-orange-lg), 0 4px 6px -2px var(--shadow-orange);
}

/* Button Styles */
.btn-primary-orange {
    background-color: var(--primary-orange);
    color: var(--text-white);
    transition: all 0.2s ease;
}

.btn-primary-orange:hover {
    background-color: var(--primary-orange-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-orange-lg);
}

.btn-outline-orange {
    background-color: transparent;
    border: 1px solid var(--btn-outline-border);
    color: var(--primary-orange);
    transition: all 0.2s ease;
}

.btn-outline-orange:hover {
    background-color: var(--btn-outline-hover);
    border-color: var(--primary-orange);
    color: var(--primary-orange-dark);
}

/* Glassmorphism Effects */
.glass-orange {
    background: rgba(255, 107, 53, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.glass-white {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient Text */
.text-gradient-orange {
    background: linear-gradient(135deg, #ff6b35, #ff8555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animations */
@keyframes pulse-orange {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
    }
}

.animate-pulse-orange {
    animation: pulse-orange 2s infinite;
}

/* Focus States */
.focus-orange:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3);
    border-color: var(--primary-orange);
}