/* Light Theme (Default) */
:root {
    --text-color: #1e293b;
    --text-light: #334155;
    --text-lighter: #64748b;
    --bg-color: #f1f5f9;
    --bg-light: #e2e8f0;
    --bg-dark: #cbd5e1;
    --border-color: #94a3b8;
}

/* Dark Theme */
[data-theme="dark"] {
    --text-color: #f0f0f0;
    --text-light: #c0c0c0;
    --text-lighter: #888;
    --bg-color: #121212;
    --bg-light: #1e1e1e;
    --bg-dark: #2d2d2d;
    --border-color: #444;
}

/* Apply dark theme to specific elements when dark mode is active */
[data-theme="dark"] .course-card,
[data-theme="dark"] .video-card,
[data-theme="dark"] .career-card,
[data-theme="dark"] .testimonial {
    background-color: var(--bg-dark);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

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

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

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

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

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

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

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