@charset "UTF-8"; /* ============================================================ DW Design System — TOKEN KERNEL (canonical SSOT) Output target: ../css/tokens.css ------------------------------------------------------------ The single source of design truth for every dw* surface (latinprayer.org theme + plugins, dushanwegner.com theme). Enqueued globally + unconditionally by dwtheme, AFTER bootstrap-overrides, so the `--bs-*` bridge below wins over the literal #212529 that bootstrap-overrides re-asserts. Layers: 1. base palette + font kernel (light) :root 2. reading-mode flips (inert until data-theme) html[data-theme=…] 3. Bootstrap bridge (--bs-* → palette) :root WHAT it does : defines every design custom property once. WHY it exists: so plugins + both themes "speak one language". DEPENDS ON : nothing (system fonts only, no @import). ============================================================ */ :root { /* Neutral zinc surfaces — the "tool" palette (Claude-Design wgnr-style). Cool, neutral, no warmth: white paper, zinc text, hairline rules. */ --bg: #ffffff; /* paper white */ --bg-2: #f6f6f7; /* sunken surface for cards / hovers */ --bg-3: #eeeeef; /* deeper sunken (rail hover, nav grid) */ --ink: #18181b; /* near-black zinc ink */ --ink-soft: #52525b; /* secondary text */ --ink-mute: #9a9aa3; /* tertiary / labels */ --rule: #e5e5e8; /* hairline */ --rule-soft: #f0f0f2; --rubric: rgb(113, 5, 0); /* oxblood — the single accent, used sparingly */ --rubric-2: rgb(88, 4, 0); --rubric-tint: rgb(113 5 0 / 0.10); /* faint oxblood wash (chips, hovers) */ --key-sub: #f3e7e6; /* active-nav tint (oxblood on near-white) */ /* Gilt ornament retired (tool direction) — any legacy gilt hairline resolves to a plain neutral hairline. */ --gilt: var(--rule); /* Positive / "go" action colour — the donate + subscribe buttons. A pale green that reads as a positive action, kept distinct from the red/oxblood accent (which stays for links, dates, markers). */ --positive: #5bc236; --positive-2: #4fae2f; /* hover */ --positive-ink: #ffffff; /* Soft elevation shadow shared by raised cards/sheets. */ --shadow-md: 0 8px 18px -8px oklch(0.22 0.04 60 / 0.12), 0 30px 60px -20px oklch(0.22 0.04 60 / 0.18); /* DW Design System canonical font kernel. System fonts only. Identity comes from weight + tracking + size, not a webfont. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Legacy font aliases — older partials reference --serif/--display/--mono/ --brand. ALL alias to --font-sans now (cool/modern/professional). Anything that still wants a serif moment must opt in explicitly with --font-serif. */ --serif: var(--font-sans); --display: var(--font-sans); --mono: var(--font-mono); --brand: var(--font-sans); --max: 1080px; --read: 720px; color-scheme: light; } /* ── Reading-mode flips ─────────────────────────────────────── INERT until a resolver sets data-theme on . The rules live here (so every dw surface gets dark/night/sepia for free) but each site opts in by setting data-theme itself. dwtheme does NOT auto-set data-theme — that stays per-site. */ html[data-theme=dark], html[data-theme=night] { --bg: #161618; --bg-2: #1d1d20; --bg-3: #27272b; --ink: #ececee; --ink-soft: #a8a8b0; --ink-mute: #6e6e77; --rule: #2a2a2f; --rule-soft: #222226; /* In dark, oxblood reads almost black, so the accent lifts to a soft desaturated red (legible on the dark zinc ground). The mark keeps oxblood. */ --rubric: #df6c64; --rubric-2: #e98a82; --rubric-tint: rgb(223 108 100 / 0.16); --key-sub: #2a1716; --gilt: var(--rule); color-scheme: dark; --brand-red: rgb(113, 5, 0); /* Re-assert the Bootstrap bridge at this higher specificity (html[data-theme] beats the :root bridge below AND any later :root that re-asserts a literal light --bs-body-bg, e.g. the Customizer). Without this, --bs-body-bg stays #fff in dark and the body never goes dark on a site that has no design overlay painting the body itself. */ --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-mute); --bs-border-color: var(--rule); } /* The Customizer paints `body { background: #fff }` inline (a theme_mod), which beats Bootstrap's `body { background: var(--bs-body-bg) }`. Re-paint the body in dark at a higher specificity (html[data-theme] body) so a site with NO design overlay (dushanwegner.com) still flips to the dark ground. LP already paints its own dark body; this is harmless there. */ html[data-theme=dark] body, html[data-theme=night] body { background-color: var(--bg); color: var(--ink); } /* Warm Sand — a third reading surface (parchment / Apple-Books-sepia feel), matching the iOS app's "Warm Sand": cream bg, deep-walnut ink, tan rules. The brand accent (--rubric, per site) is unchanged. Opt-in only — the system 'auto' can't suggest it. Re-assert the --bs-* bridge + repaint the body (same reason as the dark block: beat the Customizer's literal light bg). */ html[data-theme=warm-sand] { --bg: #f0e4cc; --bg-2: #e8dcc2; --bg-3: #ddd0b4; --ink: #2f230f; --ink-soft: #5a4d35; --ink-mute: #7a6b50; --rule: #d8c8a8; --rule-soft: #e2d6bc; --gilt: var(--rule); color-scheme: light; --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-mute); --bs-border-color: var(--rule); } html[data-theme=warm-sand] body { background-color: var(--bg); color: var(--ink); } /* Per-site accent: dushanwegner.com's brand / link / marker colour is a bright red (#cc0000), NOT LP's oxblood. Override the accent token family for the DW body so EVERY accent (links, list/essay dates, tier hovers, the e-mail-abo button, the support popup, rail active state) follows it in one place. LP keeps oxblood (no override). */ body.dwdushanwegner { --rubric: #cc0000; --rubric-2: #a30000; --rubric-tint: rgb(204 0 0 / 0.10); --key-sub: #fbe9e9; } /* In dark, lift the red so it stays legible on the dark ground (body.dwdushanwegner alone would otherwise win over the dark token block). */ html[data-theme=dark] body.dwdushanwegner, html[data-theme=night] body.dwdushanwegner { --rubric: #ef5350; --rubric-2: #f3796f; --rubric-tint: rgb(239 83 80 / 0.16); --key-sub: #2a1414; } /* Sepia retired (tool direction = light/dark/auto only). The selector is kept inert so any stale data-theme="sepia" falls back to clean light. */ /* Logo mark keeps the brand sanguine red in dark mode too — don't let any legacy brightness filter recolour it. */ html[data-theme=dark] .brand .mark, html[data-theme=night] .brand .mark, html[data-theme=dark] .navbar-brand img.custom-logo, html[data-theme=night] .navbar-brand img.custom-logo { filter: none; } /* ── Bootstrap bridge ────────────────────────────────────────── Single namespace: every surface speaks base tokens directly. The bridge below is the only remaining indirection — it maps Bootstrap's own body tokens onto the base palette. */ :root { /* ── Bootstrap bridge ─────────────────────────────────────── Map Bootstrap's body tokens onto the design palette so Bootstrap-inherited text/bg/borders follow the theme instead of the literal #212529. This sheet loads AFTER bootstrap- overrides, so these win over its #212529 re-assert. In light, --ink ≈ #212529, so light-mode appearance is unchanged. */ --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-mute); --bs-border-color: var(--rule); }