/* Base tokens, reset, and typography for site pages. */ :root { --content-max: 1180px; --bg: #ffffff; --card-bg: #f7fafb; --ink: #12222f; --ink-muted: #52697a; --navy: #0d3049; --navy-ink: #0d3049; --blue: #185b8b; --blue-pale: #eef4f8; /* Hover/focus fill for sortable table headers: one step lighter than --navy, so it reads as a hover while keeping #fff legible. Its own token because --blue flips pale in dark and can't carry white text there. */ --thead-hover-bg: var(--blue); --lime: #c5d33b; --lime-ink: #445217; --meter-fill: var(--blue); --red: #b3231a; --red-pale: #f8e7e5; --border: #dde6ec; --shadow: 0 1px 2px rgba(13,48,73,0.06), 0 4px 16px rgba(13,48,73,0.06); /* Tooltip surface — kept independent of --navy-ink so the fg/bg pairing stays high-contrast in both themes (--navy-ink flips to a light blue in dark mode). */ --tooltip-bg: #0d3049; --tooltip-fg: #f4f8fb; --tooltip-border: rgba(255,255,255,0.10); } body.doc-narrow { --content-max: 900px; } /* Dark theme — driven by data-theme on (set by theme-seed.js in ), so the toggle can override the OS. */ :root[data-theme="dark"] { --bg: #0b1620; --card-bg: #101f2a; --ink: #e7eef2; --ink-muted: #93a9b6; /* --navy is a background token (thead fill, masthead gradient) and must stay dark in both themes so #fff sits on it at AA or better — 9.3:1 here. Only --navy-ink, the foreground twin, flips light. */ --navy: #204a6b; --navy-ink: #9cc6e6; --blue: #7ec3e6; --blue-pale: #10222f; --thead-hover-bg: #2f6d97; /* 5.6:1 with #fff; 1.67:1 against --navy above */ --lime: #c8d95a; --lime-ink: #1c2408; --red: #ff7a68; --red-pale: #2a1613; --border: #223642; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.35); --tooltip-bg: #16303f; --tooltip-fg: #eaf3fa; --tooltip-border: rgba(255,255,255,0.14); } :root[data-theme="dark"] .status-dot.progress { background: #e0a24a; } :root[data-theme="dark"] { --meter-fill: var(--lime); } * { box-sizing: border-box; } html, body { background: var(--bg); } html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; } body { margin: 0; color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } /* ---------- Shared body typography ---------- */ .page { max-width: var(--content-max); margin: 0 auto; } p { margin: 0 0 1.05rem; } ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; } li { margin-bottom: 0.4rem; } strong { font-weight: 700; color: var(--ink); } a { color: var(--blue); text-decoration: none; border-bottom: 1px solid currentColor; } a:hover { opacity: 0.8; } code { font-family: "SF Mono", "Cascadia Code", Consolas, Monaco, monospace; background: var(--blue-pale); color: var(--blue); padding: 0.12em 0.4em; border-radius: 4px; font-size: 0.88em; }