/* assets/css/theme.css - Light and dark theme styles */

/* Light mode styles */
body.light-mode {
    background: #ffffff;
    color: #1F2937;
}

body.light-mode .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.light-mode .logo {
    color: #000000;
}

body.light-mode .nav-menu li a {
    color: #374151;
}

body.light-mode .auth-btn {
    color: #374151;
}

body.light-mode .theme-toggle {
    color: #374151;
}

body.light-mode .card {
    background: #ffffff;
    border-color: #F1F5F9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.light-mode .card:hover {
    border-color: #E2E8F0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

body.light-mode .hero-section {
    background: #ffffff;
}

body.light-mode .stat-item {
    background: #ffffff;
    border-color: #F3F4F6;
}

body.light-mode .code-demo {
    background: #ffffff;
    border-color: #F3F4F6;
}

body.light-mode .feature-item {
    background: #F9FAFB;
    border-color: #E5E7EB;
}

body.light-mode .feature-item:hover {
    background: #FFFBEB;
    border-color: #FFD700;
}

body.light-mode .stat-item-small {
    background: #ffffff;
    border-color: #F3F4F6;
}

body.light-mode .stat-item-small:hover {
    border-color: #FFD700;
}

/* Dark mode styles */
body.dark-mode {
    background: #000000;
    color: #F9FAFB;
}

body.dark-mode .navbar {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #374151;
    box-shadow: 0 1px 3px rgba(255, 215, 0, 0.1);
}

body.dark-mode .nav-menu li a {
    color: #FFD700;
}

body.dark-mode .auth-btn {
    color: #FFD700;
}

body.dark-mode .theme-toggle {
    color: #FFD700;
}

body.dark-mode .hero-section {
    background: #000000;
}

body.dark-mode .hero-title {
    color: #FFD700;
}

body.dark-mode .hero-subtitle {
    color: #ffffff;
}

body.dark-mode .hero-description {
    color: #9CA3AF;
}

body.dark-mode .hero-card {
    background: #0F172A;
    border-color: #374151;
}

body.dark-mode .card-content {
    background: #0F172A;
}

body.dark-mode .problem-title {
    color: #F9FAFB;
}

body.dark-mode .problem-description {
    color: #9CA3AF;
}

body.dark-mode .section-title {
    color: #F9FAFB;
}

body.dark-mode .how-it-works-description {
    color: #9CA3AF;
}

body.dark-mode .stat-item {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .stat-label {
    color: #9CA3AF;
}

body.dark-mode .code-demo {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .code-filename {
    background: #374151;
    color: #F9FAFB;
    border-color: #4B5563;
}

body.dark-mode .code-content {
    background: #1F2937;
    color: #F9FAFB;
    border-color: #374151;
}

body.dark-mode .code-result {
    background: #064E3B;
    border-color: #10B981;
    color: #34D399;
}

body.dark-mode .code-stars {
    background: #451A03;
    border-color: #FFD700;
    color: #FFD700;
}

body.dark-mode .card {
    background: #0F172A;
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .card:hover {
    border-color: #475569;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card h3 {
    color: #F1F5F9;
}

body.dark-mode .card p {
    color: #94A3B8;
}

body.dark-mode .card ul li {
    color: #CBD5E1;
}

body.dark-mode .card ul li::before {
    color: #FFD700;
}

body.dark-mode .feature-item {
    background: #1F2937;
    border-color: #374151;
}

body.dark-mode .feature-item:hover {
    background: #451A03;
    border-color: #FFD700;
}

body.dark-mode .feature-content h4 {
    color: #F9FAFB;
}

body.dark-mode .feature-content p {
    color: #9CA3AF;
}

body.dark-mode .stat-item-small {
    background: #1F2937;
    border-color: #374151;
}

body.dark-mode .stat-item-small:hover {
    border-color: #FFD700;
}

body.dark-mode .stat-label-small {
    color: #9CA3AF;
}