/* Three-theme palette + theme switcher. * * Selectors are :root[data-theme="..."] so they override the per-page * inline `:root { ... }` blocks that exist on the older generated HTML. * An inline script in sets data-theme as early as possible to * avoid a flash of the wrong colours. */ /* ---- DARK (default) ---- */ :root[data-theme="dark"] { --bg: #0a0d12; --bg-alt: #11151b; --paper: #14181f; --ink: #e8e1d4; --ink-dim: #a59c8c; --ink-mute: #6f6657; --rule: #21262e; --rule-2: #2c3340; --amber: #ff9d3d; --amber-deep: #e07a1a; --amber-pale: #ffc678; --steel: #7d99b8; --steel-dim: #5a7a9c; --olive: #c8a878; --crimson: #c45a3a; --green: #88b16a; /* derived: subtle background tints and overlays */ --bg-spotlight-1: rgba(255, 157, 61, 0.06); --bg-spotlight-2: rgba(125, 153, 184, 0.05); --hover-tint: rgba(255, 157, 61, 0.06); --paper-tint: rgba(255, 157, 61, 0.04); --bar-track: rgba(255, 255, 255, 0.025); --rule-soft: rgba(255, 255, 255, 0.04); --noise-color: 0, 0, 0; --noise-opacity: 0.045; --noise-blend: overlay; } /* ---- SOLAR (warm parchment / golden hour) ---- */ :root[data-theme="solar"] { --bg: #f0e2b8; --bg-alt: #e6d3a0; --paper: #f6ead0; --ink: #3a1f06; --ink-dim: #6a4423; --ink-mute: #9b7c52; --rule: #d4bd84; --rule-2: #bca367; --amber: #b04210; --amber-deep: #7a2b04; --amber-pale: #d96820; --steel: #355279; --steel-dim: #1f3f5e; --olive: #6a5028; --crimson: #9a2e1e; --green: #3f6a2a; --bg-spotlight-1: rgba(176, 66, 16, 0.10); --bg-spotlight-2: rgba(53, 82, 121, 0.06); --hover-tint: rgba(176, 66, 16, 0.08); --paper-tint: rgba(176, 66, 16, 0.04); --bar-track: rgba(58, 31, 6, 0.05); --rule-soft: rgba(58, 31, 6, 0.08); --noise-color: 58, 31, 6; --noise-opacity: 0.04; --noise-blend: multiply; } /* ---- FT (Financial Times pink with claret accent and FT teal as the cool) ---- */ :root[data-theme="ft"] { --bg: #fff1e5; --bg-alt: #f6e1cb; --paper: #fff8ee; --ink: #262a33; --ink-dim: #5a626d; --ink-mute: #8c939d; --rule: #ebd5ba; --rule-2: #c2a784; --amber: #990f3d; /* FT claret — used wherever the design references --amber */ --amber-deep: #66072a; --amber-pale: #c93b67; --steel: #0d7680; /* FT teal */ --steel-dim: #06535b; --olive: #b88a4a; --crimson: #990f3d; --green: #4a7042; --bg-spotlight-1: rgba(153, 15, 61, 0.05); --bg-spotlight-2: rgba(13, 118, 128, 0.04); --hover-tint: rgba(153, 15, 61, 0.06); --paper-tint: rgba(153, 15, 61, 0.03); --bar-track: rgba(38, 42, 51, 0.05); --rule-soft: rgba(38, 42, 51, 0.06); --noise-color: 38, 42, 51; --noise-opacity: 0.025; --noise-blend: multiply; } /* ---- LIGHT (clean modern) ---- */ :root[data-theme="light"] { --bg: #fbfaf6; --bg-alt: #efeee8; --paper: #ffffff; --ink: #14171c; --ink-dim: #4a4e57; --ink-mute: #898d97; --rule: #e3e2dc; --rule-2: #cdcbc1; --amber: #b8521a; --amber-deep: #8c3d11; --amber-pale: #de7d32; --steel: #2f5478; --steel-dim: #1d3a5a; --olive: #7a5b28; --crimson: #a83a22; --green: #4e7635; --bg-spotlight-1: rgba(184, 82, 26, 0.05); --bg-spotlight-2: rgba(47, 84, 120, 0.04); --hover-tint: rgba(184, 82, 26, 0.05); --paper-tint: rgba(184, 82, 26, 0.02); --bar-track: rgba(20, 23, 28, 0.04); --rule-soft: rgba(20, 23, 28, 0.06); --noise-color: 20, 23, 28; --noise-opacity: 0.025; --noise-blend: multiply; } /* ---- Theme switcher (fixed top-right) ---- */ .theme-switch { position: fixed; top: 16px; right: 16px; z-index: 200; display: inline-flex; align-items: stretch; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; box-shadow: 0 6px 24px -10px rgba(0,0,0,0.35); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; user-select: none; backdrop-filter: blur(8px); } .theme-switch button { border: 0; background: transparent; color: var(--ink-mute); padding: 6px 12px; cursor: pointer; border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background 0.15s ease, color 0.15s ease; } .theme-switch button:hover { color: var(--ink); } .theme-switch button[aria-pressed="true"] { background: var(--amber); color: var(--paper); } /* Light / solar / ft themes — white text on accent background reads better */ :root[data-theme="light"] .theme-switch button[aria-pressed="true"], :root[data-theme="solar"] .theme-switch button[aria-pressed="true"], :root[data-theme="ft"] .theme-switch button[aria-pressed="true"] { background: var(--amber); color: #ffffff; } @media (max-width: 640px) { .theme-switch { top: 10px; right: 10px; font-size: 9px; } .theme-switch button { padding: 5px 10px; } } /* prevent the switcher from being printed */ @media print { .theme-switch { display: none; } }