/* ============================================================================ LedgerAir — shared theme layer (loaded on every frontend surface). Pairs with /js/theme-toggle.js. Dark is the default; light is opt-in via . This file owns ONLY cross-cutting bits: 1. color-scheme hint (native form controls / scrollbars follow the theme) 2. the reusable .theme-toggle button (works on any background) 3. the CANONICAL light palette, exposed as --lat-* tokens so every page's html[data-theme="light"] overrides map to ONE coherent palette. Page-specific recolouring lives in each page's own html[data-theme="light"] { ... } rules — NOT here — so the dark experience stays byte-for-byte unchanged. ---------------------------------------------------------------------------- CANONICAL LIGHT PALETTE (airy cyan-blue; lifted from the homepage mockup): bg / void #E8F6FB (page background) bg-2 / void-2 #DCEFF6 surface rgba(255,255,255,0.66) tile / card rgba(255,255,255,0.74) border rgba(24,72,104,0.12) border-strong rgba(24,72,104,0.18) text #15303B (primary text) muted #46606E (secondary text) faint #8AA6B3 (tertiary / labels) violet (accent) #6C5AE0 bright #7E6CF2 teal (accent) #0FA890 amber (accent) #D98E2B success (ink) #0F9D6C (positive/verified value green; distinct from teal) error (ink) #DC2626 Map dark surfaces to these so all pages read as one product in light mode. ============================================================================ */ :root { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* Canonical light tokens — available to any page that wants to consume them. */ html[data-theme="light"] { --lat-bg: #E8F6FB; --lat-bg-2: #DCEFF6; --lat-surface: rgba(255,255,255,0.66); --lat-tile: rgba(255,255,255,0.74); --lat-border: rgba(24,72,104,0.12); --lat-border-2: rgba(24,72,104,0.18); --lat-text: #15303B; --lat-muted: #46606E; --lat-faint: #8AA6B3; --lat-violet: #6C5AE0; --lat-violet-bright: #7E6CF2; --lat-teal: #0FA890; --lat-amber: #D98E2B; --lat-success: #0F9D6C; /* positive/verified ink — a distinct green from brand teal, which is spent on accents */ --lat-error: #DC2626; --lat-panel: linear-gradient(180deg, rgba(255,255,255,.86), rgba(232,246,251,.7)); --lat-shadow: 0 24px 60px -34px rgba(40,90,120,.45); } /* Smooth the switch everywhere without overriding per-element transitions. Scoped to the toggle moment via a class the JS could add if desired; kept light-touch here so we don't fight existing animations. */ html[data-theme="light"] body { background-color: var(--lat-bg); } /* --------------------------------------------------------------------------- Reusable theme-toggle button. Drop a anywhere (nav, header) or let theme-toggle.js inject a floating one. --------------------------------------------------------------------------- */ .theme-toggle { -webkit-appearance: none; appearance: none; width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; padding: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #ECEAF6; transition: border-color .25s ease, transform .25s ease, background .25s ease, color .25s ease; } .theme-toggle:hover { transform: translateY(-1px); border-color: rgba(124, 108, 242, 0.5); } .theme-toggle:focus-visible { outline: 2px solid #7E6CF2; outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .ico-sun { display: none; } .theme-toggle .ico-moon { display: block; } html[data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.7); border-color: rgba(24, 72, 104, 0.18); color: #15303B; } html[data-theme="light"] .theme-toggle .ico-sun { display: block; } html[data-theme="light"] .theme-toggle .ico-moon { display: none; } /* Floating fallback (used when a page has no nav slot for the toggle). */ .theme-toggle--floating { position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; width: 44px; height: 44px; border-radius: 12px; background: rgba(20, 20, 38, 0.72); border-color: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.7); } html[data-theme="light"] .theme-toggle--floating { background: rgba(255, 255, 255, 0.82); box-shadow: 0 12px 34px -14px rgba(40, 90, 120, 0.4); } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }