/* ============================================================
tokens.css — GLOBAL STYLE SOURCE OF TRUTH
Every page (public site + hub) links this FIRST. Colors and
typography live here and ONLY here. Change a value here and it
propagates everywhere — site, hub, social kit, all of it.
Surfaced for humans at hub.timwoodring.com/global-styles.
============================================================ */
/* Fonts are loaded per-page via + a direct Google Fonts
in each page's (parallel, non-blocking-chained).
The old @import here forced a serial round-trip after tokens.css parsed — removed
for performance. If you add a new page, include the font in its head. */
:root {
/* ---- COLOR (raw) ---- */
--pine: #1C2B24;
--paper: #EEF0E9;
--brass: #9A7B3F;
--brass-light: #C9A455;
--brass-deep: #6E5A2E;
--sage: #6B7355;
--patina: #4A5B50;
/* ---- COLOR (semantic — what pages reference) ---- */
--ink: var(--pine);
--bg: var(--paper);
--accent: var(--brass);
--rule: rgba(28, 43, 36, 0.13);
--ink-soft: rgba(28, 43, 36, 0.70);
--ink-muted: rgba(28, 43, 36, 0.50);
--wash: rgba(28, 43, 36, 0.04);
--wash-2: rgba(28, 43, 36, 0.10);
/* ---- TYPOGRAPHY ---- */
--font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--font-sans: 'Figtree', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
/* hub aliases (hub.css references these) */
--serif: var(--font-serif);
--sans: var(--font-sans);
--mono: var(--font-mono);
color-scheme: light;
}
/* ============================================================
DARK MODE — Pine & Brass at night.
System default via prefers-color-scheme; explicit override via
[data-theme] on . These selectors out-specify any plain
:root (page-level / hub.css), so the flip wins everywhere.
Raw brand colors (--pine/--paper/--brass) stay constant; only
semantic + surface tokens flip.
============================================================ */
:root[data-theme="dark"] {
color-scheme: dark;
--ink: #E8EBE6;
--bg: #191E1B;
--paper: #191E1B;
--accent: #C9A455;
--signal: #C9A455;
--rule: rgba(232, 235, 230, 0.14);
--ink-soft: rgba(232, 235, 230, 0.70);
--ink-muted: rgba(232, 235, 230, 0.48);
--panel: #21261F;
--paper-raised: #262C23;
--card: #21261F;
--bg-warm: #1D221C;
--line: rgba(232, 235, 230, 0.13);
--line-2: rgba(232, 235, 230, 0.07);
--ink-2: #BAC2B7;
--ink-3: #8B928A;
--wash: rgba(231, 236, 229, 0.06);
--wash-2: rgba(231, 236, 229, 0.12);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--ink: #E8EBE6;
--bg: #191E1B;
--paper: #191E1B;
--accent: #C9A455;
--signal: #C9A455;
--rule: rgba(232, 235, 230, 0.14);
--ink-soft: rgba(232, 235, 230, 0.70);
--ink-muted: rgba(232, 235, 230, 0.48);
--panel: #21261F;
--paper-raised: #262C23;
--card: #21261F;
--bg-warm: #1D221C;
--line: rgba(232, 235, 230, 0.13);
--line-2: rgba(232, 235, 230, 0.07);
--ink-2: #BAC2B7;
--ink-3: #8B928A;
--wash: rgba(231, 236, 229, 0.06);
--wash-2: rgba(231, 236, 229, 0.12);
}
}
/* ---- Inverse surfaces: footers / CTAs / callouts use background:var(--ink)
as an "always dark" panel. Keep them dark (don't invert), and fix the
form controls inside them. ---- */
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .essay-cta,
:root[data-theme="dark"] .newsletter-strip,
:root[data-theme="dark"] .institute-callout {
background: #11140F;
color: #E8EBE6;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .footer,
:root:not([data-theme="light"]) .essay-cta,
:root:not([data-theme="light"]) .newsletter-strip,
:root:not([data-theme="light"]) .institute-callout {
background: #11140F;
color: #E8EBE6;
}
}
:root[data-theme="dark"] .ns-form input { color: #E8EBE6; }
:root[data-theme="dark"] .ns-form button { background: #C9A455; color: #11140F; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .ns-form input { color: #E8EBE6; }
:root:not([data-theme="light"]) .ns-form button { background: #C9A455; color: #11140F; }
}
/* Translucent chrome hardcoded light (.nav/.subnav) -> dark */
:root[data-theme="dark"] .nav, :root[data-theme="dark"] .subnav { background: rgba(22, 27, 24, 0.9); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .nav, :root:not([data-theme="light"]) .subnav { background: rgba(22, 27, 24, 0.9); }
}
body { transition: background-color 0.25s ease, color 0.25s ease; }