/* ============================================================================ Editorial surface theme — the HuntLog public/marketing brand (red + ink + paper, Archivo / Space Mono). Maps the brand PRIMITIVES (brand.css — load it FIRST) onto the semantic token contract from base/variables.css. Applied via [data-surface="editorial"] on . SINGLE SOURCE for "what editorial looks like". Two consumers: * the dashboard's public/editorial pages (overrides variables.css :root); * the isolated demo showcase, served via the demos asset whitelist (same mechanism as theme-toggle.css) — there it is the ONLY contract source, so this file is self-sufficient (defines the full set, not just diffs). See the token doctrine in CLAUDE.md ("Design tokens & color governance"). ========================================================================== */ [data-surface="editorial"] { /* Accent — editorial is red. --primary = this surface's accent; --red = the always-red signal (claw, marks). Both red here, distinct in meaning. */ --primary: var(--brand-red); --primary-rgb: var(--brand-red-rgb); --red: var(--brand-red); --red-rgb: var(--brand-red-rgb); /* Surfaces — paper */ --bg-primary: var(--brand-surface); --bg-secondary: var(--brand-white); --bg-tertiary: rgba(var(--brand-ink-rgb), 0.05); --bg-card: var(--brand-surface); /* Text — ink */ --text-primary: var(--brand-ink); --text-secondary: rgba(var(--brand-ink-rgb), 0.56); --text-muted: rgba(var(--brand-ink-rgb), 0.56); /* Lines */ --border: rgba(var(--brand-ink-rgb), 0.14); --border-light: rgba(var(--brand-ink-rgb), 0.08); /* Editorial type families */ --font-display: 'Archivo', 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'Fira Code', monospace; } /* Dark editorial — surfaces invert (ink ground, paper text); red reads on both. */ [data-surface="editorial"][data-theme="dark"] { --bg-primary: var(--brand-ink); --bg-secondary: #141824; --bg-tertiary: rgba(var(--brand-white-rgb), 0.06); --bg-card: var(--brand-ink); --text-primary: var(--brand-surface); --text-secondary: rgba(var(--brand-white-rgb), 0.58); --text-muted: rgba(var(--brand-white-rgb), 0.58); --border: rgba(var(--brand-white-rgb), 0.16); --border-light: rgba(var(--brand-white-rgb), 0.10); }