/* ============================================================================= * theme.css — design tokens (teal + amber academic) shared with the slide deck * ===========================================================================*/ :root { /* Brand palette */ --primary: #0F4C5C; /* deep teal — headers, nav */ --primary-light: #1B6E8C; /* links, active states */ --secondary: #1B5E7E; /* subheads, rules */ --accent: #E09F3E; /* amber — buttons, highlights, markers */ --accent-2: #3FA796; /* teal-green — secondary data series */ --warning: #9E2A2B; /* coral/red — pitfalls, fail */ --success: #2A7F62; /* green — QC pass, in-range */ --caution: #C77D0A; /* amber-dark — caution text on light */ /* Neutrals */ --bg: #F7F9FA; --surface: #FFFFFF; --panel: #E8EEF1; /* shaded callout / table header tint */ --border: #D6DEE5; --ink: #1A2730; /* body text */ --muted: #5B6770; /* captions, footnotes */ --white: #FFFFFF; /* Typography */ --font-sans: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif; --font-mono: "Cascadia Code", Consolas, "Courier New", monospace; --fs-base: 17px; --lh: 1.6; /* Layout */ --maxw: 1120px; --radius: 12px; --radius-sm: 8px; --shadow: 0 2px 8px rgba(15, 76, 92, 0.08); --shadow-lg: 0 8px 28px rgba(15, 76, 92, 0.14); --nav-h: 60px; } /* Dark mode (auto, plus manual override via [data-theme="dark"] on ) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E1A1F; --surface: #14252C; --panel: #1B3038; --border: #274049; --ink: #E7EEF1; --muted: #9DB0B8; --primary: #155C6F; --primary-light: #5AB6CF; --panel: #1B3038; } } :root[data-theme="dark"] { --bg: #0E1A1F; --surface: #14252C; --panel: #1B3038; --border: #274049; --ink: #E7EEF1; --muted: #9DB0B8; --primary: #155C6F; --primary-light: #5AB6CF; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--primary); line-height: 1.25; font-weight: 700; } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, @media (prefers-color-scheme: dark) { } h1 { font-size: 2rem; margin: 0.2em 0 0.4em; } h2 { font-size: 1.5rem; margin: 1.4em 0 0.5em; } h3 { font-size: 1.18rem; margin: 1.2em 0 0.4em; } a { color: var(--primary-light); text-decoration: none; } a:hover { text-decoration: underline; } p { margin: 0.6em 0; } code, kbd, samp { font-family: var(--font-mono); } /* Monospace formula / equation block */ .equation, .formula { font-family: var(--font-mono); background: var(--panel); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 0.7em 1em; margin: 0.8em 0; overflow-x: auto; color: var(--ink); } /* Sub / sup tidy */ sub, sup { line-height: 0; } /* Visually-hidden but screen-reader available */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }