/* ==========================================================================
   Dark Mode Theme - Kilombo Tenondé
   ========================================================================== */

[data-theme="dark"] {
    --color-bg: #0F1712;
    --color-surface: #18211B;
    --color-sand: #131C16;
    --color-accent: #5D9A78;
    --color-accent-dark: #366B51;
    --color-accent-light: rgba(65, 104, 81, 0.38);

    --color-text: #F7F1E7;
    --color-text-secondary: #CDD8CD;
    --color-text-muted: #8FA592;

    --color-border: rgba(143, 165, 146, 0.24);

    --color-error: #EF4444;
    --color-error-dark: #F87171;
    --color-success: #22C55E;
    --color-success-dark: #4ADE80;
    --color-warning: #F59E0B;
    --color-warning-dark: #FBBF24;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.4);

    --gradient-sand: #18211B;
    --gradient-cream: #0F1712;
}

/* ==========================================================================
   Transition Control - Prevent flash on load
   ========================================================================== */
html:not(.theme-loaded) *,
html:not(.theme-loaded) *::before,
html:not(.theme-loaded) *::after {
    transition: none !important;
}

/* ==========================================================================
   Navigation Dark Mode
   ========================================================================== */
[data-theme="dark"] .nav {
    background: rgba(13, 19, 15, 0.92);
    border-bottom-color: rgba(143, 165, 146, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .nav-logo {
    color: var(--color-text);
}

[data-theme="dark"] .nav-logo:hover {
    color: var(--color-accent);
}

[data-theme="dark"] .nav-links a {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .nav-links a:hover {
    color: var(--color-text);
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .nav-links a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
}

[data-theme="dark"] .nav-toggle {
    background: rgba(13, 19, 15, 0.86);
    border-color: rgba(143, 165, 146, 0.18);
    color: var(--color-text);
}

[data-theme="dark"] .nav-toggle:hover {
    background: rgba(13, 19, 15, 0.95);
    border-color: rgba(143, 165, 146, 0.3);
}

[data-theme="dark"] .theme-toggle {
    background: rgba(13, 19, 15, 0.86);
    border-color: rgba(143, 165, 146, 0.18);
    color: var(--color-text);
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--color-accent-light);
}

[data-theme="dark"] .theme-toggle svg {
    stroke: var(--color-text-secondary);
}

[data-theme="dark"] .theme-toggle:hover svg {
    stroke: var(--color-text);
}

@media (max-width: 1180px) {
    [data-theme="dark"] .nav-links {
        background: rgba(26, 31, 26, 0.98);
        border-color: rgba(61, 74, 61, 0.5);
    }
}

/* ==========================================================================
   Language Switcher Dark Mode
   ========================================================================== */
[data-theme="dark"] .language-trigger {
    background: rgba(45, 53, 45, 0.7);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .language-trigger:hover {
    border-color: var(--color-accent);
    background: var(--color-surface);
}

[data-theme="dark"] .language-list {
    background: rgba(37, 43, 37, 0.98);
    border-color: rgba(61, 74, 61, 0.3);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .language-option {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .language-option:hover,
[data-theme="dark"] .language-option.active {
    background: var(--color-accent-light);
    color: var(--color-text);
}

[data-theme="dark"] .language-option-flag,
[data-theme="dark"] .language-flag {
    filter: none;
}

[data-theme="dark"] .lang-btn {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .lang-btn:hover,
[data-theme="dark"] .lang-btn.active {
    background: var(--color-accent-light);
    color: var(--color-text);
}

/* ==========================================================================
   Hero Section Dark Mode
   ========================================================================== */
[data-theme="dark"] .hero {
    background:
        linear-gradient(120deg, rgba(8, 13, 10, 0.86) 0%, rgba(15, 23, 18, 0.74) 38%, rgba(23, 58, 43, 0.56) 100%),
        url('/assets/kilombobg.JPG');
    background-size: 400% 400%, cover;
    background-position: 0% 50%, center;
    background-attachment: scroll, fixed;
    color: var(--color-text);
}

[data-theme="dark"] .hero-content {
    background: rgba(12, 18, 14, 0.58);
    border-color: rgba(143, 165, 146, 0.18);
    box-shadow: 0 38px 72px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .hero h1 {
    color: var(--color-text);
    text-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .hero .subtitle,
[data-theme="dark"] .hero .text-lead {
    color: #d6dfd5;
}

[data-theme="dark"] .hero .date {
    color: var(--color-text-muted);
}

[data-theme="dark"] .hero::before {
    background: radial-gradient(circle,
        rgba(45, 90, 61, 0.2) 0%,
        rgba(26, 31, 26, 0.1) 40%,
        rgba(26, 31, 26, 0) 70%
    );
}

[data-theme="dark"] .hero::after {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(45, 90, 61, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(61, 74, 61, 0.03) 1px, transparent 1px);
}

/* ==========================================================================
   Section Dark Mode
   ========================================================================== */
[data-theme="dark"] .section-alt {
    background-color: var(--color-sand);
}

[data-theme="dark"] .section-sand {
    background: var(--color-sand);
}

[data-theme="dark"] .section-accent {
    background: linear-gradient(135deg, #1F4029 0%, #152D1F 100%);
}

[data-theme="dark"] .section-cosmo {
    background: linear-gradient(135deg, #1A3A2A 0%, #0F2418 100%);
}

[data-theme="dark"] .section-divider {
    background: var(--color-accent);
}

/* ==========================================================================
   Card Dark Mode
   ========================================================================== */
[data-theme="dark"] .card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3), 0 10px 20px -5px rgba(0,0,0,0.2);
}

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

[data-theme="dark"] .card:hover .card-title {
    color: var(--color-accent);
}

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

/* ==========================================================================
   Form Dark Mode
   ========================================================================== */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .form-input:hover,
[data-theme="dark"] .form-select:hover,
[data-theme="dark"] .form-textarea:hover {
    border-color: var(--color-text-muted);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(45, 90, 61, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] .form-label {
    color: var(--color-text);
}

[data-theme="dark"] .form-check-label {
    color: var(--color-text);
}

/* ==========================================================================
   Button Variants Dark Mode
   ========================================================================== */
[data-theme="dark"] .btn-secondary {
    background: rgba(255,255,255,0.06);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    background: rgba(255,255,255,0.10);
}

[data-theme="dark"] .btn-ghost {
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    border-color: rgba(143, 165, 146, 0.14);
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    color: var(--color-text);
}

[data-theme="dark"] .btn-white {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

[data-theme="dark"] .btn-white:hover {
    background: var(--color-text-secondary);
    color: var(--color-bg);
}

/* ==========================================================================
   Footer Dark Mode
   ========================================================================== */
[data-theme="dark"] .footer {
    background: #0F120F;
    color: var(--color-text-secondary);
}

[data-theme="dark"] .footer-brand {
    color: var(--color-text);
}

[data-theme="dark"] .footer-text {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .footer-heading {
    color: var(--color-text);
}

[data-theme="dark"] .footer-links a {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .footer-links a:hover {
    color: var(--color-text);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .footer-bottom p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .footer-input {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .footer-input::placeholder {
    color: var(--color-text-muted) !important;
}

/* ==========================================================================
   Typography Dark Mode
   ========================================================================== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text);
}

[data-theme="dark"] .text-lead {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .text-secondary {
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Products Dark Mode
   ========================================================================== */
[data-theme="dark"] .product-card {
    background: var(--color-surface);
}

[data-theme="dark"] .product-name {
    color: var(--color-text);
}

[data-theme="dark"] .product-description {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .product-price {
    color: var(--color-accent);
}

[data-theme="dark"] .filter-btn {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .filter-btn:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    color: var(--color-text);
}

[data-theme="dark"] .filter-btn.active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: white;
}

[data-theme="dark"] .cart-sidebar {
    background: var(--color-surface);
}

[data-theme="dark"] .cart-item {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .cart-total {
    border-top-color: var(--color-border);
    color: var(--color-text);
}

/* ==========================================================================
   Event / Topic / FAQ Cards Dark Mode
   ========================================================================== */
[data-theme="dark"] .event-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .topic-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .topic-card p {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .faq-item {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* ==========================================================================
   Booking / Room Cards Dark Mode
   ========================================================================== */
[data-theme="dark"] .room-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .room-card:hover {
    border-color: var(--color-accent);
}

[data-theme="dark"] .room-card.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

[data-theme="dark"] .feature-tag {
    background: var(--color-accent-light);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .booking-form {
    background: var(--color-surface);
}

[data-theme="dark"] .selected-room-info {
    background: var(--color-accent-light);
}

[data-theme="dark"] .price-calculator {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(61, 74, 61, 0.5) 100%);
    border-color: var(--color-border);
}

[data-theme="dark"] .stay-rates {
    background: var(--color-accent-light);
}

[data-theme="dark"] .volunteer-note {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

/* ==========================================================================
   Contact Page Dark Mode
   ========================================================================== */
[data-theme="dark"] .contact-card {
    background: var(--color-surface);
}

[data-theme="dark"] .form-card {
    background: var(--color-surface);
}

[data-theme="dark"] .map-section {
    background: var(--color-sand);
}

/* ==========================================================================
   Booking Page Dark Mode (compact)
   ========================================================================== */
[data-theme="dark"] .room-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .room-card:hover {
    border-color: var(--color-accent);
}
[data-theme="dark"] .room-card.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}
[data-theme="dark"] .room-tag {
    background: var(--color-accent-light);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .booking-sidebar {
    background: var(--color-surface);
}
[data-theme="dark"] .info-bar {
    background: var(--color-accent-light);
}
[data-theme="dark"] .sel-room {
    background: var(--color-accent-light);
}
[data-theme="dark"] .price-box {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(61, 74, 61, 0.5) 100%);
}
[data-theme="dark"] .booking-chip {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .booking-chip:hover {
    border-color: var(--color-accent);
}
[data-theme="dark"] .booking-chip.active {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}
[data-theme="dark"] .group-note {
    background: rgba(93, 154, 120, 0.08);
    border-color: rgba(93, 154, 120, 0.16);
}

/* ==========================================================================
   Instagram Feed Dark Mode
   ========================================================================== */
[data-theme="dark"] .instagram-item {
    background: var(--color-surface);
}

[data-theme="dark"] .instagram-follow {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
    [data-theme="dark"] {
        --color-bg: #FFFFFF;
        --color-surface: #FFFFFF;
        --color-text: #000000;
        --color-text-secondary: #333333;
    }
}