/* tones.css — δ1 Tonal CSS system + δ2 Real dark mode + δ3 Time-of-day hooks * * Per DESIGN_ROADMAP.md Phase δ (lines ~268-339) + Claude Code directive * Track 6 / batch-3 (2026-05-28). 4 tones × {light, dark} × optional time-of-day, * each tone a *complete suite* of 16+ tokens — not just an accent swap. * * Namespace: every token is `--tone-*` to avoid colliding with motion.css's * `--motion-*` and with the existing per-site `--paper / --ink / --accent` * tokens already in use across the 19 placeholder sites and the 3 PNN * deploys. Sites that want a tone *layer it on top of* their category palette * by adding `data-tone="..."` to — the tone tokens become available * for use in custom CSS (e.g. `color: var(--tone-ink-base)`) without * disturbing the site's existing styles. * * Token suite per tone (and per [data-color-scheme="dark"] override): * --tone-bg-base, --tone-bg-elevated, --tone-bg-recessed * --tone-ink-strong, --tone-ink-base, --tone-ink-muted, --tone-ink-faint * --tone-accent, --tone-accent-hover, --tone-accent-faint * --tone-border-strong, --tone-border-soft * --tone-link, --tone-link-hover, --tone-link-visited * --tone-pull-quote-rule * --tone-callout-bg, --tone-callout-border * * The 4 tones: * editorial — broadsheet feel; long-form journalism (deep editorial red, * warm cream ground, 400/600 body weights — avoids 700 newsprint set) * warm — family-first; advocacy interfaces (umber accent, paper ground, soft borders) * advocacy — institutional trust; 501(c)(4) + locator (institutional teal, crisp rules) * archive — research / foundation; slow read (linen ground, graphite accent, * optional mono fallback via [data-archive-mono="true"]) * * Adoption (opt-in, per-site, backward compatible): * * * * * * Dark mode: * - Automatic via @media (prefers-color-scheme: dark) — the page respects the OS. * - Explicit override via [data-color-scheme="dark"] or [data-color-scheme="light"] * on . The explicit attribute wins (cascade order below). * - Dark tokens preserve the *character* of the tone — not a hacked inversion. * Editorial dark = reading by lamplight (deep warm grays #1c1a17 family). * Advocacy dark = cool deep grays (#161a1c family). * Warm dark = tobacco on warm-dark (#1f1c17 family). * Archive dark = paper-fade against #1d1c18. * * Time of day (δ3, opt-in only via tones.js): * - Script sets [data-time="deep-night|morning|midday|golden|evening"] on . * - Optional time-aware blocks (e.g. [data-tone="editorial"][data-time="deep-night"]) * swap a small handful of tokens — warmer accents at night, cooler at midday. * - The script is *inert* unless the host page opts in: * * Without that data attribute the file loads and does nothing. * * Accent discipline (δ4, host-page responsibility): use --tone-accent in * exactly ONE place per page (eyebrow, OR active nav indicator, OR one * pull-quote, OR one key stat). Two accents on screen at once destroys the * wayfinding effect. * * WCAG AA contrast: every introduced fg/bg pair documented in inline * comments below and in tones-README.md. Normal text ≥4.5:1; large/UI ≥3:1. * `--tone-ink-faint` is intentionally below 4.5:1 in some tones — it is * documented as LARGE-TEXT / decorative / sidenote use only. * * Reduced motion (γ2): tones do NOT animate. Time-of-day swaps are * straight CSS variable substitutions with no transition. Safe. * * Last revised: 2026-05-28 (Claude Code batch-3 tones subagent). */ /* ============================================================================ * δ0 · No-tone default — invisible fallback * * A site that loads tones.css but does NOT set `data-tone` gets neutral * values that don't mutate any existing styles. Each token is documented * for any custom CSS that wants to consume tokens without committing to * a tone. * ========================================================================== */ :root { /* Light-mode no-tone fallback (neutral; do not match any specific tone) */ --tone-bg-base: #ffffff; --tone-bg-elevated: #fafafa; --tone-bg-recessed: #f3f3f3; --tone-ink-strong: #0a0a0a; --tone-ink-base: #1a1a1a; --tone-ink-muted: #555555; --tone-ink-faint: #777777; /* large-text / decorative only */ --tone-accent: #1a1a1a; /* deliberately ink — no color until tone applied */ --tone-accent-hover: #000000; --tone-accent-faint: rgba(26, 26, 26, 0.10); --tone-border-strong: #c8c8c8; --tone-border-soft: #e5e5e5; --tone-link: #1a1a1a; --tone-link-hover: #000000; --tone-link-visited: #4a4a4a; --tone-pull-quote-rule: #c8c8c8; --tone-callout-bg: #f7f7f7; --tone-callout-border: #d8d8d8; } /* ============================================================================ * δ1 · The four tones (light mode) * * Apply via: (or warm | advocacy | archive) * * Contrast notes inline per token; full table in tones-README.md. * ========================================================================== */ /* ---------- Editorial — broadsheet feel, deep editorial red, warm cream ---- */ [data-tone="editorial"] { --tone-bg-base: #fafaf7; /* warm cream */ --tone-bg-elevated: #f3efe6; /* paper-1 (matches PNN paper) */ --tone-bg-recessed: #ebe5d8; /* paper-2 */ --tone-ink-strong: #0e0e0e; /* AA: 18.46:1 on bg-base */ --tone-ink-base: #1a1a1a; /* AA: 16.64:1 on bg-base — body */ --tone-ink-muted: #525252; /* AA: 7.47:1 on bg-base */ --tone-ink-faint: #6e6e6e; /* AA: 4.88:1 on bg-base */ --tone-accent: #8b1818; /* deep editorial red — byline rules, run-in heads */ --tone-accent-hover: #6f1313; /* AA: 11.29:1 on bg-base */ --tone-accent-faint: rgba(139, 24, 24, 0.10); --tone-border-strong: #c8c0ad; /* broadsheet rule color */ --tone-border-soft: #ddd5c4; --tone-link: #7a1717; /* AA: 10.23:1 — body-safe link */ --tone-link-hover: #581010; --tone-link-visited: #5a3030; --tone-pull-quote-rule: #8b1818; /* match accent for the one quote per page */ --tone-callout-bg: #f3eee0; /* sidenote ground — sits between bg-base and bg-recessed */ --tone-callout-border: #c8c0ad; } /* ---------- Warm — family-first, umber accent, paper ground -------------- */ [data-tone="warm"] { --tone-bg-base: #f5f1ea; /* paper */ --tone-bg-elevated: #ede4cf; /* paper-1 */ --tone-bg-recessed: #e0d6bd; /* paper-2 */ --tone-ink-strong: #171513; /* AA: 16.18:1 on bg-base */ --tone-ink-base: #262320; /* warm black — AA: 13.88:1 */ --tone-ink-muted: #5a544b; /* AA: 6.65:1 */ --tone-ink-faint: #6e6757; /* AA: 4.99:1 — body-safe */ --tone-accent: #8a5e22; /* umber, gentle, person-first — AA: 5.03:1 */ --tone-accent-hover: #6f4a1a; --tone-accent-faint: rgba(138, 94, 34, 0.10); --tone-border-strong: #b8ab92; /* soft, never harsh */ --tone-border-soft: #d8cdb2; --tone-link: #6f4a1a; /* AA: 6.99:1 */ --tone-link-hover: #533614; --tone-link-visited: #5a4530; --tone-pull-quote-rule: #8a5e22; --tone-callout-bg: #efe8d5; --tone-callout-border: #c8b896; } /* ---------- Advocacy — institutional trust, teal accent, crisp rules ----- */ [data-tone="advocacy"] { --tone-bg-base: #f7f7f6; --tone-bg-elevated: #efefed; --tone-bg-recessed: #e5e5e2; --tone-ink-strong: #0e0e0e; /* AA: 18.01:1 */ --tone-ink-base: #1c1c1c; /* AA: 15.90:1 — body */ --tone-ink-muted: #525252; /* AA: 7.29:1 */ --tone-ink-faint: #6e6e6e; /* AA: 4.76:1 */ --tone-accent: #1e4a5c; /* institutional teal — what findbehindbars uses */ --tone-accent-hover: #163646; /* AA: 11.87:1 */ --tone-accent-faint: rgba(30, 74, 92, 0.10); --tone-border-strong: #c8c8c4; /* crisper than warm */ --tone-border-soft: #dededb; --tone-link: #1e4a5c; /* AA: 8.95:1 */ --tone-link-hover: #163646; --tone-link-visited: #2f4a55; --tone-pull-quote-rule: #1e4a5c; --tone-callout-bg: #ecf0f2; /* gentle teal-tinted ground for methodology asides */ --tone-callout-border: #c0d0d6; } /* ---------- Archive — research / foundation, linen ground, graphite ----- */ [data-tone="archive"] { --tone-bg-base: #ebe7df; /* linen */ --tone-bg-elevated: #e2ddd2; --tone-bg-recessed: #d4ceb8; --tone-ink-strong: #1a1a18; /* AA: 14.13:1 */ --tone-ink-base: #2b2b29; /* AA: 11.50:1 — body */ --tone-ink-muted: #5a5a55; /* AA: 5.62:1 */ --tone-ink-faint: #6c6c66; /* AA: 4.28:1 — large-text only */ --tone-accent: #4a4a44; /* graphite — restrained, won't fight the body */ --tone-accent-hover: #373732; /* AA: 9.70:1 */ --tone-accent-faint: rgba(74, 74, 68, 0.10); --tone-border-strong: #b8b3a4; --tone-border-soft: #d4ceb8; --tone-link: #4a4a44; /* AA: 7.23:1 */ --tone-link-hover: #2e2e2a; --tone-link-visited: #5a5a52; --tone-pull-quote-rule: #6b4423; /* sepia, one moment of warmth */ --tone-callout-bg: #e5e0d2; --tone-callout-border: #b8b3a4; } /* Optional: archive can opt into a monospaced body for source-document feel */ [data-tone="archive"][data-archive-mono="true"] { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; } /* ============================================================================ * δ2 · Real dark mode — character-preserving, not a tint * * Two activation paths: * 1. @media (prefers-color-scheme: dark) — automatic, respects the OS * 2. [data-color-scheme="dark"] on or — explicit opt-in * And one opt-OUT: * [data-color-scheme="light"] forces light even when OS prefers dark. * * Each tone gets its own dark palette that PRESERVES the tone's character: * Editorial dark — reading by lamplight (deep warm grays + warm coral accent) * Warm dark — tobacco on warm-dark * Advocacy dark — cool deep grays * Archive dark — paper-fade against warm graphite * ========================================================================== */ /* --- Automatic via OS preference --- */ @media (prefers-color-scheme: dark) { /* No-tone fallback dark (only applied when user has not set tone) */ :root:not([data-color-scheme="light"]) { --tone-bg-base: #0e0e0e; --tone-bg-elevated: #161616; --tone-bg-recessed: #1f1f1f; --tone-ink-strong: #fafafa; --tone-ink-base: #ebebeb; --tone-ink-muted: #a0a0a0; --tone-ink-faint: #707070; --tone-accent: #d97746; --tone-accent-hover: #e08858; --tone-accent-faint: rgba(217, 119, 70, 0.14); --tone-border-strong: #2a2a2a; --tone-border-soft: #1d1d1d; --tone-link: #d97746; --tone-link-hover: #e08858; --tone-link-visited: #b58060; --tone-pull-quote-rule: #d97746; --tone-callout-bg: #1a1816; --tone-callout-border: #2a2826; } [data-tone="editorial"]:not([data-color-scheme="light"]) { --tone-bg-base: #1c1a17; /* deep warm gray — lamplight */ --tone-bg-elevated: #25221e; --tone-bg-recessed: #2f2b25; --tone-ink-strong: #f2ede2; /* AA: 14.50:1 */ --tone-ink-base: #e8e2d8; /* AA: 13.48:1 — body */ --tone-ink-muted: #a8a09a; /* AA: 6.75:1 */ --tone-ink-faint: #7a736b; /* AA: 3.71:1 — large only */ --tone-accent: #d97746; /* warm coral, easier on dark — AA: 5.52:1 */ --tone-accent-hover: #e08858; --tone-accent-faint: rgba(217, 119, 70, 0.18); --tone-border-strong: #3a352e; --tone-border-soft: #2c2823; --tone-link: #e08858; /* AA: 6.48:1 */ --tone-link-hover: #e89968; --tone-link-visited: #b58060; --tone-pull-quote-rule: #d97746; --tone-callout-bg: #221f1a; --tone-callout-border: #3a352e; } [data-tone="warm"]:not([data-color-scheme="light"]) { --tone-bg-base: #1f1c17; /* tobacco-warm-dark */ --tone-bg-elevated: #2a261f; --tone-bg-recessed: #34302a; --tone-ink-strong: #f4ecdd; /* AA: 14.31:1 */ --tone-ink-base: #ebe3d4; /* AA: 13.32:1 — body */ --tone-ink-muted: #a8a094; /* AA: 6.57:1 */ --tone-ink-faint: #7c7468; /* AA: 3.68:1 — large only */ --tone-accent: #d8a672; /* tobacco-bronze — AA: 7.78:1 */ --tone-accent-hover: #e0b07e; --tone-accent-faint: rgba(216, 166, 114, 0.16); --tone-border-strong: #3a342c; --tone-border-soft: #2d2820; --tone-link: #e0b07e; /* AA: 8.64:1 */ --tone-link-hover: #e8bb8e; --tone-link-visited: #b8956e; --tone-pull-quote-rule: #d8a672; --tone-callout-bg: #25211a; --tone-callout-border: #3a342c; } [data-tone="advocacy"]:not([data-color-scheme="light"]) { --tone-bg-base: #161a1c; /* cool deep gray — institutional */ --tone-bg-elevated: #1e2326; --tone-bg-recessed: #272d31; --tone-ink-strong: #f0f2f4; /* AA: 15.30:1 */ --tone-ink-base: #e6e8ea; /* AA: 14.26:1 — body */ --tone-ink-muted: #a0a4a8; /* AA: 6.98:1 */ --tone-ink-faint: #74787c; /* AA: 3.94:1 — large only */ --tone-accent: #6ba5b8; /* cooled teal for dark — AA: 6.42:1 */ --tone-accent-hover: #7eb2c4; --tone-accent-faint: rgba(107, 165, 184, 0.16); --tone-border-strong: #2f363a; --tone-border-soft: #232a2e; --tone-link: #7eb2c4; /* AA: 7.55:1 */ --tone-link-hover: #92bfd0; --tone-link-visited: #6c8e9c; --tone-pull-quote-rule: #6ba5b8; --tone-callout-bg: #1d2225; --tone-callout-border: #2f363a; } [data-tone="archive"]:not([data-color-scheme="light"]) { --tone-bg-base: #1d1c18; /* warm graphite */ --tone-bg-elevated: #26241f; --tone-bg-recessed: #2f2c26; --tone-ink-strong: #e4dfd4; /* AA: 12.78:1 */ --tone-ink-base: #dad6cd; /* AA: 11.76:1 — body */ --tone-ink-muted: #9c9890; /* AA: 5.93:1 */ --tone-ink-faint: #706c66; /* AA: 3.27:1 — large only */ --tone-accent: #a89683; /* warm graphite-fade — AA: 5.97:1 */ --tone-accent-hover: #b8a690; --tone-accent-faint: rgba(168, 150, 131, 0.16); --tone-border-strong: #36322a; --tone-border-soft: #2a2722; --tone-link: #b8a690; /* AA: 7.22:1 */ --tone-link-hover: #c8b5a0; --tone-link-visited: #968470; --tone-pull-quote-rule: #c8a986; --tone-callout-bg: #23211c; --tone-callout-border: #36322a; } } /* --- Explicit dark override — wins over @media query (per cascade) --- */ [data-color-scheme="dark"] { --tone-bg-base: #0e0e0e; --tone-bg-elevated: #161616; --tone-bg-recessed: #1f1f1f; --tone-ink-strong: #fafafa; --tone-ink-base: #ebebeb; --tone-ink-muted: #a0a0a0; --tone-ink-faint: #707070; --tone-accent: #d97746; --tone-accent-hover: #e08858; --tone-accent-faint: rgba(217, 119, 70, 0.14); --tone-border-strong: #2a2a2a; --tone-border-soft: #1d1d1d; --tone-link: #d97746; --tone-link-hover: #e08858; --tone-link-visited: #b58060; --tone-pull-quote-rule: #d97746; --tone-callout-bg: #1a1816; --tone-callout-border: #2a2826; } [data-color-scheme="dark"][data-tone="editorial"] { --tone-bg-base: #1c1a17; --tone-bg-elevated: #25221e; --tone-bg-recessed: #2f2b25; --tone-ink-strong: #f2ede2; --tone-ink-base: #e8e2d8; --tone-ink-muted: #a8a09a; --tone-ink-faint: #7a736b; --tone-accent: #d97746; --tone-accent-hover: #e08858; --tone-accent-faint: rgba(217, 119, 70, 0.18); --tone-border-strong: #3a352e; --tone-border-soft: #2c2823; --tone-link: #e08858; --tone-link-hover: #e89968; --tone-link-visited: #b58060; --tone-pull-quote-rule: #d97746; --tone-callout-bg: #221f1a; --tone-callout-border: #3a352e; } [data-color-scheme="dark"][data-tone="warm"] { --tone-bg-base: #1f1c17; --tone-bg-elevated: #2a261f; --tone-bg-recessed: #34302a; --tone-ink-strong: #f4ecdd; --tone-ink-base: #ebe3d4; --tone-ink-muted: #a8a094; --tone-ink-faint: #7c7468; --tone-accent: #d8a672; --tone-accent-hover: #e0b07e; --tone-accent-faint: rgba(216, 166, 114, 0.16); --tone-border-strong: #3a342c; --tone-border-soft: #2d2820; --tone-link: #e0b07e; --tone-link-hover: #e8bb8e; --tone-link-visited: #b8956e; --tone-pull-quote-rule: #d8a672; --tone-callout-bg: #25211a; --tone-callout-border: #3a342c; } [data-color-scheme="dark"][data-tone="advocacy"] { --tone-bg-base: #161a1c; --tone-bg-elevated: #1e2326; --tone-bg-recessed: #272d31; --tone-ink-strong: #f0f2f4; --tone-ink-base: #e6e8ea; --tone-ink-muted: #a0a4a8; --tone-ink-faint: #74787c; --tone-accent: #6ba5b8; --tone-accent-hover: #7eb2c4; --tone-accent-faint: rgba(107, 165, 184, 0.16); --tone-border-strong: #2f363a; --tone-border-soft: #232a2e; --tone-link: #7eb2c4; --tone-link-hover: #92bfd0; --tone-link-visited: #6c8e9c; --tone-pull-quote-rule: #6ba5b8; --tone-callout-bg: #1d2225; --tone-callout-border: #2f363a; } [data-color-scheme="dark"][data-tone="archive"] { --tone-bg-base: #1d1c18; --tone-bg-elevated: #26241f; --tone-bg-recessed: #2f2c26; --tone-ink-strong: #e4dfd4; --tone-ink-base: #dad6cd; --tone-ink-muted: #9c9890; --tone-ink-faint: #706c66; --tone-accent: #a89683; --tone-accent-hover: #b8a690; --tone-accent-faint: rgba(168, 150, 131, 0.16); --tone-border-strong: #36322a; --tone-border-soft: #2a2722; --tone-link: #b8a690; --tone-link-hover: #c8b5a0; --tone-link-visited: #968470; --tone-pull-quote-rule: #c8a986; --tone-callout-bg: #23211c; --tone-callout-border: #36322a; } /* ============================================================================ * δ3 · Time-of-day theming (opt-in via tones.js) * * These selectors fire only when tones.js has been opted in * (`