/* * Theme system: dark is the original/default look of this app (everything * below was designed against these values) — light is a deliberate * inversion of the same structural roles, not a from-scratch palette. * --brand-primary itself also flips: a bright yellow-gold reads fine on the * near-black dark background but has very poor contrast as text/icons/ * borders on a white one, so light theme uses a darker amber of the same * hue instead — solid-gold button/badge fills (dark text on top) stay * legible either way, so that usage doesn't need special-casing. Only the * "which surface/text role is this" variables (and this one) flip. * `[data-theme]` is set on by public/js/theme.js (falls back to * `prefers-color-scheme` when a visitor has never chosen), and mirrored * into `color-scheme` here so native form controls/scrollbars follow along * automatically. */ :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 100%; --bg-page: #131110; --bg-surface: #1a1a1a; --bg-surface-rgb: 26, 26, 26; --bg-surface-alt: #171717; --bg-surface-alt-rgb: 23, 23, 23; --text-heading: #fafaf9; --text-body: #d6d3d1; --text-muted: #a8a29e; --text-faint: #78716c; --brand-primary: #eab308; --brand-primary-rgb: 234, 179, 8; /* Warm, gold-tinted variants of heading/meta text (section titles, card names, dates, tags) — kept distinct from --text-heading/--text-muted because they're meant to read as "branded", not just neutral text. Dark theme keeps the original pale-cream/muted-gold look; light theme swaps to a dark amber so the same warmth stays legible on a white surface instead of vanishing like pale yellow-on-white would. */ --text-heading-accent: #fef3c7; --text-meta-accent: #d6b75d; /* RGB triplet for "lighten on dark surfaces / darken on light surfaces" hover and tint overlays — white in dark theme, black in light theme, so the same low-alpha rgba() recipe still reads as a subtle highlight instead of disappearing (white-on-white) or inverting to a highlight that looks like a hole (black-on-dark). */ --overlay-rgb: 255, 255, 255; /* Shared content-column width — every top-level section/navbar/footer caps at this instead of its own hardcoded value, so they all stay aligned. Below the 900px mobile breakpoint this never actually binds (the viewport itself is narrower), so mobile is unaffected; above it, the min-width override further down widens this to 80% of the viewport instead of staying pinned at a fixed 960px on large desktop screens. */ --site-max-width: 960px; } @media (min-width: 901px) { :root { --site-max-width: 80vw; } } :root[data-theme="light"] { color-scheme: light; --bg-page: #f5f5f4; --bg-surface: #ffffff; --bg-surface-rgb: 255, 255, 255; --bg-surface-alt: #fafaf9; --bg-surface-alt-rgb: 250, 250, 249; --text-heading: #1c1917; --text-body: #44403c; --text-muted: #57534e; --text-faint: #78716c; --text-heading-accent: #713f12; --text-meta-accent: #a16207; --overlay-rgb: 0, 0, 0; --brand-primary: #a16207; --brand-primary-rgb: 161, 98, 7; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg-page: #f5f5f4; --bg-surface: #ffffff; --bg-surface-rgb: 255, 255, 255; --bg-surface-alt: #fafaf9; --bg-surface-alt-rgb: 250, 250, 249; --text-heading: #1c1917; --text-body: #44403c; --text-muted: #57534e; --text-faint: #78716c; --text-heading-accent: #713f12; --text-meta-accent: #a16207; --overlay-rgb: 0, 0, 0; --brand-primary: #a16207; --brand-primary-rgb: 161, 98, 7; } }