/* ============================================================ DARKMODE.CSS — activated via [data-theme="dark"] on Respects prefers-color-scheme by default; user toggle overrides. ============================================================ */ html[data-theme="dark"] { --c-ink: #F3F5F6; --c-ink-soft: #C9D2D8; --c-paper: #0B1116; --c-paper-raised: #131B21; --c-mist: #182129; --c-line: #232D35; --c-steel: #97A4AC; --c-steel-soft: #6E7A82; --c-signal-tint: #2A1A14; --c-depth-tint: #10262A; } html[data-theme="dark"] .site-header.is-scrolled { background: rgba(11, 17, 22, 0.72); border-bottom-color: var(--c-line); } html[data-theme="dark"] .brand-mark { background: linear-gradient(155deg, var(--c-depth), #000); } html[data-theme="dark"] .btn-ghost { background: var(--c-paper-raised); color: #fff; } html[data-theme="dark"] .service-card__icon { background: rgba(19,27,33,0.85); } html[data-theme="dark"] .card { box-shadow: none; } html[data-theme="dark"] .site-footer { background: #05090C; } html[data-theme="dark"] .mobile-action-bar a:not(.call):not(.whatsapp) { background: var(--c-paper-raised); color: #fff; } /* Theme toggle button */ .theme-toggle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-mist); transition: background var(--dur-fast) var(--ease-out); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }