/* Marketing site light/dark theme. Activated by (set by theme.js before paint). Each page defines its own dark :root vars inline; html[data-theme="light"] has higher specificity than :root, so these overrides win regardless of load order. Brand orange is intentionally identical in both themes. */ /* Scrim vars referenced by nav backgrounds that were hardcoded before this theme system existed (converted to var() in the page styles). Dark = default so pages render correctly even before theme.js runs. */ :root { --nav-bg: rgba(14,14,16,0.92); --nav-bg-open: rgba(14,14,16,0.97); } html[data-theme="light"] { --bg: #FFFFFF; --bg-elev: #F4F4F7; --bg-card: #FFFFFF; --border: #E3E3EA; --border-lit: #D2D2DC; --fg: #16161A; --fg-dim: #54545E; --fg-mute: #8A8A94; --nav-bg: rgba(255,255,255,0.92); --nav-bg-open: rgba(255,255,255,0.97); /* --orange / --orange-bright / --orange-dark unchanged (brand) */ } /* Light-mode cards get a soft shadow so they read as elevated on white (dark mode leans on borders instead). */ html[data-theme="light"] body { -webkit-font-smoothing: antialiased; } /* Theme toggle button — injected into the nav by theme.js. */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 0; transition: color .2s, border-color .2s, background .2s; } .theme-toggle:hover { color: var(--orange); border-color: var(--border-lit); } .theme-toggle svg { width: 18px; height: 18px; } /* Fallback floating toggle for the few pages without a .nav-links bar. */ .theme-toggle-float { position: fixed; bottom: 18px; right: 18px; z-index: 9999; background: var(--bg-card); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }