/* Default Light Theme */
body {
    color: #1d1d1f;
    background-color: #ffffff;
    
    /* Theme-aware color variables */
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --text-muted: #86868b;
    --background-primary: #ffffff;
    --background-secondary: #f5f5f7;
    --background-elevated: rgba(255, 255, 255, 0.8);
    --background-hover: rgba(0, 122, 255, 0.1);
    --border-primary: rgba(29, 29, 31, 0.2);
    --border-secondary: rgba(29, 29, 31, 0.1);
    --accent-primary: #007aff;
    --accent-secondary: #5856d6;
    --accent-tertiary: #34c759;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --overlay-background: rgba(0, 0, 0, 0.4);
    
    /* CSS Custom Properties for Forms */
    --text-placeholder: #86868b;
    --card-background: rgba(255, 255, 255, 0.8);
    --border-color: rgba(29, 29, 31, 0.2);
    --input-background: rgba(255, 255, 255, 0.9);
    --input-border: rgba(29, 29, 31, 0.3);
    --input-focus-background: rgba(0, 122, 255, 0.05);
    --focus-ring: rgba(0, 122, 255, 0.2);
    --accent-color: #007aff;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Focus styles */
*:focus {
    outline-color: #007aff;
}

/* Navigation */
.navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);
}

.nav-logo {
    color: #1d1d1f;
}

.nav-menu a {
    color: #1d1d1f;
}

.nav-menu a:hover {
    color: #007aff;
}

.hamburger span {
    background-color: #1d1d1f;
}

/* Theme Switcher */
.theme-btn {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.theme-btn:hover {
    background: #e5e5ea;
}

.theme-btn.active {
    background: #007aff;
    color: white;
    border-color: #007aff;
}

/* Theme Dropdown */
.theme-toggle-btn {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.theme-toggle-btn:hover {
    background: #e5e5ea;
}

.theme-dropdown-menu {
    background: rgba(251, 251, 253, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-option {
    color: #1d1d1f;
}

.theme-option:hover {
    background: rgba(0, 122, 255, 0.1);
}

.theme-option.active {
    background: #007aff;
    color: white;
}

.theme-toggle-btn .theme-text,
.theme-toggle-btn .dropdown-arrow {
    color: #1d1d1f;
}

/* Language Dropdown */
.language-toggle-btn {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.language-toggle-btn:hover {
    background: #e5e5ea;
}

.language-dropdown-menu {
    background: rgba(251, 251, 253, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.language-option {
    color: #1d1d1f;
}

.language-option:hover {
    background: rgba(0, 122, 255, 0.1);
}

.language-option.active {
    background: #007aff;
    color: white;
}

.language-toggle-btn .language-text,
.language-toggle-btn .dropdown-arrow {
    color: #1d1d1f;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.hero-title {
    color: #1d1d1f;
}

.hero-subtitle {
    color: #6e6e73;
}

.btn-primary {
    background: #007aff;
    color: white;
}

.btn-primary:hover {
    background: #0056cc;
}

.btn-secondary {
    background: transparent;
    color: #007aff;
    border: 1px solid #007aff;
}

.btn-secondary:hover {
    background: #007aff;
    color: white;
}

/* Product Showcase */
.product-showcase {
    background: #ffffff;
}

.section-title {
    color: #1d1d1f;
}

.product-card {
    background: #fbfbfd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.product-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.product-card h3 {
    color: #1d1d1f;
}

.product-card p {
    color: #6e6e73;
}

/* Features Section */
.features {
    background: #f5f5f7;
}

.feature-text h2 {
    color: #1d1d1f;
}

.feature-text p {
    color: #6e6e73;
}

.feature-list li {
    color: #1d1d1f;
}

.feature-list li::before {
    color: #30d158;
}

.feature-visual {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}

/* Footer */
.footer {
    background: #1d1d1f;
    color: #a1a1a6;
}

.footer-section h4 {
    color: #ffffff;
}

.footer-section ul li a {
    color: #a1a1a6;
}

.footer-section ul li a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid #424245;
}

/* Contact Form - Light Theme */
.contact-form .form-group select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

.contact-form .form-group select option {
    background-color: #ffffff !important;
    color: #1d1d1f !important;
}

/* Mobile Menu */
@media (max-width: 767px) {
    .nav-menu {
        background: rgba(251, 251, 253, 0.98) !important;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .nav-menu a {
        color: #1d1d1f !important;
    }
    
    .nav-menu a:hover {
        background: rgba(0, 122, 255, 0.1) !important;
        color: #007aff !important;
        transform: translateY(-2px);
    }
}

/* Product Carousel */
.product-carousel-section {
    background: #f5f5f7;
}

.carousel-wrapper {
    background: #ffffff;
}

.carousel-info h3 {
    color: #1d1d1f;
}

.carousel-info p {
    color: #6e6e73;
}

.feature-tag {
    background: #f5f5f7;
    color: #1d1d1f;
    border-color: #d2d2d7;
}

.carousel-btn {
    background: #007aff;
    color: white;
}

.carousel-btn:hover {
    background: #0056cc;
}

.carousel-prev,
.carousel-next {
    background: rgba(255, 255, 255, 0.9);
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(255, 255, 255, 1);
}

.indicator {
    background: #d2d2d7;
}

.indicator.active {
    background: #007aff;
}

/* Custom Solution Styling */
.custom-solution .carousel-info h3 {
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-btn {
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%) !important;
}

.contact-btn:hover {
    background: linear-gradient(135deg, #0056cc 0%, #4a47b8 100%) !important;
    transform: translateY(-2px) scale(1.05);
}