/* Vi — Theme tokens + utilities for landing pages only */

/* --- Light mode tokens --------------------------------- */
:root{--c-bg:#EDEEF3;--c-surface:#F4F5F9;--c-surface-2:#E6E8EF;--c-text-1:#2C3A4F;--c-text-2:#6B7A90;--c-text-3:#9AAAB8;--c-border:#D5D9E3;--c-accent:#4A7CF0;--c-accent-h:#2F62E0;--c-accent-bg:#EAF0FF;--c-success:#10B981;--c-warning:#F59E0B;--c-danger:#EF4444;--shadow-sm:0 1px 2px rgb(0 0 0/.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/.07),0 2px 4px -2px rgb(0 0 0/.07);--shadow-lg:0 10px 15px -3px rgb(0 0 0/.08),0 4px 6px -4px rgb(0 0 0/.06)}

/* --- Dark mode tokens ---------------------------------- */
html.dark{--c-bg:#0F172A;--c-surface:#1E293B;--c-surface-2:#293548;--c-text-1:#E2E8F0;--c-text-2:#94A3B8;--c-text-3:#64748B;--c-border:#334155;--c-accent:#60A5FA;--c-accent-h:#3B82F6;--c-accent-bg:#172554;--c-success:#34D399;--c-warning:#FBBF24;--c-danger:#F87171;--shadow-sm:0 1px 2px rgb(0 0 0/.25);--shadow-md:0 4px 6px -1px rgb(0 0 0/.30),0 2px 4px -2px rgb(0 0 0/.25);--shadow-lg:0 10px 15px -3px rgb(0 0 0/.40),0 4px 6px -4px rgb(0 0 0/.30)}

/* --- Smooth theme transitions -------------------------- */
*,*::before,*::after{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}

/* --- Accessible focus ring ----------------------------- */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px}

/* --- Thin scrollbars ----------------------------------- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3)}

/* --- CSS-only toggle switch ---------------------------- */
.theme-switch{position:relative;display:inline-block;width:44px;height:24px;border-radius:12px;background:#CBD5E1;cursor:pointer;border:none;padding:0;flex-shrink:0;transition:background-color .25s ease}
html.dark .theme-switch{background:#3B82F6}
.theme-switch::before{content:'☀';position:absolute;right:4px;top:3px;font-size:11px;line-height:18px;color:#fff;opacity:0;transition:opacity .2s ease}
html.dark .theme-switch::before{opacity:1}
.theme-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgb(0 0 0/.25);transition:transform .25s ease}
html.dark .theme-switch::after{transform:translateX(20px)}