@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

.title-font {
    font-family: 'Space Grotesk', sans-serif;
}

/* Dark Mode Base Styles */
.dark body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.dark #hero {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%) !important;
}

.dark nav {
    background-color: #000000 !important;
    border-bottom: 1px solid #333333 !important;
}

.dark section {
    background-color: #000000 !important;
}

.dark .bg-gradient-to-br {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%) !important;
}

.dark .bg-gradient-to-b {
    background: linear-gradient(to bottom, #000000, #1a1a1a) !important;
}

.dark .bg-gradient-to-r {
    background: linear-gradient(to right, #000000, #1a1a1a) !important;
}

/* Background Colors */
.dark .bg-slate-50,
.dark .bg-gray-50,
.dark .bg-white {
    background-color: #000000 !important;
}

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

.dark .bg-gray-200 {
    background-color: #2d2d2d !important;
}

.dark footer {
    background-color: #000000 !important;
}

/* Cards and Elements */
.dark .feature-card,
.dark .testimonial-card,
.dark .benefits-card {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
}

/* Text Colors */
.dark .text-gray-900,
.dark .text-black {
    color: #ffffff !important;
}

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

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

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

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

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

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

.dark .text-gray-200 {
    color: #444444 !important;
}

.dark .text-gray-100 {
    color: #222222 !important;
}

.dark .text-white {
    color: #ffffff !important;
}

/* Borders */
.dark .border-gray-100,
.dark .border-gray-200 {
    border-color: #333333 !important;
}

.dark .border-gray-300 {
    border-color: #444444 !important;
}

.dark .border-white {
    border-color: #ffffff !important;
}

/* Shadows */
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.1) !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1) !important;
}

/* Form Elements */
.dark input,
.dark select,
.dark textarea {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #888888 !important;
}

.dark button {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Links */
.dark a {
    color: #cccccc !important;
}

.dark a:hover {
    color: #ffffff !important;
}


/* Modals */
.dark .fixed.inset-0 {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Dark mode navbar hover contrast */
.dark nav a:hover {
    color: #000000 !important;
}

.dark nav a:hover span {
    color: #000000 !important;
}

/* Color preservation classes - these colors should remain the same in both modes */
.preserve-red-600 {
    color: #dc2626 !important;
}

.preserve-blue-600 {
    color: #2563eb !important;
}

.preserve-green-600 {
    color: #16a34a !important;
}

.preserve-purple-600 {
    color: #9333ea !important;
}

.preserve-orange-600 {
    color: #ea580c !important;
}

.preserve-yellow-600 {
    color: #ca8a04 !important;
}

.preserve-indigo-600 {
    color: #4f46e5 !important;
}

.preserve-teal-600 {
    color: #0d9488 !important;
}

.preserve-cyan-600 {
    color: #0891b2 !important;
}

.preserve-emerald-600 {
    color: #059669 !important;
}

.preserve-pink-600 {
    color: #db2777 !important;
}

.preserve-rose-600 {
    color: #e11d48 !important;
}

.preserve-violet-600 {
    color: #7c3aed !important;
}

.preserve-sky-600 {
    color: #0284c7 !important;
}

.preserve-lime-600 {
    color: #65a30d !important;
}