/* Design tokens and document defaults Every colour goes through a token so the dark theme can override it in one place. The PDF report keeps its own palette (js/pdf-report.js) and stays light in both themes – a report must remain printable. */ :root { color-scheme: light; --bg: #f3eee2; --bg-top: #f7f2e6; --bg-accent: #f5ecd5; --bg-soft: #fcfaf4; --surface: #fffdf8; --surface-raised: #ffffff; --surface-soft: #f8f4ea; --surface-strong: #eef2f6; --panel-alt: #f5f7fb; --thead-from: #eef3f8; --thead-to: #e4ebf3; --ink: #22303e; /* Dark enough to clear 4.5:1 on the cream accent (#f3e8c8), the lightest surface muted text ever sits on. */ --muted: #556170; --line: #cdd7e1; --line-strong: #7f95ab; --primary: #183487; --primary-deep: #102968; --primary-hover: #0b2158; --on-primary: #ffffff; --cream-accent: #f3e8c8; --danger: #9f3934; --danger-soft: #fff2ef; --warn-bg: #fff8e8; --warn-line: #d9a441; --warn-ink: #7a4f00; --ok-bg: #eef8f1; --ok-line: #2f7a4d; --ok-ink: #1d5c38; --danger-line: #d9adaa; --surface-veil: rgba(255, 255, 255, 0.58); --computed-bg: rgba(24, 52, 135, 0.06); --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --inset-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.8); --focus: #183487; --shadow: 0 20px 40px rgba(24, 52, 135, 0.13); --chrome-bg: rgba(255, 253, 248, 0.94); --chrome-bg-solid: rgba(255, 253, 248, 0.98); --bg-glow: rgba(243, 232, 200, 0.62); --logo-bg: transparent; --logo-pad: 0; --logo-radius: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Dark theme. js/theme.js resolves the stored choice or the system setting and sets data-theme on before first paint, so there is no flash. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #121a23; --bg-top: #0e151d; --bg-accent: #16202b; --bg-soft: #182029; --surface: #1b242f; --surface-raised: #222d3a; --surface-soft: #1f2933; --surface-strong: #26313e; --panel-alt: #202b38; --thead-from: #2a3849; --thead-to: #22303f; --ink: #e8eef5; --muted: #a9b8c8; --line: #35434f; --line-strong: #5b6f83; /* On dark surfaces the brand blue is inverted: light blue carries the accent, dark ink sits on top of primary buttons. */ --primary: #7aa2f7; --primary-deep: #a8c4ff; --primary-hover: #9ab8ff; --on-primary: #0e151d; --cream-accent: #3a3320; --danger: #ff9b93; --danger-soft: #3a1f1d; --warn-bg: #3a2f14; --warn-line: #d9a441; --warn-ink: #f4d38a; --ok-bg: #16302a; --ok-line: #4caf7d; --ok-ink: #8fe0b0; --danger-line: #7d4340; --surface-veil: rgba(255, 255, 255, 0.05); --computed-bg: rgba(122, 162, 247, 0.14); /* No white inner highlight on dark surfaces – it would read as a glowing edge. */ --inset-highlight: none; --inset-ring: none; --focus: #7aa2f7; --shadow: 0 20px 40px rgba(0, 0, 0, 0.55); /* The logo is a dark-blue PNG without transparency-safe contrast on dark backgrounds, so it keeps a light plate. */ --chrome-bg: rgba(24, 32, 42, 0.94); --chrome-bg-solid: rgba(30, 40, 51, 0.98); /* The cream glow of the light theme would read as an olive haze on dark. */ --bg-glow: rgba(122, 162, 247, 0.07); --logo-bg: #f4f6fa; --logo-pad: 0.45rem 0.6rem; --logo-radius: 12px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; max-width: 100%; margin: 0; min-width: 320px; overflow-x: hidden; overflow-x: clip; background: radial-gradient( circle at top left, var(--bg-glow), transparent 34% ), linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%); color: var(--ink); } button, input, textarea, select { min-width: 0; font: inherit; } button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button:disabled { cursor: wait; opacity: 0.72; } img, svg, canvas { max-width: 100%; } main, form, fieldset, section, .view, .protocol-page, .water-page { min-width: 0; } .skip-link { position: fixed; left: 1rem; top: -100px; z-index: 100; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .boot-error { position: relative; z-index: 1000; display: grid; gap: 0.5rem; margin: 1rem auto; width: min(92vw, 760px); padding: 1rem; border: 1px solid #c87b72; border-radius: 12px; background: #fff3f0; color: #6f211d; } .boot-error[hidden] { display: none !important; } .boot-error a { color: inherit; font-weight: 800; } .boot-error code { overflow-wrap: anywhere; font-size: 0.78rem; }