/* Same ES1M color roles, with a cool white canvas and stronger violet for contrast. */
:root[data-theme=light]{
 color-scheme:light;
 --color-void-black:#ffffff;--color-white:#191b25;--color-bone-white:#303344;
 --color-graphite-hairline:#dddfe9;--color-ash-gray:#66697b;--color-smoke-gray:#565b70;
 --color-iron:#74798c;--color-charcoal:#c7cbdc;
 --color-iris-violet:#7152d6;--color-iris-violet-glow:#6042ba;
 --color-signal-blue:#2867b8;--color-sky-blue:#326ca7;--color-pulse-green:#19784f;
 --color-alarm-red:#ba3446;--color-amber:#8b6200;
 --gradient-iris-violet:linear-gradient(135deg,#7152d6,#855bdc);
 --gradient-surface-gradient:linear-gradient(135deg,#f0edfc,#fafaff);
 --surface-void:#f6f7fb;--surface-graphite:#eceaf5;--surface-surface-lift:#ffffff;--surface-backdrop-blur:#fffffff0;
 --shadow:0 10px 35px -20px #32225f25;
}
html[data-theme=light]{background:var(--surface-void)}
[data-theme=light] .connection-backdrop{background:radial-gradient(ellipse at 50% 45%,#e3e7fa 0%,#f2f3fb 47%,#f6f7fb 76%)}
[data-theme=light] .site-header .wordmark{color:var(--color-white)}
[data-theme=light] .device-demo{box-shadow:10px 14px 0 #dad6ec}
[data-theme=light] .globe,[data-theme=light] .auth-story:after{mix-blend-mode:multiply;filter:none}
[data-theme=light] .brand-icon,[data-theme=light] .avatar,[data-theme=light] .tabs .active,[data-theme=light] nav button.active{color:#fff}
[data-theme=light] .api-code-card{background:#efedf8}
[data-theme=light] .auth-story,[data-theme=light] .hero{background:var(--gradient-surface-gradient)}
.theme-toggle{display:inline-grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:10px;border:1px solid var(--color-graphite-hairline);border-radius:50%;background:var(--surface-surface-lift);color:var(--color-white);cursor:pointer}
.theme-toggle svg{width:22px;height:22px;pointer-events:none}
.site-header .theme-toggle{width:50px;height:50px;border-width:2px}
.theme-toggle-floating{position:fixed;top:20px;right:20px;z-index:70;box-shadow:0 3px 20px #0002}
.theme-toggle:hover{border-color:var(--color-iris-violet)}
@media(max-width:600px){.site-header .theme-toggle{width:38px;height:42px;padding:8px}.nav-right{gap:4px}.nav-right>.button{padding-inline:12px}.header-name{display:none}}