:root { color-scheme: dark; --page-bg: #09091d; --page-text: #f4f1ff; --theme-border: #4b426b; --theme-glass: #ffffff0d; }
:root[data-theme='light'] { color-scheme: light; --page-bg: #f7f8fc; --page-text: #171b39; --theme-border: #c4bfdb; --theme-glass: #ffffffb8; }
body { background: var(--page-bg); color: var(--page-text); transition: background-color .25s, color .25s; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--theme-border); border-radius: 50%; background: var(--theme-glass); color: var(--page-text); backdrop-filter: blur(12px); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.theme-toggle:hover { transform: rotate(-12deg); box-shadow: 0 0 20px #9656f640; }
.theme-toggle:focus-visible { outline: 3px solid #9860ea; outline-offset: 4px; }
.theme-moon { display: none; }
[data-theme='light'] .theme-sun { display: none; }
[data-theme='light'] .theme-moon { display: block; }
[data-theme='light'] :is(.logo,.ghost,.tiny-cta,.navlinks a,footer a,.whatsapp) { color: #222442; }
[data-theme='light'] :is(.logo span,.eyebrow,.service div p,.matcher small,.scroll-note span,.card-b span) { color: #7037b9; }
[data-theme='light'] :is(.hero-text,.service>span,.service p,.fit-intro>p:not(.eyebrow),.contact-side>p,.result>p,.scroll-note,footer p) { color: #575b72; }
[data-theme='light'] :is(.hero em,.fit h2 em,.contact h2 em,.services h2 em,.result em) { background-image: linear-gradient(105deg,#7138bf,#aa287d); }
[data-theme='light'] :is(.tiny-cta,.ghost,.service-list,.service,.contact,footer) { border-color: #cbcddd; }
[data-theme='light'] .primary { background: #7439c4; color: #fff; box-shadow: 0 12px 30px #7439c428; }
[data-theme='light'] .float-card { background: #ffffffbd; color: #353454; border-color: #fff; box-shadow: 0 15px 40px #35206e20; }
[data-theme='light'] .float-card strong { color: #682eaa; }
[data-theme='light'] .glass-disc { color: #30204d; border-color: #fff; background: linear-gradient(145deg,#ffffffc9,#b69ae770 40%,#efb6e6aa); box-shadow: inset 12px 12px 20px #fff8,inset -15px -20px 40px #8664bf38,0 0 100px #8755ee30; }
[data-theme='light'] .orbit-text { color: #673ba1; border-color: #75618f40; }
[data-theme='light'] .orb-one { background: #b792ef; }
[data-theme='light'] .fit-points { color: #514866; }
[data-theme='light'] .matcher { background: #ffffffbd; border-color: #d5cce9; box-shadow: 0 20px 65px #3b236410; }
[data-theme='light'] .progress { background: #ded5ed; }
[data-theme='light'] .progress span { background: #7439c4; }
[data-theme='light'] .choices button { background: #f2eef9; border-color: #d6cbe9; color: #27213f; }
[data-theme='light'] .choices button:hover { background: #7439c4; color: #fff; }
[data-theme='light'] .contact .light { background: #222441; color: #fff; }
/* Portfolio surfaces follow the selected theme; original cover colors stay intact. */
[data-theme='light'] .work { color: #23203b; background: radial-gradient(ellipse at 50% 55%, #e8ddfa 0%, transparent 65%), #f3f1f9; }
[data-theme='light'] .work::before, [data-theme='light'] .work::after { opacity: .1; }
[data-theme='light'] .work .eyebrow { color: #7037b9; }
[data-theme='light'] .work .horizontal > p { color: #57516d; }
[data-theme='light'] .work h2 em { background-image: linear-gradient(105deg,#7138bf,#aa287d); }
[data-theme='light'] .work-stage.wheel-stage .behance-project { background: #ffffff; color: #27213f; border-color: #d8cde9; box-shadow: 0 14px 36px #37205120; }
[data-theme='light'] .work-stage.wheel-stage .behance-project.active { box-shadow: 0 0 55px #9860d52b, 0 18px 40px #37205126; }
[data-theme='light'] .wheel-stage .project-cover { background: #efedf5; }
[data-theme='light'] .wheel-stage .project-info { background: #ffffff; }
[data-theme='light'] .wheel-stage .project-info p { color: #625575; }
[data-theme='light'] .work-controls { color: #514565; }
[data-theme='light'] .work-controls button { color: #60329d; border-color: #c7b6df; background: #ffffff; }
[data-theme='light'] .work-controls button:hover { color: #ffffff; background: #7439c4; }
@media (max-width: 400px) { .nav-actions { gap: 8px; } .tiny-cta { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { body,.theme-toggle { transition: none; } }