/* ========================================
   Eye Comfort Color Palette v2.0
   Scientifically Optimized for Extended Viewing
======================================== */

/* ========================================
   NEW COLOR PALETTE
   Based on color science and visual ergonomics
======================================== */

:root {
    /* PRIMARY COLORS - Warm Navy/Slate (softer than bright blue) */
    --primary-color: #2c5f7d;           /* Soft teal-blue - easy on eyes */
    --primary-dark: #1e4459;            /* Deep slate - comfortable depth */
    --primary-light: #4a7fa0;           /* Light slate-blue - gentle accent */
    
    /* SECONDARY COLORS - Muted Sage/Olive (instead of bright green) */
    --secondary-color: #6b9080;         /* Soft sage green - very calming */
    --secondary-dark: #4f6f5f;          /* Deep sage - natural and warm */
    --secondary-light: #8bae9f;         /* Light sage - refreshing */
    
    /* ACCENT COLORS - Warm Earth Tones */
    --accent-color: #a67c6d;            /* Warm terracotta - inviting */
    --accent-gold: #c5a572;             /* Muted gold - elegant */
    --accent-warm: #b8907d;             /* Warm sand - comfortable */
    
    /* TEXT COLORS - High contrast but warm */
    --text-dark: #2d3748;               /* Warm charcoal (not pure black) */
    --text-medium: #4a5568;             /* Medium gray-blue */
    --text-light: #718096;              /* Light slate - readable */
    --text-white: #fdfbf7;              /* Warm white (not pure white) */
    
    /* BACKGROUND COLORS - Warm, soft tones */
    --bg-white: #fdfbf7;                /* Warm white - reduces blue light */
    --bg-cream: #faf8f3;                /* Soft cream - very gentle */
    --bg-light: #f5f3ee;                /* Light warm gray - comfortable */
    --bg-lighter: #f9f7f2;              /* Lighter cream */
    --bg-dark: #2d3748;                 /* Warm dark (not pure black) */
    
    /* GRADIENT COLORS - Smooth, warm transitions */
    --gradient-start: #3d6b88;          /* Soft teal */
    --gradient-mid: #5a8a9d;            /* Mid teal-sage */
    --gradient-end: #7a9d8f;            /* Sage green */
    
    /* OVERLAY COLORS - Subtle and warm */
    --overlay-dark: rgba(45, 55, 72, 0.92);
    --overlay-light: rgba(250, 248, 243, 0.95);
    
    /* BORDER COLORS - Soft and subtle */
    --border-light: #e8e5df;            /* Warm light gray */
    --border-medium: #d1cdc4;           /* Medium warm gray */
    --border-dark: #a39d93;             /* Dark warm gray */
    
    /* SHADOW COLORS - Warm and soft (not pure black) */
    --shadow-sm: 0 1px 3px rgba(107, 114, 128, 0.08);
    --shadow-md: 0 4px 8px rgba(107, 114, 128, 0.1);
    --shadow-lg: 0 10px 20px rgba(107, 114, 128, 0.12);
    --shadow-xl: 0 20px 30px rgba(107, 114, 128, 0.15);
    --shadow-2xl: 0 25px 40px rgba(107, 114, 128, 0.18);
    
    /* GLASS EFFECTS - Warmer tints */
    --glass-bg-light: rgba(250, 248, 243, 0.15);
    --glass-bg-medium: rgba(250, 248, 243, 0.22);
    --glass-bg-heavy: rgba(250, 248, 243, 0.28);
    --glass-border: rgba(250, 248, 243, 0.3);
    
    /* STATUS COLORS - Muted and comfortable */
    --success-color: #6b9080;           /* Soft sage (same as secondary) */
    --warning-color: #c5a572;           /* Muted gold */
    --error-color: #b87d6f;             /* Soft terracotta */
    --info-color: #4a7fa0;              /* Soft blue */
}

/* ========================================
   APPLY NEW COLORS TO ALL ELEMENTS
======================================== */

/* Body & Base */
body {
    background-color: var(--bg-cream) !important;
    color: var(--text-dark) !important;
}

/* Sections */
section {
    background-color: var(--bg-white) !important;
}

.services {
    background: linear-gradient(135deg, 
                var(--bg-cream) 0%, 
                var(--bg-white) 50%, 
                var(--bg-lighter) 100%) !important;
}

.about,
.team {
    background: linear-gradient(to bottom, 
                var(--bg-light) 0%, 
                var(--bg-cream) 100%) !important;
}

