:root {
    --primary-navy: #0f172a;
    --secondary-navy: #1e293b;
    --accent-gold: #fbbf24;
    --luxury-gold: #d4af37;
    --text-light: #f8fafc;
    --text-dark: #0f172a;
    --bg-light: #ffffff;
    --bg-dark: #0f172a;
    --card-light: #ffffff;
    --card-dark: #1e293b;
}

[data-theme="dark"] {
    --text-color: var(--text-light);
    --bg-color: var(--bg-dark);
    --card-color: var(--card-dark);
}

[data-theme="light"] {
    --text-color: var(--text-dark);
    --bg-color: var(--bg-light);
    --card-color: var(--card-light);
}

* {
    transition: all 0.3s ease;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Theme-specific text colors */
[data-theme="light"] .text-gray-600 {
    color: #4b5563 !important;
}

[data-theme="light"] .text-gray-300 {
    color: #6b7280 !important;
}

[data-theme="light"] .text-gray-500 {
    color: #6b7280 !important;
}

[data-theme="light"] .text-gray-400 {
    color: #9ca3af !important;
}

[data-theme="light"] .text-gray-900 {
    color: #111827 !important;
}

[data-theme="light"] .text-white {
    color: #111827 !important;
}

[data-theme="dark"] .text-gray-600 {
    color: #d1d5db !important;
}

[data-theme="dark"] .text-gray-300 {
    color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-400 {
    color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-900 {
    color: #f9fafb !important;
}

[data-theme="dark"] .text-white {
    color: #ffffff !important;
}

/* Background-specific text colors */
[data-theme="dark"] .bg-white .text-gray-600,
[data-theme="dark"] .bg-white .text-gray-300,
[data-theme="dark"] .bg-white .text-gray-500 {
    color: #374151 !important;
}

[data-theme="dark"] .bg-gray-50 .text-gray-600,
[data-theme="dark"] .bg-gray-50 .text-gray-300,
[data-theme="dark"] .bg-gray-50 .text-gray-500 {
    color: #374151 !important;
}

[data-theme="dark"] .bg-gray-100 .text-gray-600,
[data-theme="dark"] .bg-gray-100 .text-gray-300,
[data-theme="dark"] .bg-gray-100 .text-gray-500 {
    color: #374151 !important;
}

/* Border colors for dark mode */
[data-theme="dark"] .border-gray-300 {
    border-color: #4b5563 !important;
}

[data-theme="dark"] .border-gray-600 {
    border-color: #6b7280 !important;
}

[data-theme="light"] .border-gray-300 {
    border-color: #d1d5db !important;
}

[data-theme="light"] .border-gray-600 {
    border-color: #4b5563 !important;
}

/* Background colors for different sections */
[data-theme="light"] .bg-white {
    background-color: #ffffff !important;
}

[data-theme="light"] .bg-gray-50 {
    background-color: #f9fafb !important;
}

[data-theme="light"] .bg-gray-900 {
    background-color: #111827 !important;
}

[data-theme="dark"] .bg-white {
    background-color: #1f2937 !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: #111827 !important;
}

[data-theme="dark"] .bg-gray-900 {
    background-color: #111827 !important;
}

/* Dark mode background overrides */
[data-theme="dark"] .bg-white.dark\:bg-gray-800 {
    background-color: #1f2937 !important;
}

[data-theme="dark"] .bg-gray-50.dark\:bg-gray-900 {
    background-color: #111827 !important;
}

[data-theme="light"] .bg-gray-800.dark\:bg-white {
    background-color: #ffffff !important;
}

[data-theme="light"] .bg-gray-900.dark\:bg-gray-50 {
    background-color: #f9fafb !important;
}

/* About section dark mode fixes */
[data-theme="dark"] .bg-gray-900 * {
    color: #ffffff !important;
}

[data-theme="dark"] #about *,
[data-theme="dark"] .bg-gray-900 * {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-gray-900 .text-gray-600,
[data-theme="dark"] .bg-gray-900 .text-gray-300,
[data-theme="dark"] .bg-gray-900 .text-gray-500,
[data-theme="dark"] .bg-gray-900 .text-gray-400,
[data-theme="dark"] .bg-gray-900 .text-gray-900,
[data-theme="dark"] .bg-gray-900 .text-xl,
[data-theme="dark"] .bg-gray-900 .text-2xl,
[data-theme="dark"] .bg-gray-900 .text-3xl,
[data-theme="dark"] .bg-gray-900 .text-4xl,
[data-theme="dark"] .bg-gray-900 .text-5xl,
[data-theme="dark"] .bg-gray-900 .font-semibold,
[data-theme="dark"] .bg-gray-900 .font-bold,
[data-theme="dark"] .bg-gray-900 p,
[data-theme="dark"] .bg-gray-900 span,
[data-theme="dark"] .bg-gray-900 h1,
[data-theme="dark"] .bg-gray-900 h2,
[data-theme="dark"] .bg-gray-900 h3,
[data-theme="dark"] .bg-gray-900 h4,
[data-theme="dark"] .bg-gray-900 h5,
[data-theme="dark"] .bg-gray-900 h6 {
    color: #ffffff !important;
}

/* Keep prices yellow in both themes */
[data-theme="dark"] .text-yellow-400,
[data-theme="light"] .text-yellow-400 {
    color: #fbbf24 !important;
}

/* Specific price styling for pricing cards */
[data-theme="dark"] .pricing-card .text-yellow-400,
[data-theme="light"] .pricing-card .text-yellow-400,
[data-theme="dark"] .sloep-card .text-yellow-400,
[data-theme="light"] .sloep-card .text-yellow-400 {
    color: #fbbf24 !important;
}

/* Force specific text colors in dark mode */
[data-theme="dark"] .text-gray-900.dark\:text-white {
    color: #ffffff !important;
}

[data-theme="dark"] .text-gray-600.dark\:text-gray-300 {
    color: #d1d5db !important;
}

[data-theme="dark"] .text-gray-500.dark\:text-gray-400 {
    color: #9ca3af !important;
}

/* Force specific text colors in light mode */
[data-theme="light"] .text-white.dark\:text-gray-900 {
    color: #111827 !important;
}

[data-theme="light"] .text-gray-300.dark\:text-gray-600 {
    color: #4b5563 !important;
}

[data-theme="light"] .text-gray-400.dark\:text-gray-500 {
    color: #6b7280 !important;
}

/* Additional overrides for common issues */
[data-theme="dark"] .bg-white {
    background-color: #1f2937 !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: #111827 !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: #374151 !important;
}

[data-theme="light"] .bg-gray-800 {
    background-color: #ffffff !important;
}

[data-theme="light"] .bg-gray-900 {
    background-color: #f9fafb !important;
}

/* Ensure proper text contrast */
[data-theme="dark"] .bg-white .text-gray-900 {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-gray-50 .text-gray-900 {
    color: #ffffff !important;
}

[data-theme="light"] .bg-gray-800 .text-white {
    color: #111827 !important;
}

[data-theme="light"] .bg-gray-900 .text-white {
    color: #111827 !important;
}

/* Sloep card styling */
[data-theme="dark"] .sloep-card {
    background-color: #1f2937 !important;
}

[data-theme="dark"] .sloep-card * {
    color: #ffffff !important;
}

[data-theme="dark"] .sloep-card .text-yellow-400,
[data-theme="light"] .sloep-card .text-yellow-400 {
    color: #fbbf24 !important;
}

/* Pricing card styling */
[data-theme="dark"] .pricing-card {
    background-color: #1f2937 !important;
}

[data-theme="dark"] .pricing-card * {
    color: #ffffff !important;
}

[data-theme="dark"] .pricing-card .text-yellow-400,
[data-theme="light"] .pricing-card .text-yellow-400 {
    color: #fbbf24 !important;
}

/* Sloep card text colors */
[data-theme="dark"] .sloep-card .text-gray-600,
[data-theme="dark"] .sloep-card .text-gray-300,
[data-theme="dark"] .sloep-card .text-gray-500,
[data-theme="dark"] .sloep-card p,
[data-theme="dark"] .sloep-card span,
[data-theme="dark"] .sloep-card li {
    color: #d1d5db !important;
}

[data-theme="dark"] .sloep-card h3,
[data-theme="dark"] .sloep-card .text-2xl,
[data-theme="dark"] .sloep-card .font-bold,
[data-theme="dark"] .sloep-card .luxury-font {
    color: #ffffff !important;
}

/* Price display styling */
[data-theme="dark"] .text-4xl.font-bold.text-yellow-400,
[data-theme="light"] .text-4xl.font-bold.text-yellow-400 {
    color: #fbbf24 !important;
}

/* Typography */
.luxury-font {
    font-family: 'Playfair Display', serif;
}

/* Glass effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .glass-effect {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .glass-effect {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradients */
.gradient-navy {
    background: linear-gradient(135deg, var(--primary-navy), var(--secondary-navy));
}

.gradient-gold {
    background: linear-gradient(135deg, var(--accent-gold), var(--luxury-gold));
}

/* Shadows */
.luxury-shadow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .luxury-shadow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .luxury-shadow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Buttons */
.luxury-btn {
    background: linear-gradient(135deg, var(--accent-gold), var(--luxury-gold));
    color: var(--text-dark);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.luxury-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.3);
}

/* Navigation */
.nav-link {
    position: relative;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
}

/* Navigation text colors for different themes */
[data-theme="light"] .nav-link {
    color: #111827 !important;
}

[data-theme="dark"] .nav-link {
    color: #ffffff !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent-gold);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Hero section */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary-navy), var(--secondary-navy));
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.1;
}

/* Sections */
.section-navy {
    background: linear-gradient(135deg, var(--primary-navy), var(--secondary-navy));
}

/* Cards */
.pricing-card {
    background: var(--card-color);
    border-radius: 24px;
    padding: 32px;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Language selector */
.language-selector {
    position: relative;
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    min-width: 150px;
}

.language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Theme toggle */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Theme toggle colors for different themes */
[data-theme="light"] .theme-toggle {
    color: #fbbf24 !important;
}

[data-theme="dark"] .theme-toggle {
    color: #ffffff !important;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* Sloep cards */
.sloep-card {
    background: var(--card-color);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-theme="light"] .sloep-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .sloep-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sloep-card:hover {
    transform: translateY(-8px);
}

[data-theme="light"] .sloep-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .sloep-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Luxury badge */
.luxury-badge {
    background: linear-gradient(135deg, var(--accent-gold), var(--luxury-gold));
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

/* Responsive design */
@media (max-width: 768px) {
    .hero-section {
        min-height: 80vh;
    }
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax effect */
.parallax {
    transform: translateY(var(--scroll-offset, 0));
}