/* ========================================================================= tokens.css ------------------------------------------------------------------------- Every visual choice in this site is expressed as a CSS custom property here. To re-theme the entire blog, change values in this file only — base.css / layout.css / components.css never hard-code a color, font, or spacing value; they all reference these tokens. Suggested places to start when making this "yours": 1. --color-accent / --color-accent-ink (the single most identity- defining choice — pick something that isn't ML-blog blue) 2. --font-serif / --font-sans (typeface pairing) 3. --content-max-width / --sidenote-width (how airy the page feels) ========================================================================= */ :root { /* ---- Palette -------------------------------------------------------- Warm "paper" background rather than pure white, deep-brown ink rather than pure black, a red accent instead of the blue commonly used by Distill-lineage ML blogs. Swap freely. */ --color-bg: #faf8f4; --color-bg-raised: #f2efe7; --color-bg-code: #f4f1ea; --color-border: #ddd6c7; --color-border-strong: #b7ac93; --color-ink: #221e19; /* primary text */ --color-ink-muted: #5c5648; /* secondary text, captions, meta */ --color-ink-faint: #8a8371; /* TOC inactive, footnote markers */ --color-accent: #b3261e; /* red — links, emphasis, active nav */ --color-accent-ink: #8c1d17; /* darker accent for hover/focus states */ --color-accent-soft: #f7ded9; /* accent tint for highlights/backgrounds */ --color-secondary: #2f5d59; /* muted teal — used sparingly for a second data/series color in figures */ --color-focus-ring: #2f5d59; /* ---- Typography ------------------------------------------------------ Serif for reading prose, sans for UI chrome (nav, captions, labels, buttons). Google Fonts import is optional — see base.css — the system stack fallback is deliberately solid on its own. */ --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-sans: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-base: 19px; --line-height-base: 1.62; /* ---- Layout ------------------------------------------------------- */ --content-max-width: 42rem; /* main text column */ --page-max-width: 78rem; /* text column + sidenote margin + gutters */ --sidenote-width: 15rem; --toc-width: 14rem; --gutter: clamp(1.25rem, 4vw, 3rem); --radius-sm: 4px; --radius-md: 8px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --shadow-card: 0 1px 2px rgba(34, 30, 25, 0.06), 0 4px 14px rgba(34, 30, 25, 0.06); } /* Opt-in dark mode, driven by the same token names so component CSS never needs a second set of rules. Toggle by adding data-theme="dark" to (see shared-chrome.js for the toggle button wiring). */ :root[data-theme="dark"] { --color-bg: #1a1815; --color-bg-raised: #221f1a; --color-bg-code: #201d18; --color-border: #3a352c; --color-border-strong: #55503f; --color-ink: #efe9df; --color-ink-muted: #b8ae98; --color-ink-faint: #837a65; --color-accent: #f0796d; --color-accent-ink: #f6968c; --color-accent-soft: #402019; --color-secondary: #7fbdb6; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35); }