/* ========================================
   DARK MODE STYLES
   ======================================== */

[data-theme="dark"] {
    /* Dark Mode Colors */
    --primary-color: #FBBF24;
    --primary-dark: #F59E0B;
    --primary-light: #FCD34D;

    --secondary-color: #34D399;
    --secondary-dark: #10B981;
    --secondary-light: #6EE7B7;

    --accent-color: #F87171;
    --accent-light: #FCA5A5;

    --background: #0A0A0A;
    --surface: #161616;
    --surface-elevated: #222222;

    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;

    --border-color: #2D2D2D;
    --border-light: #383838;

    /* Dark Gradients */
    --gradient-primary: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --gradient-secondary: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    --gradient-hero: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);

    /* Dark Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --shadow-warm: 0 10px 30px rgba(251, 191, 36, 0.2);
}

/* Dark Mode Specific Adjustments */
[data-theme="dark"] .navbar {
    background: rgba(18, 18, 18, 0.95);
}

[data-theme="dark"] .hero-pattern {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(251, 191, 36, 0.05) 35px, rgba(251, 191, 36, 0.05) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(52, 211, 153, 0.05) 35px, rgba(52, 211, 153, 0.05) 70px);
}

[data-theme="dark"] .mystery-overlay {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.85) 0%, rgba(52, 211, 153, 0.85) 100%);
}

[data-theme="dark"] .box-badge {
    background: var(--surface-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .box-badge.premium {
    background: var(--gradient-primary);
    color: var(--background);
}

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

[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: block;
}

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

[data-theme="dark"] .user-avatar {
    border-color: var(--border-light);
}

[data-theme="dark"] .user-avatar:hover {
    border-color: var(--primary-color);
}

/* Dark Mode Image Overlays */
[data-theme="dark"] .box-card-image::after,
[data-theme="dark"] .recipe-image::after,
[data-theme="dark"] .history-card img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
}

/* Dark Mode Scroll Bar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--background);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--surface-elevated);
    border-radius: var(--radius-full);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ========== DARK MODE COMPONENT CONTRAST FIXES ========== */

/* Navbar */
[data-theme="dark"] .navbar {
    background: rgba(22, 22, 22, 0.97);
    border-bottom-color: var(--border-color);
}

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

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

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

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

/* Buttons */
[data-theme="dark"] .btn-secondary {
    background: var(--surface-elevated);
    border-color: var(--border-light);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Form Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--surface-elevated);
    border-color: var(--border-light);
    color: var(--text-primary);
}

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

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Cards */
[data-theme="dark"] .box-card,
[data-theme="dark"] .recipe-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .value-card,
[data-theme="dark"] .community-card,
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .auth-card {
    border-color: var(--border-color);
}

/* Section alterate backgrounds */
[data-theme="dark"] .testimonials,
[data-theme="dark"] section[style*="var(--surface-elevated)"] {
    background: var(--surface) !important;
}

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

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

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

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

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

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

/* Section header text */
[data-theme="dark"] .section-description {
    color: var(--text-secondary);
}

/* Dashboard nav */
[data-theme="dark"] .dashboard-nav {
    background: rgba(22, 22, 22, 0.97);
    border-bottom-color: var(--border-color);
}

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

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

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

/* Tables */
[data-theme="dark"] .comparison-table {
    background: var(--surface);
}

[data-theme="dark"] .comparison-table th,
[data-theme="dark"] .comparison-table td {
    border-color: var(--border-color);
}

[data-theme="dark"] .comparison-table thead {
    background: var(--surface-elevated);
}

/* Mobile menu */
[data-theme="dark"] .nav-menu {
    background: var(--surface);
    border-color: var(--border-color);
}

/* ========== AUTH PAGE DARK MODE CONTRAST ========== */

/* Auth card — distinct from page background */
[data-theme="dark"] .auth-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* Social login buttons — must stand out from the card */
[data-theme="dark"] .social-btn {
    background: var(--surface-elevated);
    border: 1.5px solid #484848;
    color: var(--text-primary);
}

[data-theme="dark"] .social-btn:hover {
    background: #2a2a2a;
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* Auth divider line & text */
[data-theme="dark"] .auth-divider::before {
    background: #3a3a3a;
}

[data-theme="dark"] .auth-divider span {
    background: var(--surface);
    color: var(--text-muted);
}

/* Form labels */
[data-theme="dark"] .form-group label {
    color: var(--text-secondary);
}

/* Auth title & description */
[data-theme="dark"] .auth-title {
    color: var(--text-primary);
}

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

/* Remember me / forgot password */
[data-theme="dark"] .form-checkbox label {
    color: var(--text-secondary);
}

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

/* Auth switch link */
[data-theme="dark"] .auth-switch {
    color: var(--text-secondary);
}

[data-theme="dark"] .auth-switch a {
    color: var(--primary-color);
}

/* Auth logo on auth pages */
[data-theme="dark"] .auth-logo {
    color: var(--text-primary);
}

/* Home button on auth pages */
[data-theme="dark"] a.btn-secondary {
    background: var(--surface-elevated);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* ========== RECIPE PAGE DARK MODE CONTRAST ========== */

/* Filter buttons — inactive state */
[data-theme="dark"] .filter-btn {
    background: var(--surface-elevated);
    border-color: #505050;
    color: var(--text-primary);
}

[data-theme="dark"] .filter-btn:hover {
    background: #2e2e2e;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Filter buttons — active state (already uses gradient, just ensure text is white) */
[data-theme="dark"] .filter-btn.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #000;
    font-weight: 700;
}

/* Search bar input */
[data-theme="dark"] .search-bar input {
    background: var(--surface-elevated);
    border-color: #505050;
    color: var(--text-primary);
}

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

[data-theme="dark"] .search-bar input:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Filter selects */
[data-theme="dark"] .filter-select {
    background: var(--surface-elevated);
    border-color: #505050;
    color: var(--text-primary);
}

[data-theme="dark"] .filter-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Recipe tags */
[data-theme="dark"] .recipe-tags .tag {
    background: #2e2e2e;
    color: var(--text-secondary);
}

/* Recipe category badge */
[data-theme="dark"] .recipe-category {
    background: #2a2a2a;
    color: var(--primary-color);
}