.clients {
    background: linear-gradient(135deg, 
                var(--bg-lighter) 0%, 
                var(--bg-cream) 100%) !important;
}

/* Hero Section - Warm gradient */
.hero {
    background: linear-gradient(135deg, 
                rgba(61, 107, 136, 0.94) 0%, 
                rgba(90, 138, 157, 0.92) 50%,
                rgba(122, 157, 143, 0.90) 100%), 
                url('../images/hero-background.jpg') !important;
}

.hero-overlay {
    background: linear-gradient(45deg, 
                rgba(44, 95, 125, 0.85) 0%, 
                rgba(74, 127, 160, 0.75) 50%, 
                rgba(107, 144, 128, 0.65) 100%) !important;
}

/* Navigation */
.navbar {
    background: var(--overlay-light) !important;
    box-shadow: 0 2px 20px rgba(107, 144, 128, 0.08) !important;
}

.navbar.scrolled {
    background: rgba(253, 251, 247, 0.96) !important;
    box-shadow: 0 4px 30px rgba(107, 144, 128, 0.12) !important;
}

.logo {
    color: var(--primary-color) !important;
}

.nav-menu a {
    color: var(--text-dark) !important;
}

.nav-menu a::after {
    background: var(--primary-color) !important;
}

.nav-cta {
    background: linear-gradient(135deg, 
                var(--primary-color) 0%, 
                var(--primary-dark) 100%) !important;
    box-shadow: 0 4px 15px rgba(44, 95, 125, 0.25) !important;
}

/* Language Toggle */
.lang-toggle {
    background: linear-gradient(135deg, 
                var(--primary-color) 0%, 
                var(--primary-dark) 100%) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, 
                var(--primary-color) 0%, 
                var(--primary-dark) 100%) !important;
    box-shadow: 0 4px 15px rgba(44, 95, 125, 0.3) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, 
                var(--primary-dark) 0%, 
                #163241 100%) !important;
    box-shadow: 0 6px 20px rgba(44, 95, 125, 0.4) !important;
}

.btn-secondary {
    border-color: rgba(253, 251, 247, 0.9) !important;
    color: var(--text-white) !important;
}

.btn-secondary:hover {
    background: rgba(253, 251, 247, 0.15) !important;
}

/* Hero Badge */
.hero-badge {
    background: var(--glass-bg-medium) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-white) !important;
}

.hero-badge i {
    color: var(--secondary-light) !important;
}

/* Hero Stats */
.hero-stats {
    background: var(--glass-bg-heavy) !important;
    border-color: var(--glass-border) !important;
}

.stat-item {
    background: rgba(250, 248, 243, 0.12) !important;
    border-color: rgba(250, 248, 243, 0.25) !important;
}

.stat-item:hover {
    background: rgba(250, 248, 243, 0.18) !important;
    box-shadow: 0 10px 30px rgba(107, 144, 128, 0.3) !important;
}

.stat-icon {
    background: linear-gradient(135deg, 
                rgba(107, 144, 128, 0.15) 0%, 
                rgba(122, 157, 143, 0.12) 100%) !important;
    border-color: rgba(107, 144, 128, 0.25) !important;
}

.stat-icon i {
    color: var(--secondary-light) !important;
}

