/* SlipTap shared dark palette. Activated by data-theme="dark" on (set by theme.js). Only the base brand tokens flip here; page-specific "overloaded" elements (dark accent cards, lime buttons) are handled with small [data-theme="dark"] blocks in each page, because in the light palette --ink means BOTH body text AND dark-card background, which diverge in dark mode. Getting those right per page is what prevents invisible elements. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --ink: #ecefe8; /* body text (was near-black) */ --paper: #0e1110; /* page background (was warm off-white) */ --card: #191d1b; /* cards — deliberately lighter than paper so they separate */ --card2: #232826; --line: #2b302d; /* borders — visible on both paper and card */ --line2: #373d39; --volt: #c6f24e; /* lime accent stays bright */ --volt-deep: #a4d63f; /* brighter so it reads on dark */ --volt-bg: #26311a; /* dark lime-tinted surface */ --voltink: #d0e990; /* light lime text on volt-bg */ --soft: #c3c9be; /* softened body text */ --faint: #8b918a; /* muted text — still ≥4.5:1 on paper */ --coral: #ff6f4f; --blue: #5b95e6; --purple: #9488f5; --amber: #eeb35a; --sumBg: #151917; --heroMuted: #9aa097; } /* shared-element dark fixes (apply to every page that loads this file) */ /* bottom tab bar: light translucent → dark translucent (keeps the blur) */ [data-theme="dark"] .tabs { background: rgba(20, 24, 22, 0.9); } /* page-container side borders: dark --line reads as faint light lines at the screen edges, so blend them into the background in dark mode */ [data-theme="dark"] body { border-left-color: transparent; border-right-color: transparent; }