/* ========================================================================== Webtoget — shared theme system Toggle themes via [data-theme] on . Default is dark. ========================================================================== */ /* Light is the default theme. Even before JS runs, an unattributed renders in light. The opt-in [data-theme="dark"] block below switches to the dark palette. */ :root, :root[data-theme="light"] { --bg: #fafafa; --bg-raised: #ffffff; --bg-overlay: #f1f1f3; --bg-input: #ffffff; --text: #18181b; --text-strong: #09090b; --text-muted: #5a5a63; --text-faint: #9a9aa3; --border: rgba(15, 15, 20, 0.10); --border-strong: rgba(15, 15, 20, 0.18); --border-faint: rgba(15, 15, 20, 0.06); --accent: #4f4dd6; --accent-hover: #6563FC; --accent-soft: rgba(79, 77, 214, 0.10); --accent-softer: rgba(79, 77, 214, 0.05); --success: #15803d; --success-strong: #16a34a; --nav-bg: rgba(255, 255, 255, 0.80); --nav-bg-scrolled: rgba(255, 255, 255, 0.95); --nav-border: rgba(15, 15, 20, 0.08); --scrollbar-track: #ececef; --scrollbar-thumb: #cfcfd4; --scrollbar-hover: #a8a8b0; --selection-bg: rgba(79, 77, 214, 0.20); --shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.06); --shadow-md: 0 6px 24px rgba(15, 15, 20, 0.08); --logo-filter: none; color-scheme: light; } :root[data-theme="dark"] { --bg: #09090b; --bg-raised: #18181b; --bg-overlay: #27272a; --bg-input: #09090b; --text: #fafafa; --text-strong: #ffffff; --text-muted: #a1a1aa; --text-faint: #52525b; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-faint: rgba(255, 255, 255, 0.05); --accent: #6563FC; --accent-hover: #8382FF; --accent-soft: rgba(101, 99, 252, 0.10); --accent-softer: rgba(101, 99, 252, 0.05); --success: #86efac; --success-strong: #22c55e; --nav-bg: rgba(15, 15, 18, 0.78); --nav-bg-scrolled: rgba(15, 15, 18, 0.92); --nav-border: rgba(255, 255, 255, 0.07); --scrollbar-track: #0c0c0e; --scrollbar-thumb: #2a2a2e; --scrollbar-hover: #3f3f46; --selection-bg: rgba(101, 99, 252, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --logo-filter: brightness(0) invert(1); color-scheme: dark; } /* -------------------------------------------------------------------------- Smooth theme transitions on color-bearing properties -------------------------------------------------------------------------- */ html, body, nav, .nav-glass, .service-card, .contact-form-card, .contact-input, .mobile-menu, .ty-overlay, .ty-card, .gradient-line, footer, a, button, input, textarea, .nav-link, [class*="bg-surface"], [class*="bg-white"], [class*="border-white"] { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* -------------------------------------------------------------------------- Base — body / scrollbars / selection These use !important so they override per-page inline