body.dark-mode,
html.dark-mode {
    --primary: #e5eeff;
    --primary-2: #d7e3ff;
    --accent: #7ec8ff;
    --accent-2: #9fdaff;
    --white: #ffffff;
    --text: #edf3ff;
    --muted: #b7c3d8;
    --bg: #07111f;
    --surface: rgba(10, 18, 33, 0.72);
    --surface-solid: #0c1728;
    --border: rgba(165, 198, 255, 0.12);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
body.dark-mode {
    background:
        radial-gradient(circle at top left, rgba(108, 195, 255, 0.1), transparent 25%),
        radial-gradient(circle at top right, rgba(106, 92, 255, 0.12), transparent 25%),
        var(--bg);
}
body.dark-mode .alt-section { background: linear-gradient(180deg, rgba(8, 16, 30, 0.72), rgba(10, 18, 33, 0.94)); }
body.dark-mode .hero-badges span,
body.dark-mode .contact-data > div,
body.dark-mode .theme-switch,
body.dark-mode .user-chip,
body.dark-mode .nav,
body.dark-mode .modal-close,
body.dark-mode .contact-form,
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .auth-form input,
body.dark-mode .auth-tab.active,
body.dark-mode .stat-card,
body.dark-mode .service-card,
body.dark-mode .blog-card {
    background: var(--surface-solid);
    color: var(--text);
}
body.dark-mode .hero-shot,
body.dark-mode .about-shot { background: linear-gradient(180deg, rgba(16, 28, 49, .8), rgba(9, 18, 34, .95)); }
body.dark-mode .btn-outline { color: var(--text); border-color: var(--border); }
body.dark-mode .footer { background: #040b16; }

.dark-mode .project-card,
.dark-mode .empty-state {
    background: rgba(17, 24, 39, .72);
}
.dark-mode .search-box input,
.dark-mode .project-form input,
.dark-mode .project-form textarea,
.dark-mode .project-form select {
    background: rgba(17, 24, 39, .92);
}