/* Smallest Business — shared dark-mode theme. Overrides the per-page :root light variables when the user (or their OS) prefers dark. Higher specificity than :root, so it wins regardless of stylesheet order. The data-theme attribute is set before paint by the tiny inline script in each page's (no flash of the wrong theme). */ :root{ color-scheme: light; } html[data-theme="dark"]{ color-scheme: dark; --ink:#e7edf2; /* body text */ --mut:#9aabb6; /* muted / captions */ --line:#26323c; /* borders */ --bg:#0e1519; /* page background */ --soft:#161f26; /* cards / code */ --acc:#16a884; /* brand green */ --acc2:#5cc0dd; /* link blue */ --warn:#e0954f; /* warning accent */ --ok:#16a884; } /* No-JS fallback: follow the OS preference when no explicit choice was made. (With JS, the inline head script always sets data-theme, so this never fires.) */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]){ color-scheme: dark; --ink:#e7edf2; --mut:#9aabb6; --line:#26323c; --bg:#0e1519; --soft:#161f26; --acc:#16a884; --acc2:#5cc0dd; --warn:#e0954f; --ok:#16a884; } } /* Smooth the switch */ body,.card,.stat,.box,input,textarea,.sb-cta,.sb-list li{ transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* Dark fixes for elements that hard-code light values */ html[data-theme="dark"] .cta.alt{ background:transparent; color:var(--acc); border-color:var(--acc); } html[data-theme="dark"] input, html[data-theme="dark"] textarea{ background:var(--soft); color:var(--ink); } html[data-theme="dark"] input::placeholder{ color:var(--mut); } html[data-theme="dark"] .sb-list li{ background:var(--soft); } html[data-theme="dark"] img{ filter: brightness(.92); } /* Controls injected by sb-theme.js: dark toggle + A−/A+ text-size stepper */ .sb-controls{ display:inline-flex; gap:5px; align-items:center; margin-left:16px; vertical-align:middle; } .sb-controls button{ padding:4px 9px; line-height:1; min-width:30px; font-size:0.9375rem; font-family:inherit; cursor:pointer; background:transparent; color:var(--mut); border:1px solid var(--line); border-radius:8px; } .sb-controls button:hover{ color:var(--ink); border-color:var(--mut); } .sb-controls button:disabled{ opacity:.4; cursor:default; } .sb-fontbtn{ font-weight:700; } .sb-controls.sb-fixed{ position:fixed; top:14px; right:14px; z-index:50; margin:0; background:var(--bg); padding:5px; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,.12); }