/* ============================================================ Storvio — dark theme token overrides Applied when (toggled by app.js). Loaded always; selector-gated so it's inert in light mode. ============================================================ */ html[data-theme="dark"]{ --bg:#0c121b; --bg-elevated:#131c28; --surface:#141e2b; --surface-muted:#1b2735; --surface-hover:#22303f; --border:#243140; --border-strong:#33455a; --text:#e8eef6; --text-muted:#9fb0c4; --text-faint:#6c7d92; --text-invert:#0c121b; --grad-brand-soft:linear-gradient(135deg,#10322e 0%,#122036 100%); --danger-bg:#2a1614; --danger-border:#5a2a25; --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 2px 6px rgba(0,0,0,.45); --shadow-md:0 8px 24px rgba(0,0,0,.5); --shadow-lg:0 18px 48px rgba(0,0,0,.6); --ring:0 0 0 4px rgba(37,99,201,.32); } /* header glass on dark */ html[data-theme="dark"] .site-header{background:rgba(15,23,33,.78)} html[data-theme="dark"] .lang-switch, html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .nav-burger{background:var(--surface)} /* hero glow tuned for dark */ html[data-theme="dark"] .hero::before{ background: radial-gradient(900px 420px at 78% -8%,rgba(37,99,201,.22),transparent 60%), radial-gradient(720px 380px at 8% 12%,rgba(25,180,166,.18),transparent 60%); } /* logo wordmark turns light in dark mode (logo.svg text is dark) */ html[data-theme="dark"] .brand img{filter:brightness(0) invert(1) opacity(.92)} /* form alert text legibility on dark */ html[data-theme="dark"] .form-alert{color:#f3b3ad} html[data-theme="dark"] .form-success{color:#7fd6ad} html[data-theme="dark"] .price-features li::before{filter:brightness(1.1)} /* mock-file gradient base on dark */ html[data-theme="dark"] .mock-file{background:linear-gradient(160deg,var(--surface-muted),var(--surface))} html[data-theme="dark"] .article-card__cover::after{opacity:.7} /* smooth theme transition */ html.theme-anim, html.theme-anim *{transition:background-color .25s ease,border-color .25s ease,color .25s ease!important}