/* ============================================
   WINGORA COLOR PALETTE
   ============================================
   Edit these variables to change the entire site's color scheme
   ========================================== */

:root {
    /* PRIMARY COLORS */
    --primary-color: #6B8E23;
    /* Olive Green - Main brand color */
    --primary-dark: #556B2F;
    /* Dark Olive - Hover states */
    --primary-light: #9ACD32;
    /* Yellow Green - Accents */
    --primary-lighter: #F0F8E8;
    /* Very Light Green - Backgrounds */

    /* SECONDARY COLORS */
    --secondary-color: #2C3E50;
    /* Dark Blue Gray - Headers */
    --secondary-light: #34495E;
    /* Medium Blue Gray - Text */
    --secondary-lighter: #ECF0F1;
    /* Light Gray - Backgrounds */

    /* ACCENT COLORS */
    --accent-color: #E74C3C;
    /* Red - Call to action */
    --accent-light: #FF6B6B;
    /* Light Red - Additional accents */
    --accent-warning: #F39C12;
    /* Orange - Warnings */
    --accent-success: #27AE60;
    /* Green - Success messages */
    --accent-info: #3498DB;
    /* Blue - Information */

    /* NEUTRAL COLORS */
    --white: #FFFFFF;
    /* Pure White */
    --light-gray: #F8F9FA;
    /* Very Light Gray */
    --medium-gray: #6C757D;
    /* Medium Gray */
    --dark-gray: #343A40;
    /* Dark Gray */
    --black: #000000;
    /* Pure Black */

    /* TEXT COLORS */
    --text-primary: #2C3E50;
    /* Main text color */
    --text-secondary: #6C757D;
    /* Secondary text */
    --text-light: #ADB5BD;
    /* Light text */
    --text-white: #FFFFFF;
    /* White text */

    /* BACKGROUND COLORS */
    --bg-primary: #FFFFFF;
    /* Main background */
    --bg-secondary: #F8F9FA;
    /* Secondary background */
    --bg-dark: #2C3E50;
    /* Dark background */
    --bg-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    /* BORDER COLORS */
    --border-light: #DEE2E6;
    /* Light borders */
    --border-medium: #CED4DA;
    /* Medium borders */
    --border-dark: #6C757D;
    /* Dark borders */

    /* SHADOW COLORS */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --shadow-primary: rgba(107, 142, 35, 0.3);

    /* OVERLAY COLORS */
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-primary: rgba(107, 142, 35, 0.9);
    
    /* TRANSITION FOR THEME SWITCHING */
    --transition-speed: 0.3s;
}

/* ============================================
   THEME VARIATIONS
   ============================================
   Uncomment one of the themes below to change the entire color scheme
   ========================================== */

/* BLUE THEME */
/*
:root {
    --primary-color: #007BFF;
    --primary-dark: #0056B3;
    --primary-light: #66B3FF;
    --primary-lighter: #E7F3FF;
}
*/

/* PURPLE THEME */
/*
:root {
    --primary-color: #6F42C1;
    --primary-dark: #5A2D91;
    --primary-light: #9C7AE8;
    --primary-lighter: #F0EBFF;
}
*/

/* RED THEME */
/*
:root {
    --primary-color: #DC3545;
    --primary-dark: #A71E2A;
    --primary-light: #E85A6B;
    --primary-lighter: #FFF0F1;
}
*/

/* TEAL THEME */
/*
:root {
    --primary-color: #20C997;
    --primary-dark: #17A085;
    --primary-light: #5DD6B3;
    --primary-lighter: #E8FCF6;
}
*/

/* ============================================
   DARK MODE COLORS
   ============================================
   Add .dark-theme class to body to enable
   ========================================== */

