/* Academy — base stylesheet See docs/brandbook.md for the design system this implements. Plain CSS, no build step, no external font/CDN dependency. */ :root { /* Color — light theme (default) */ --color-bg: #faf8f5; --color-surface: #ffffff; --color-surface-raised: #faf8f5; --color-ink: #1c1a17; --color-ink-muted: #5c574e; --color-border: #e8e2d8; --color-accent: #8a5a35; --color-accent-hover: #6e4629; --color-optional: #7a6b8f; --color-focus-ring: rgba(138, 90, 53, 0.55); /* Typography */ --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Base font-size scale (controlled by the A-/A+ control via [data-font-size] on ; --fs-* below are derived from this so the whole type scale rescales together, not just body text). */ --fs-scale: 1; --fs-sm: calc(0.875rem * var(--fs-scale)); --fs-base: calc(1.0625rem * var(--fs-scale)); --fs-lg: calc(1.25rem * var(--fs-scale)); --fs-xl: calc(1.75rem * var(--fs-scale)); --fs-2xl: calc(2.25rem * var(--fs-scale)); --fs-3xl: calc(2.75rem * var(--fs-scale)); /* Spacing (8px base unit) */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; --space-8: 5rem; --radius-sm: 4px; --measure: 68ch; } /* ---------- Theme system ---------- Three states, set via data-theme="auto|light|dark" on (server- rendered from the user's saved preference, no flash-of-wrong-theme). "auto" has no explicit override block below — it simply falls through to the prefers-color-scheme media query further down. "light" is the :root default above. "dark" is explicit so it applies regardless of OS setting. */ [data-theme="dark"] { --color-bg: #171512; --color-surface: #211e1a; --color-surface-raised: #2b271f; --color-ink: #f2ede4; --color-ink-muted: #b3aa9c; --color-border: #3a352d; --color-accent: #d8a878; --color-accent-hover: #eec095; --color-optional: #b3a4cf; --color-focus-ring: rgba(216, 168, 120, 0.6); } /* "auto" (or no data-theme attribute at all, e.g. JS-disabled fallback): follow the OS-level preference. Scoped so it never fights an explicit data-theme="light" choice. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #171512; --color-surface: #211e1a; --color-surface-raised: #2b271f; --color-ink: #f2ede4; --color-ink-muted: #b3aa9c; --color-border: #3a352d; --color-accent: #d8a878; --color-accent-hover: #eec095; --color-optional: #b3a4cf; --color-focus-ring: rgba(216, 168, 120, 0.6); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } } /* Font-size control: three steps, cycled by the A-/A+ control, persisted server-side (theme_preference/font_size_preference on the user) and applied here on so it scales the whole type system via --fs-scale above. Default (no attribute, or "medium") is 1. */ html[data-font-size="small"] { --fs-scale: 0.9; } html[data-font-size="large"] { --fs-scale: 1.15; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.15s ease, color 0.15s ease; } h1, h2, h3 { font-family: var(--font-heading); line-height: 1.25; margin: 0 0 var(--space-3); color: var(--color-ink); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Layout shell ---------- */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); } .site-header__inner { max-width: 46rem; margin: 0 auto; padding: var(--space-4) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .site-header__right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* ---------- Preference controls (theme + font size) ---------- Present in the header on every logged-in template. Buttons rather than a