/**
 * Falcon Solutions Theme System
 * Light theme as default, with dark mode option
 */

/* ============================================
   LIGHT THEME (Default)
   Aligned with Gorge Voyages styling
   ============================================ */
:root {
    /* Primary Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F8FC;
    --bg-tertiary: #F0F1F3;
    
    /* Text Colors */
    --text-primary: #1A1A2E;
    --text-secondary: #4a4a5a;
    --text-muted: #717182;
    
    /* Brand Colors - Gorge Voyages Gold */
    --falcon-gold: #F2CC45;
    --falcon-gold-hover: #E5C03D;
    --falcon-gold-subtle: rgba(242, 204, 69, 0.15);
    
    /* Accent Colors */
    --vibrant-green: #16A34A;
    --deep-red: #DC2626;
    --purple: #7C3AED;
    
    /* Component Colors */
    --card-bg: #FFFFFF;
    --card-bg-hover: #F8F8FC;
    --card-border: rgba(0, 0, 0, 0.1);
    --card-border-hover: var(--falcon-gold);
    
    /* Header/Footer */
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-bg-scrolled: rgba(255, 255, 255, 0.98);
    --footer-bg: #1A1A2E;
    --footer-bg-gradient: linear-gradient(180deg, #1A1A2E 0%, #121220 100%);
    
    /* Loading Screen */
    --loading-bg: #FFFFFF;
    --loader-border: rgba(242, 204, 69, 0.3);
    
    /* Overlays & Shadows */
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0 4px 15px rgba(242, 204, 69, 0.25);
    
    /* Form Elements */
    --input-bg: #f3f3f5;
    --input-border: rgba(0, 0, 0, 0.1);
    --input-focus-border: var(--falcon-gold);
    --input-text: var(--text-primary);
    --select-dropdown-bg: #FFFFFF;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(242, 204, 69, 0.1) 100%);
    --section-gradient: linear-gradient(180deg, transparent 0%, rgba(242, 204, 69, 0.02) 50%, transparent 100%);
    --page-header-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(242, 204, 69, 0.1) 100%);
    
    /* Background Pattern - Subtle */
    --bg-pattern: 
        radial-gradient(circle at 20% 50%, rgba(242, 204, 69, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(22, 163, 74, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(124, 58, 237, 0.02) 0%, transparent 50%);
    
    /* Scrolling Section Fades */
    --fade-left: linear-gradient(to right, var(--bg-primary), transparent);
    --fade-right: linear-gradient(to left, var(--bg-primary), transparent);
    
    /* Logo Colors */
    --logo-color: #1A1A2E;
    --logo-accent: var(--falcon-gold);
    
    /* Mobile Menu */
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    
    /* Tech Chips */
    --chip-bg: rgba(242, 204, 69, 0.1);
    --chip-border: rgba(242, 204, 69, 0.3);
    
    /* Stats Background */
    --stats-bg: #F8F8FC;
    
    /* Service Card Gradient Bar */
    --gradient-bar: linear-gradient(90deg, var(--vibrant-green), var(--falcon-gold), var(--deep-red), var(--purple));
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* Primary Colors */
    --bg-primary: #0f0f17;
    --bg-secondary: #1A1A2E;
    --bg-tertiary: #242438;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    
    /* Component Colors */
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-bg-hover: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: var(--falcon-gold);
    
    /* Header/Footer */
    --header-bg: rgba(15, 15, 23, 0.95);
    --header-bg-scrolled: rgba(15, 15, 23, 0.98);
    --footer-bg: #0a0a10;
    --footer-bg-gradient: linear-gradient(180deg, #0a0a10 0%, #050508 100%);
    
    /* Loading Screen */
    --loading-bg: #0f0f17;
    
    /* Overlays & Shadows */
    --overlay-light: rgba(15, 15, 23, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.85);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    
    /* Form Elements */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --select-dropdown-bg: #1A1A2E;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, rgba(15, 15, 23, 0.98) 0%, rgba(15, 15, 23, 0.8) 50%, rgba(242, 204, 69, 0.08) 100%);
    --section-gradient: linear-gradient(180deg, transparent 0%, rgba(242, 204, 69, 0.02) 50%, transparent 100%);
    --page-header-gradient: linear-gradient(135deg, rgba(15, 15, 23, 0.98) 0%, rgba(15, 15, 23, 0.8) 50%, rgba(242, 204, 69, 0.08) 100%);
    
    /* Background Pattern */
    --bg-pattern: 
        radial-gradient(circle at 20% 50%, rgba(242, 204, 69, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(22, 163, 74, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(124, 58, 237, 0.03) 0%, transparent 50%);
    
    /* Scrolling Section Fades */
    --fade-left: linear-gradient(to right, rgba(15, 15, 23, 1), transparent);
    --fade-right: linear-gradient(to left, rgba(15, 15, 23, 1), transparent);
    
    /* Logo Colors */
    --logo-color: #FFFFFF;
    --logo-accent: var(--falcon-gold);
    
    /* Mobile Menu */
    --mobile-menu-bg: rgba(15, 15, 23, 0.98);
    
    /* Tech Chips */
    --chip-bg: rgba(242, 204, 69, 0.12);
    --chip-border: rgba(242, 204, 69, 0.25);
    
    /* Stats Background */
    --stats-bg: rgba(0, 0, 0, 0.3);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--text-primary);
    width: 40px;
    height: 40px;
}

.theme-toggle:hover {
    background-color: var(--card-bg);
    transform: rotate(15deg);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Sun icon (shown in dark mode) */
.theme-toggle .sun-icon {
    display: none;
}

/* Moon icon (shown in light mode) */
.theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

.theme-toggle:hover svg {
    transform: scale(1.1);
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */
body,
body::before,
header,
footer,
.loading-screen,
.service-card,
.project-card,
.value-card,
.team-card,
.contact-form,
.contact-method,
.faq-item,
.timeline-content,
.featured-project,
.tech-chip,
.filter-btn,
a,
input,
textarea,
select,
button {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ============================================
   PREVENT FLASH OF UNSTYLED CONTENT
   ============================================ */
html {
    background-color: var(--bg-primary);
}

/* Apply immediately before JS loads */
html:not([data-theme]) {
    --bg-primary: #FFFFFF;
    --text-primary: #1a1a1a;
}

/* ============================================
   SPECIAL COMPONENT OVERRIDES
   ============================================ */

/* Partner section hover - text color fix for light mode */
:root .partner-item span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .partner-item span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer always stays dark for brand consistency */
footer {
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.6);
    background: var(--footer-bg-gradient) !important;
    color: #FFFFFF;
}

footer a {
    color: rgba(255, 255, 255, 0.6);
}

footer a:hover {
    color: var(--falcon-gold);
}

footer .footer-heading {
    color: var(--falcon-gold);
}

footer p {
    color: rgba(255, 255, 255, 0.8);
}

footer .copyright {
    color: rgba(255, 255, 255, 0.4);
}