.dark-theme {
    /* PRIMARY COLORS - Dark Mode */
    --primary-color: #6B8E23;
    /* Olive Green - Main brand color */
    --primary-dark: #556B2F;
    /* Dark Olive - Hover states */
    --primary-light: #9ACD32;
    /* Yellow Green - Accents */
    --primary-lighter: #2A2A2A;
    /* Dark background for primary elements */

    /* SECONDARY COLORS - Dark Mode */
    --secondary-color: #FFFFFF;
    /* White - Secondary color for text */
    --secondary-light: #B3B3B3;
    /* Light Gray - Secondary light */
    --secondary-lighter: #1A1A1A;
    /* Dark Gray - Backgrounds */

    /* BACKGROUND COLORS - Dark Mode */
    --bg-primary: #000000;
    /* Pure Black - Main background */
    --bg-secondary: #161618;
    /* Dark Gray - Secondary background */
    --bg-dark: #0A0A0A;
    /* Very Dark - Dark background */

    /* TEXT COLORS - Dark Mode */
    --text-primary: #FFFFFF;
    /* White - Main text */
    --text-secondary: #B3B3B3;
    /* Light Gray - Secondary text */
    --text-light: #808080;
    /* Medium Gray - Light text */
    --text-white: #FFFFFF;
    /* White text */

    /* NEUTRAL COLORS - Dark Mode */
    --white: #000000;
    /* Black in dark mode */
    --light-gray: #161618;
    /* Dark Gray */
    --medium-gray: #B3B3B3;
    /* Light Gray */
    --dark-gray: #FFFFFF;
    /* White in dark mode */
    --black: #FFFFFF;
    /* White in dark mode */

    /* BORDER COLORS - Dark Mode */
    --border-light: #2A2A2A;
    /* Dark borders */
    --border-medium: #404040;
    /* Medium dark borders */
    --border-dark: #B3B3B3;
    /* Light borders */

    /* SHADOW COLORS - Dark Mode */
    --shadow-light: rgba(255, 255, 255, 0.1);
    --shadow-medium: rgba(255, 255, 255, 0.15);
    --shadow-dark: rgba(255, 255, 255, 0.3);
    --shadow-primary: rgba(107, 142, 35, 0.5);

    /* OVERLAY COLORS - Dark Mode */
    --overlay-light: rgba(0, 0, 0, 0.9);
    --overlay-dark: rgba(255, 255, 255, 0.1);
    --overlay-primary: rgba(107, 142, 35, 0.9);

    /* GRADIENT - Dark Mode */
    --bg-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* ============================================
   DARK MODE IMPLEMENTATION
   ============================================ */

/* Apply dark mode when body has dark-mode class */
body.dark-mode {
    /* Dark Mode Color Palette - Using provided colors */
    --primary-color: #6B8E23;
    --primary-dark: #556B2F;
    --primary-light: #9ACD32;
    --primary-lighter: rgba(107, 142, 35, 0.1);
    
    --secondary-color: #FFFFFF;
    --accent-color: #32CD32;
    --accent-success: #32CD32;
    --accent-warning: #FFD700;
    --accent-error: #FF6B6B;
    
    /* TEXT COLORS - Dark Mode */
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-light: #808080;
    --text-white: #FFFFFF;
    
    /* BACKGROUND COLORS - Dark Mode */
    --bg-primary: #121212;
    --bg-secondary: #1E1E1E;
    --bg-dark: #000000;
    --bg-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    
    /* BORDER COLORS - Dark Mode */
    --border-light: #2C2C2C;
    --border-medium: #404040;
    --border-dark: #606060;
    
    /* SHADOW COLORS - Dark Mode */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.7);
    --shadow-primary: rgba(107, 142, 35, 0.5);
    
    /* OVERLAY COLORS - Dark Mode */
    --overlay-light: rgba(0, 0, 0, 0.9);
    --overlay-dark: rgba(255, 255, 255, 0.1);
    --overlay-primary: rgba(107, 142, 35, 0.9);
}

/* Ensure smooth transitions for all elements */
body.dark-mode * {
    transition: background-color var(--transition-speed) ease, 
                color var(--transition-speed) ease, 
                border-color var(--transition-speed) ease, 
                box-shadow var(--transition-speed) ease;
}

/* Force dark mode styles with higher specificity */
body.dark-mode {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .hero-section,
body.dark-mode .features-section,
body.dark-mode .about-section,
body.dark-mode .contact-section,
body.dark-mode .privacy-section,
body.dark-mode .footer {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .feature-card,
body.dark-mode .contact-item,
body.dark-mode .privacy-item,
body.dark-mode .stat-item {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary) !important;
}

body.dark-mode p {
    color: var(--text-secondary) !important;
}

body.dark-mode .section-title {
    color: var(--secondary-color) !important;
}

body.dark-mode .section-subtitle {
    color: var(--text-secondary) !important;
}

/* Additional dark mode overrides for sections */
body.dark-mode .hero-section {
    background: var(--bg-primary) !important;
}

body.dark-mode .features-section {
    background: var(--bg-secondary) !important;
}

body.dark-mode .about-section {
    background: var(--bg-primary) !important;
}

body.dark-mode .contact-section {
    background: var(--bg-secondary) !important;
}

body.dark-mode .privacy-section {
    background: var(--bg-primary) !important;
}

body.dark-mode .footer {
    background: var(--bg-dark) !important;
}

/* Dark mode for form elements */
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus,
body.dark-mode .contact-form select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--shadow-primary) !important;
}

/* Dark mode for success popup */
body.dark-mode .success-popup {
    background-color: var(--overlay-dark) !important;
}

body.dark-mode .popup-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}