:root {
    --theme-transition: 0.35s;
}

body {
    transition: background-color var(--theme-transition) ease, color var(--theme-transition) ease;
} 
/* themes for site; light and dark mode */
.nav-toggle-item {
    display: flex;
    align-items: center;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--neutral-200);
    background: rgba(117, 48, 241, 0.08);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-800);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-purple);
    outline-offset: 3px;
}

.theme-toggle-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f4cf7c;
    box-shadow: 0 0 12px rgba(244, 207, 124, 0.45);
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
    transform: translate(4px, -2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-toggle[data-theme-state="dark"] {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--neutral-800);
}

.theme-toggle[data-theme-state="dark"] .theme-toggle-icon {
    transform: rotate(25deg);
    background: #f7e598;
    box-shadow: 0 0 14px rgba(247, 229, 152, 0.55);
}

.theme-toggle[data-theme-state="dark"] .theme-toggle-icon::after {
    opacity: 1;
    background: #0c0d18;
}

.theme-toggle-label {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .theme-toggle-label {
        display: none;
    }
}

body.theme-dark {
    --neutral-50: #05050a;
    --neutral-100: #080812;
    --neutral-200: rgba(255, 255, 255, 0.12);
    --neutral-300: rgba(255, 255, 255, 0.16);
    --neutral-600: #bdc3e5;
    --neutral-700: #d8ddfb;
    --neutral-800: #f4f5ff;
    --neutral-900: #ffffff;
    --glass-bg: rgba(13, 14, 26, 0.9);
    --glass-border: rgba(255, 255, 255, 0.08);
    background-color: var(--neutral-50);
    color: var(--neutral-800);
}

body.theme-dark .header {
    background: rgba(5, 5, 12, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
}

body.theme-dark .logo {
    color: #e8dcff;
    text-shadow: 0 0 12px rgba(117, 48, 241, 0.65), 0 5px 18px rgba(60, 27, 118, 0.6);
}

body.theme-dark .header.scrolled {
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.6);
}

body.theme-dark .nav-link {
    color: var(--neutral-700);
}

body.theme-dark .services,
body.theme-dark .pricing,
body.theme-dark .resources,
body.theme-dark .stories,
body.theme-dark .year-groups,
body.theme-dark .updates {
    background: rgba(7, 8, 18, 0.95);
}

body.theme-dark .service-card.coming-soon {
    background: rgba(13, 14, 26, 0.75);
    border-style: solid;
}

body.theme-dark .coming-soon-badge span {
    background: rgba(6, 6, 14, 0.9);
    color: var(--neutral-800);
}

body.theme-dark .modal-content,
body.theme-dark .testimonial-card,
body.theme-dark .resource-card,
body.theme-dark .story-card,
body.theme-dark .pricing-card,
body.theme-dark .detail-card,
body.theme-dark .impact-card,
body.theme-dark .year-group-card,
body.theme-dark .coming-card,
body.theme-dark .updates-card,
body.theme-dark .ml-form-embedWrapper,
body.theme-dark .ml-form-embedWrapper.embedForm {
    background: rgba(11, 12, 24, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}


body.theme-dark .form-group input:focus,
body.theme-dark .form-group select:focus,
body.theme-dark .ml-form-embedWrapper input:focus,
body.theme-dark .ml-form-embedWrapper .custom-select:focus {
    background: rgba(255, 255, 255, 0.05);
}

body.theme-dark .site-footer {
    background: #05050a;
}