/* Service Cards */
.service-card {
    background: linear-gradient(135deg, 
                rgba(253, 251, 247, 0.98) 0%, 
                rgba(250, 248, 243, 0.95) 100%) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.service-card:hover {
    background: linear-gradient(135deg, 
                rgba(255, 253, 249, 0.99) 0%, 
                rgba(253, 251, 247, 0.97) 100%) !important;
    box-shadow: var(--shadow-xl) !important;
    border-color: var(--border-medium) !important;
}

.service-card::before {
    background: linear-gradient(90deg, 
                var(--primary-color), 
                var(--secondary-color)) !important;
}

.service-icon {
    background: linear-gradient(135deg, 
                rgba(44, 95, 125, 0.08) 0%, 
                rgba(107, 144, 128, 0.08) 100%) !important;
    border-color: rgba(44, 95, 125, 0.15) !important;
}

.service-icon i {
    color: var(--primary-color) !important;
}

.service-card h3 {
    color: var(--primary-color) !important;
}

/* Section Headers */
.section-title {
    color: var(--primary-dark) !important;
}

.section-title::before {
    background: linear-gradient(90deg, 
                var(--primary-color) 0%, 
                var(--secondary-color) 100%) !important;
}

.section-title::after {
    background: linear-gradient(90deg, 
                transparent 0%, 
                var(--primary-color) 20%, 
                var(--secondary-color) 80%, 
                transparent 100%) !important;
}

.section-description {
    color: var(--text-medium) !important;
}

/* Team Section */
.quality-item {
    background: linear-gradient(135deg, 
                rgba(253, 251, 247, 0.98) 0%, 
                rgba(250, 248, 243, 0.95) 100%) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.quality-item:hover {
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-medium) !important;
}

.quality-item i {
    color: var(--primary-color) !important;
}

.quality-item h3 {
    color: var(--primary-color) !important;
}

.quality-item p {
    color: var(--text-light) !important;
}

/* Client Section */
.sector-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

.sector-card:hover {
    background: linear-gradient(135deg, 
                var(--primary-color) 0%, 
                var(--primary-dark) 100%) !important;
    color: var(--text-white) !important;
    box-shadow: var(--shadow-xl) !important;
}

.sector-card i {
    color: var(--primary-color) !important;
}

.sector-card:hover i {
    color: var(--secondary-light) !important;
}

/* Testimonials */
.testimonial-card {
    background: linear-gradient(135deg, 
                rgba(253, 251, 247, 0.95) 0%, 
                rgba(250, 248, 243, 0.92) 100%) !important;
    border: 1px solid var(--border-light) !important;
}

.client-testimonial {
    background: linear-gradient(135deg, 
                var(--primary-color) 0%, 
                var(--primary-dark) 100%) !important;
    color: var(--text-white) !important;
}

.client-testimonial i {
    color: var(--secondary-light) !important;
}

/* Contact Form */
.contact {
    background: linear-gradient(135deg, 
                var(--bg-light) 0%, 
                var(--bg-cream) 100%) !important;
}

.form-group input,
.form-group textarea {
    background: rgba(253, 251, 247, 0.85) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-dark) !important;
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 20px rgba(44, 95, 125, 0.15) !important;
}

.form-group label {
    color: var(--text-medium) !important;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, 
                rgba(45, 55, 72, 0.97) 0%, 
                rgba(44, 95, 125, 0.95) 50%,
                rgba(30, 68, 89, 0.97) 100%) !important;
    color: var(--text-white) !important;
}

.footer h4 {
    color: var(--secondary-light) !important;
}

.footer a {
    color: rgba(253, 251, 247, 0.85) !important;
}

.footer a:hover {
    color: var(--secondary-light) !important;
}

.social-links a {
    background: rgba(253, 251, 247, 0.1) !important;
    border-color: rgba(253, 251, 247, 0.2) !important;
}

.social-links a:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-light) !important;
}

/* Scroll to Top */
.scroll-to-top {
    background: linear-gradient(135deg, 
                var(--primary-color) 0.85, 
                var(--primary-dark) 0.85) !important;
    box-shadow: 0 4px 20px rgba(44, 95, 125, 0.35) !important;
}

.scroll-to-top:hover {
    background: linear-gradient(135deg, 
                var(--primary-dark) 0.95, 
                #163241 0.95) !important;
}

/* Icons and Accents */
.fas,
.fab {
    transition: color 0.3s ease;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

/* Selection */
::selection {
    background: var(--secondary-color);
    color: var(--text-white);
}

::-moz-selection {
    background: var(--secondary-color);
    color: var(--text-white);
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
                var(--primary-color), 
                var(--secondary-color));
}

/* ========================================
   ENHANCED READABILITY
======================================== */

/* Better text contrast on colored backgrounds */
.hero-content h1,
.hero-content p,
.hero-content span {
    text-shadow: 0 2px 8px rgba(45, 55, 72, 0.2);
}

/* Softer focus states */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline-color: rgba(44, 95, 125, 0.5) !important;
}

/* ========================================
   MOBILE OPTIMIZATIONS
======================================== */

@media (max-width: 768px) {
    /* Lighter backgrounds on mobile */
    body {
        background-color: var(--bg-lighter) !important;
    }
    
    /* Softer shadows on mobile */
    .service-card,
    .quality-item,
    .sector-card {
        box-shadow: 0 2px 10px rgba(107, 114, 128, 0.08) !important;
    }
}

/* ========================================
   DARK MODE PREPARATION (Future)
======================================== */

@media (prefers-color-scheme: dark) {
    /* Keep light mode for now, but structure is ready */
    /* Uncomment when dark mode is needed */
}

/* ========================================
   ACCESSIBILITY - High Contrast Mode
======================================== */

@media (prefers-contrast: high) {
    :root {
        --text-dark: #1a202c;
        --border-medium: #a0aec0;
    }
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .service-card,
    .quality-item,
    .sector-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}