/**
 * Moko.family - Premium Dark Mode
 * Apple-Level Design Philosophy:
 * - Warm, cozy dark colors (NOT pure black)
 * - Preserve the bedtime story warmth
 * - WCAG AA compliant contrast ratios
 * - Smooth transitions between modes
 * - Maintains glass morphism effects
 */

/* ========================================
   Dark Mode CSS Variables
   ======================================== */

[data-theme="dark"] {
    /* Primary Dark Background - Warm navy blue, not pure black */
    --color-bg-primary: #1A1D2E;
    --color-bg-secondary: #16192A;
    --color-bg-tertiary: #0F1117;

    /* Glass morphism for dark mode */
    --glass-bg: rgba(26, 29, 46, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    --glass-blur: blur(20px);

    /* Text colors - Higher contrast for readability */
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-text-tertiary: #9CA3AF;
    --color-text-muted: #6B7280;

    /* Preserve warm orange gradients (identity colors) */
    --color-primary: #FF9933;
    --color-primary-light: #FFB366;
    --color-secondary: #FF7F7F;

    /* Adjusted accent colors for dark mode */
    --color-accent-blue: #6CA6E6;
    --color-accent-purple: #A575C4;

    /* Updated gradients for dark mode */
    --gradient-primary: linear-gradient(135deg, #FF9933 0%, #FF7F7F 100%);
    --gradient-blue: linear-gradient(135deg, #6CA6E6 0%, #5A95D6 100%);
    --gradient-purple: linear-gradient(135deg, #A575C4 0%, #9561B4 100%);

    /* Dark background gradient - deep navy to purple */
    --gradient-background: linear-gradient(180deg, #1A1D2E 0%, #1E1B33 50%, #1A2534 100%);

    /* Card backgrounds - slightly lighter */
    --color-card-bg: rgba(30, 33, 46, 0.8);
    --color-card-border: rgba(255, 255, 255, 0.08);

    /* Interactive states */
    --color-hover-bg: rgba(255, 255, 255, 0.05);
    --color-active-bg: rgba(255, 255, 255, 0.1);

    /* Shadows - deeper and more dramatic */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* Glow effects for dark mode */
    --glow-primary: 0 0 20px rgba(255, 153, 51, 0.3);
    --glow-blue: 0 0 20px rgba(108, 166, 230, 0.3);
    --glow-purple: 0 0 20px rgba(165, 117, 196, 0.3);
}

/* ========================================
   Dark Mode Transitions
   ======================================== */

body,
.background-gradient,
.navbar,
.glass-effect,
.feature-card,
.download-card,
.footer {
    transition:
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Dark Mode Base Styles
   ======================================== */

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

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

/* ========================================
   Dark Mode - Moko Mascot
   ======================================== */

[data-theme="dark"] .moko-mascot-img {
    filter: drop-shadow(0 20px 60px rgba(255, 153, 51, 0.4));
}

[data-theme="dark"] .moko-mascot-container::before {
    background: radial-gradient(
        circle,
        rgba(255, 153, 51, 0.25) 0%,
        rgba(255, 153, 51, 0.15) 25%,
        rgba(255, 127, 127, 0.1) 50%,
        transparent 75%
    );
}

@keyframes mascotGlowDark {
    0%, 100% {
        filter: drop-shadow(0 20px 60px rgba(255, 153, 51, 0.4));
    }
    50% {
        filter: drop-shadow(0 25px 70px rgba(255, 153, 51, 0.6));
    }
}

[data-theme="dark"] .moko-mascot-img {
    animation: mascotGlowDark 3s ease-in-out infinite;
}

[data-theme="dark"] .moko-mascot-container:hover .moko-mascot-img {
    filter: drop-shadow(0 30px 80px rgba(255, 153, 51, 0.8));
}

/* ========================================
   Dark Mode - Floating Shapes
   ======================================== */

[data-theme="dark"] .shape {
    opacity: 0.15; /* More subtle in dark mode */
}

[data-theme="dark"] .shape-1 {
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
}

[data-theme="dark"] .shape-2 {
    background: radial-gradient(circle, var(--color-accent-blue) 0%, transparent 70%);
}

[data-theme="dark"] .shape-3 {
    background: radial-gradient(circle, var(--color-accent-purple) 0%, transparent 70%);
}

[data-theme="dark"] .shape-4 {
    background: radial-gradient(circle, var(--color-secondary) 0%, transparent 70%);
}

/* ========================================
   Dark Mode - Navbar
   ======================================== */

[data-theme="dark"] .navbar {
    background: rgba(26, 29, 46, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
                0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

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

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

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

[data-theme="dark"] .lang-toggle {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .lang-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .lang-dropdown {
    background: var(--color-bg-secondary);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}

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

[data-theme="dark"] .lang-option:hover {
    background: var(--color-hover-bg);
    color: var(--color-text-primary);
}

[data-theme="dark"] .lang-code {
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   Dark Mode - Hero Section
   ======================================== */

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

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

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

[data-theme="dark"] .btn-secondary {
    background: var(--glass-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--glass-border);
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: var(--glow-primary);
}

[data-theme="dark"] .stat-item {
    background: var(--glass-bg);
}

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

/* ========================================
   Dark Mode - Phone Mockup
   ======================================== */

[data-theme="dark"] .phone-frame {
    background: linear-gradient(145deg,
        rgba(234, 88, 12, 0.55) 0%,
        rgba(194, 65, 12, 0.45) 100%
    );
    border: 1px solid rgba(253, 200, 140, 0.9);
    box-shadow:
        /* Outer glow - stronger in dark mode */
        0 24px 64px rgba(194, 65, 12, 0.6),
        0 8px 24px rgba(234, 88, 12, 0.4),
        /* Inner highlight (top edge) - pure golden shine */
        inset 0 3px 8px rgba(255, 215, 170, 0.95),
        inset 0 1px 2px rgba(255, 230, 200, 1),
        /* Inner glow (bottom edge) */
        inset 0 -1px 2px rgba(194, 65, 12, 0.3),
        /* Strong outer golden glow */
        0 0 30px rgba(251, 146, 60, 0.3),
        0 0 50px rgba(234, 88, 12, 0.15);
}

[data-theme="dark"] .phone-screen-wrapper {
    background: #1C1C1E;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode: hide light image, show dark image */
[data-theme="dark"] .app-preview-light {
    opacity: 0;
}

[data-theme="dark"] .app-preview-dark {
    opacity: 1;
}

/* Dark Mode - Screen Effects */
[data-theme="dark"] .phone-screen-wrapper::before {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 60%
    );
}

[data-theme="dark"] .phone-screen-wrapper::after {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255, 255, 255, 0.05) 100%
    );
}

[data-theme="dark"] .screen-ripple {
    background: rgba(251, 146, 60, 0.5);
}

[data-theme="dark"] .phone-home-indicator {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 12px rgba(253, 186, 116, 0.4);
}

/* Dark Mode - Live Illustration 火堆光晕增强 */
[data-theme="dark"] .live-illustration::before {
    background: radial-gradient(
        ellipse at center,
        rgba(251, 146, 60, 0.4) 0%,
        rgba(249, 115, 22, 0.25) 30%,
        rgba(234, 88, 12, 0.15) 50%,
        transparent 70%
    );
    filter: blur(50px);
}

[data-theme="dark"] .phone-mockup {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .phone-screen {
    background: linear-gradient(180deg, #0F1117 0%, #1A1D2E 100%);
}

/* ========================================
   Dark Mode - Features Section
   ======================================== */

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

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

[data-theme="dark"] .feature-card {
    background: var(--glass-bg);
}

[data-theme="dark"] .feature-card:hover {
    background: rgba(30, 33, 46, 0.9);
    box-shadow: var(--shadow-xl);
}

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

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

/* ========================================
   Dark Mode - Story Showcase Section
   ======================================== */

[data-theme="dark"] .story-showcase {
    background: linear-gradient(180deg,
        rgba(26, 29, 46, 0.3) 0%,
        rgba(15, 17, 23, 0.2) 100%);
}

[data-theme="dark"] .story-book {
    background: var(--glass-bg);
}

[data-theme="dark"] .story-book:hover {
    background: rgba(30, 33, 46, 0.9);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.5);
}

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

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

/* ========================================
   Dark Mode - Download Section
   ======================================== */

[data-theme="dark"] .download-card {
    background: var(--glass-bg);
}

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

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

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

[data-theme="dark"] .download-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .download-btn .apple-icon {
    filter: brightness(0) invert(1);
}

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

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

[data-theme="dark"] .qr-code {
    background: var(--glass-bg);
}

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

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

[data-theme="dark"] .phone-preview {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .preview-screen {
    background: linear-gradient(180deg, #0F1117 0%, #1A1D2E 100%);
}

/* ========================================
   Dark Mode - Footer
   ======================================== */

[data-theme="dark"] .footer {
    background: rgba(26, 29, 46, 0.8);
    border-top: 1px solid var(--glass-border);
}

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

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

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

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

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

[data-theme="dark"] .social-link {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
}

/* ========================================
   Accessibility - Respect user preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] * {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #E5E7EB;
        --glass-border: rgba(255, 255, 255, 0.3);
    }
}

/* ========================================
   Dark Mode - Brand Story Section
   ======================================== */

[data-theme="dark"] .brand-story {
    background: linear-gradient(180deg,
        rgba(26, 29, 46, 0.5) 0%,
        rgba(30, 27, 51, 0.8) 50%,
        rgba(26, 29, 46, 0.5) 100%);
}

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

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

[data-theme="dark"] .story-quote {
    background: linear-gradient(135deg,
        rgba(255, 140, 0, 0.15) 0%,
        rgba(255, 107, 107, 0.15) 100%);
    border-left-color: var(--color-primary);
}

[data-theme="dark"] .story-quote p {
    color: var(--color-text-primary);
}

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

[data-theme="dark"] .brand-story-image {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1),
                0 0 40px rgba(255, 140, 0, 0.2);
}

/* ========================================
   Particle Canvas Dark Mode Adjustments
   ======================================== */

[data-theme="dark"] #moko-particles {
    /* Particles are slightly more visible in dark mode */
    opacity: 1;
    mix-blend-mode: screen; /* Better blending for dark backgrounds */
}

/* ========================================
   Dark Mode - Special Effects
   ======================================== */

/* Add subtle glow to important elements in dark mode */
[data-theme="dark"] .btn-primary {
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.2);
}

[data-theme="dark"] .gradient-text {
    /* Slightly brighter gradient for better visibility */
    background: linear-gradient(135deg, #FFB366 0%, #FF9999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhance glass effect borders in dark mode */
[data-theme="dark"] .glass-effect {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Add subtle inner glow to cards in dark mode */
[data-theme="dark"] .feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .feature-card:hover::before {
    opacity: 1;
}

/* ========================================
   Dark Mode - Mobile Overrides
   ======================================== */

/* Mobile: Ensure border-radius consistency with light mode */
@media (max-width: 768px) {
    [data-theme="dark"] .phone-frame {
        border-radius: 48px;
    }

    [data-theme="dark"] .phone-screen-wrapper {
        border-radius: 36px;
    }

    [data-theme="dark"] .app-preview-img {
        border-radius: 36px;
    }
}

@media (max-width: 480px) {
    [data-theme="dark"] .phone-frame {
        border-radius: 42px;
    }

    [data-theme="dark"] .phone-screen-wrapper {
        border-radius: 32px;
    }

    [data-theme="dark"] .app-preview-img {
        border-radius: 32px;
    }
}

/* ========================================
   Dark Mode - Print Styles
   ======================================== */

@media print {
    [data-theme="dark"] {
        /* Revert to light colors for printing */
        --color-text-primary: #1F2937;
        --color-text-secondary: #4B5563;
        --color-bg-primary: #FFFFFF;
        --glass-bg: rgba(255, 255, 255, 0.9);
    }
}