/* ==================================================== Shared site styles for chrisweber.org Loaded by every page that participates in the shared design system: docs/index.html, docs/story/index.html, docs/resources/index.html, docs/resources/social/index.html. Strings and ai-counterfeits pages are outliers with independent design systems; they do not load this file. Page-specific layouts (homepage hero, story prose layout, tool UIs) and palette overrides where pages have drifted from the canonical tokens stay inline in each page. ==================================================== */ /* ==================================================== Design tokens (canonical, per CLAUDE.md) Pages that have drifted from these values keep their own :root override inline. Search for "DRIFT" comments in resources/index.html and resources/social/index.html for canonicalization candidates. ==================================================== */ :root { --void: #0d0d0b; --ink: #1a1a16; --parchment: #f4f1ea; --parchment-dim: rgba(244, 241, 234, 0.65); --parchment-faint: rgba(244, 241, 234, 0.35); --hazel: #7a8c5e; --hazel-dim: rgba(122, 140, 94, 0.4); --gold: #c9a96e; --gold-dim: #8a6e3a; --labradorite: #7a8fa0; --rule: #2a2a24; } /* Light theme variant. Pages opt in by setting data-theme="light" on the element. */ [data-theme="light"] { --void: #f4f0e8; --ink: #faf7f2; --parchment: #28221a; --parchment-dim: rgba(40, 34, 26, 0.72); --parchment-faint: rgba(40, 34, 26, 0.45); --hazel: #4a6230; --hazel-dim: rgba(74, 98, 48, 0.4); --gold: #9a6e10; --gold-dim: #6e5010; --labradorite: #385870; --rule: rgba(40, 34, 26, 0.14); } /* ==================================================== Base reset ==================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ==================================================== Body baseline Pages set their own font-size; sizes vary intentionally (homepage 1.1rem, social tools 1.05rem, etc.). ==================================================== */ body { background: var(--void); color: var(--parchment); font-family: 'Source Sans 3', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.3s ease, color 0.3s ease; }