/* ========================================================================= Back40 — theme.css Shared dark/light theme system. The dark theme is the default (defined per-page in each page's :root). The light theme is applied by setting data-theme="light" on , injected by theme.js. ========================================================================= */ /* ---- Theme toggle button (placed in .app-nav) ---- */ .theme-toggle { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .3px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); padding: 8px 12px; cursor: pointer; width: auto; margin-left: 8px; border-radius: 6px; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--ink); color: var(--paper); } /* ========================================================================= LIGHT THEME Overrides the dark tokens with a cream/white palette that stays on-brand (navy #0A2463, olive #6B7D3A, cream #F5F5F5). Only sets the tokens; the rest of the app CSS resolves automatically via var(). ========================================================================= */ html[data-theme="light"] { --paper: #F5F5F5; /* page bg — brand cream */ --paper-line: #D9D9D9; /* hairline borders */ --ink: #0A2463; /* primary text — brand navy */ --ink-soft: #4A5568; /* secondary text — readable gray */ --blue: #0A2463; /* accent headings/links — brand navy */ --flag: #B8860B; /* amber accent (darker for contrast on light) */ --flag-dark: #8A6508; --green: #2E7D32; /* success — darker green for light bg */ --red: #C62828; /* error — darker red for light bg */ --panel: #FFFFFF; /* card/panel bg — white */ --field: #ECEEF2; /* input bg — light gray */ } /* Ensure any element that hard-codes white text on dark still reads. App buttons use background:var(--ink);color:var(--paper) so in light theme they become navy-on-cream — good contrast. */ html[data-theme="light"] body { background: var(--paper); color: var(--ink); } /* Title blocks / cards pick up the light panel automatically via var(--panel). */ /* Footer text stays readable */ html[data-theme="light"] .site-footer { color: var(--ink-soft); opacity: .8; }