sst_site/.history/public/css/dark-theme_20251019173803.css

/* Dark Theme Support for SmartSolTech */

/* Base Dark Theme */
html.dark {
    color-scheme: dark;
}

.dark body {
    background-color: #111827;
    color: #f9fafb;
}

/* Navigation Dark Theme */
.dark nav {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .nav-link {
    color: #d1d5db;
}

.dark .nav-link:hover {
    color: #60a5fa;
}

.dark .nav-link.active {
    color: #60a5fa;
}

/* Sections Dark Theme */
.dark section {
    background-color: #111827;
    color: #f9fafb;
}

.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #374151 !important;
}

.dark .bg-gray-900 {
    background-color: #030712 !important;
}

/* Text Colors Dark Theme */
.dark .text-gray-900 {
    color: #f9fafb !important;
}

.dark .text-gray-800 {
    color: #e5e7eb !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

.dark .text-gray-400 {
    color: #9ca3af !important;
}

.dark .text-gray-300 {
    color: #d1d5db !important;
}

/* Cards Dark Theme */
.dark .card-hover {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .card-hover:hover {
    background-color: #374151;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Forms Dark Theme */
.dark .form-input {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark .form-input:focus {
    border-color: #60a5fa;
    background-color: #1f2937;
}

.dark .form-input::placeholder {
    color: #9ca3af;
}

.dark input,
.dark textarea,
.dark select {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #60a5fa;
    background-color: #1f2937;
}

/* Borders Dark Theme */
.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-t {
    border-color: #374151;
}

/* Contact Form Dark Theme */
.dark .contact-form {
    background: linear-gradient(145deg, rgba(31,41,55,0.9), rgba(31,41,55,0.95));
    border-color: #374151;
}

/* Service Cards Dark Theme */
.dark .service-card {
    background: linear-gradient(145deg, rgba(31,41,55,0.8), rgba(31,41,55,0.6));
    border-color: #374151;
}

/* Team Cards Dark Theme */
.dark .team-card {
    background-color: #1f2937;
    border-color: #374151;
}

/* Portfolio Items Dark Theme */
.dark .portfolio-item {
    background-color: #1f2937;
}

/* Hero Section Dark Theme */
.dark .hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

/* Shadows Dark Theme */
.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Dropdown Dark Theme */
.dark .dropdown-menu {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .dropdown-menu a {
    color: #d1d5db;
}

.dark .dropdown-menu a:hover {
    background-color: #374151;
    color: #f9fafb;
}

/* Icons Dark Theme */
.dark .text-blue-600 {
    color: #60a5fa !important;
}

.dark .text-purple-600 {
    color: #a78bfa !important;
}

.dark .text-green-600 {
    color: #34d399 !important;
}

.dark .text-yellow-600 {
    color: #fbbf24 !important;
}

/* Buttons Dark Theme */
.dark .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.dark .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* Footer Dark Theme */
.dark footer {
    background-color: #030712;
    border-color: #1f2937;
}

.dark .footer-gradient {
    background: linear-gradient(135deg, #030712 0%, #111827 100%);
}

/* Scrollbar Dark Theme */
.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* Technology Stack Dark Theme */
.dark .tech-stack {
    background-color: #030712;
}

.dark .tech-card {
    background-color: #1f2937;
    border-color: #374151;
}

/* CTA Section Dark Theme */
.dark .cta-section {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
}

/* Testimonials Dark Theme */
.dark .testimonial-card {
    background: rgba(31, 41, 55, 0.8);
    border-color: #374151;
}

/* Alert Messages Dark Theme */
.dark .alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.dark .alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Mobile Menu Dark Theme */
.dark #mobile-menu {
    background-color: #1f2937;
    border-color: #374151;
}

/* Language Dropdown Dark Theme */
.dark #mobile-language-menu {
    background-color: #1f2937;
    border-color: #374151;
}

/* Smooth Theme Transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Print styles for dark theme */
@media print {
    .dark * {
        background: white !important;
        color: black !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .dark {
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
    }
    
    .dark .border {
        border-width: 2px;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .dark * {
        transition: none !important;
        animation: none !important;
    }
}