/* * CSS variables that drive light/dark theming. * The actual data-theme attribute is set by client/theme-inline.ts before paint. */ :root { color-scheme: light; --bg: #ffffff; --bg-elevated: #f7f7f8; --surface: #ffffff; --text: #1a1a1c; --text-muted: #5a5a62; --border: rgba(0, 0, 0, 0.08); --hr: rgba(0, 0, 0, 0.08); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --modal-overlay: rgba(15, 15, 16, 0.55); --link: var(--text); --link-hover: #000; --focus-ring: 2px solid #6699ff; /* Per-season hues (HSL channels so we can mix opacity easily) */ --season-advent: 290 70% 35%; --season-christmas: 43 74% 49%; --season-easter: 43 74% 49%; --season-pentecost: 0 100% 35%; --season-ordinary: 120 100% 25%; --season-lent: 290 70% 35%; --season-holyweek: 0 100% 35%; --season-epiphany: 0 0% 60%; } html[data-theme='dark'] { color-scheme: dark; /* Softer dark palette — lift the background out of near-black, dim the * text away from near-white, and tone down dividers. Body contrast lands * around 11:1 (still WCAG AAA) instead of the ~15:1 of the previous palette. */ --bg: #17181c; --bg-elevated: #1e2026; --surface: #23262e; --text: #d4d6dc; --text-muted: #8a8f99; --border: rgba(255, 255, 255, 0.06); --hr: rgba(255, 255, 255, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --modal-overlay: rgba(0, 0, 0, 0.55); --link: #dcdee4; --link-hover: #ebedf1; /* Season hues for dark mode — desaturated and slightly muted so the per- * season tint reads as accent, not signage. */ --season-advent: 280 38% 68%; --season-christmas: 42 55% 60%; --season-easter: 42 55% 60%; --season-pentecost: 0 48% 62%; --season-ordinary: 120 28% 56%; --season-lent: 280 38% 68%; --season-holyweek: 0 48% 62%; --season-epiphany: 0 0% 70%; } html, body { background: var(--bg); color: var(--text); } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } /* Theme toggle — icon-only round button */ .theme-toggle { position: fixed; bottom: 12px; right: 12px; z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 50%; padding: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease; line-height: 0; } .theme-toggle:hover { background: var(--surface); color: var(--link-hover); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .theme-toggle__icon { display: none; flex: 0 0 auto; width: 18px; height: 18px; } /* Show only the icon matching the user's current preference. * The data-theme-pref attribute is set synchronously by the inline script in . */ html[data-theme-pref='light'] .theme-toggle__icon--light, html[data-theme-pref='dark'] .theme-toggle__icon--dark, html[data-theme-pref='system'] .theme-toggle__icon--auto { display: inline-block; } /* Fallback before the attribute is set (shouldn't normally render): show the auto icon. */ html:not([data-theme-pref]) .theme-toggle__icon--auto { display: inline-block; } hr { background-color: var(--hr); border: 0; height: 1px; margin: 1rem 0; }