/* 
   CodeMaster - Dark Theme Style Overrides
   Dynamically overrides CSS design tokens when .dark-theme class is active
*/

.dark-theme {
    /* Backgrounds override */
    --bg-primary: #0b0f19;       /* Slate 950 */
    --bg-secondary: #111827;     /* Gray 900 */
    --bg-tertiary: #1f2937;      /* Gray 800 */
    --bg-footer: #030712;        /* Gray 950 */
    
    /* Text Colors override */
    --text-primary: #f9fafb;     /* Gray 50 */
    --text-secondary: #d1d5db;   /* Gray 300 */
    --text-muted: #9ca3af;       /* Gray 400 */
    
    /* Borders override */
    --border-color: #1f2937;     /* Gray 800 */
    --border-focus: #6366f1;     /* Indigo 500 */
    
    /* Glassmorphism override */
    --glass-bg: rgba(17, 24, 39, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    
    /* Box Shadows override */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* Toggle icon display state */
.dark-theme .theme-toggle-btn .sun-icon {
    display: block;
    color: #f59e0b; /* Amber 500 for sun */
}

.dark-theme .theme-toggle-btn .moon-icon {
    display: none;
}

/* Soft styling adjustments for dark theme cards */
.dark-theme .card {
    background-color: var(--bg-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-theme .card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
}

.dark-theme .accordion-header {
    background-color: var(--bg-tertiary);
}

.dark-theme .accordion-header:hover {
    background-color: #374151; /* Gray 700 */
}

.dark-theme .accordion-item.active .accordion-header {
    background-color: rgba(99, 102, 241, 0.15);
}

.dark-theme .content-box {
    background-color: #1f2937;
}

.dark-theme .box-note {
    background-color: rgba(99, 102, 241, 0.05);
}

.dark-theme .box-tip {
    background-color: rgba(6, 182, 212, 0.05);
}

.dark-theme .output-preview {
    background-color: #1f2937;
    border-color: var(--border-color);
}

.dark-theme .output-content {
    background-color: #111827;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-theme .article-nav-btn:hover {
    background-color: rgba(99, 102, 241, 0.05);
}

.dark-theme .todo-widget,
.dark-theme .quiz-widget,
.dark-theme .password-widget {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-theme .todo-item,
.dark-theme .quiz-option-btn,
.dark-theme .password-display-box {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.dark-theme .todo-input-group input,
.dark-theme .form-group input,
.dark-theme .form-group textarea,
.dark-theme .form-group select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-theme .todo-input-group input:focus,
.dark-theme .form-group input:focus,
.dark-theme .form-group textarea:focus,
.dark-theme .form-group select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.dark-theme .testimonial-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}