/* Phase 16n redesign — editorial system shared across every product's blog, brand identity carried entirely by --accent (set per-deploy in config.js). Design read: a content hub for four different B2B/consumer products, audience arriving from search/social, confident-magazine language — self-hosted display serif, a numbered contents-page list instead of a generic feature-card grid, a cinematic scrim hero for the lead story, and the brand accent used as a real color fill (CTA block), not just a hover tint. */ @font-face { font-family: "Fraunces Display"; src: url("/blog/fonts/Fraunces-Display600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces Display"; src: url("/blog/fonts/Fraunces-Display900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } :root { --bg: #fafafa; --ink: #16160f; --ink-muted: #6b6862; --hairline: #e3e0da; --card-bg: #ffffff; --accent: #1a1a18; /* overridden per-deploy in config.js */ /* Reason: --accent-fg is what every *text/border* rule below actually uses (see the toggle-safe block further down) — --accent itself is reserved for solid-fill contexts (CTA button, hero eyebrow badge) where white text sits on top, a separate contrast question that doesn't change between themes. In light mode --accent-fg is just --accent unchanged (every real per-product accent already clears 4.5:1 against the light background); dark mode overrides this same variable with a lightened, contrast-verified value — see agent.tenancy.blog_render_service._accent_style, which computes it server-side per product rather than shipping one fixed formula that might not clear WCAG for every possible brand color. */ --accent-fg: var(--accent); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --font-display: "Fraunces Display", Georgia, "Times New Roman", serif; } /* Phase 16p: a manual toggle, not a prefers-color-scheme media query — this blog defaults to light regardless of OS/browser theme, and only switches when a visitor explicitly clicks the toggle (blog-template/ theme.js), persisted in localStorage. [data-theme="dark"] is set on by an inline, render-blocking script in (see _head() in blog_render_service.py) before first paint, so a returning dark-mode visitor never sees a flash of the light theme. Token swap over the same custom properties every rule in this file already routes color through, same pattern as the design before this feature: nothing else needs to change. */ :root[data-theme="dark"] { --bg: #0c0c0e; --ink: #f1efe9; --ink-muted: #9b978f; --hairline: #2a2a2c; --card-bg: #171619; /* Defensive fallback only — the real per-product value is injected inline, later in , by _accent_style() and wins the cascade. */ --accent-fg: var(--accent); } * { box-sizing: border-box; } /* Reason: the comment form's inputs already show a placeholder, but a placeholder alone fails WCAG 1.3.1/3.3.2 (it disappears on input and isn't reliably announced as a label by every screen reader) — a real