/* Global Theme CSS Variables */ /* ──────────────────────────────────────────────────────────────────────── Every colour in the application is declared here, exactly once. A scoped sheet references a token; it never restates a literal, and it never carries a `var(--x, #fallback)` fallback — a fallback is a second declaration of the same colour in a place review does not look, which is how five different values for --accent-color once ended up in the tree. Colours that need alpha variants are declared as an `-rgb` channel triple and the solid token is derived from it, so `rgba(var(--x-rgb), 0.3)` at a call site sets opacity — a per-site design decision — without restating the hue. CssColorTokenTests enforces both rules. ──────────────────────────────────────────────────────────────────────── */ :root { /* Channel triples: the hues that appear at more than one opacity. */ --shadow-rgb: 0, 0, 0; --highlight-rgb: 255, 255, 255; --color-gold-rgb: 201, 162, 39; --color-danger-rgb: 220, 53, 69; --mm-accent-red-rgb: 146, 38, 16; --mm-text-header-rgb: 88, 23, 13; --mm-bg-parchment-rgb: 253, 241, 220; --mm-shadow-rgb: 134, 116, 83; --dh-bg-dark-rgb: 65, 37, 85; --dh-bg-light-rgb: 245, 240, 248; --dh-accent-gold-rgb: 230, 198, 75; --dh-accent-teal-rgb: 132, 205, 194; --system-dnd-rgb: 176, 69, 80; --system-dh-rgb: 122, 106, 154; --color-info-rgb: 0, 123, 255; --color-purple-rgb: 111, 66, 193; --difficulty-easy-bar-rgb: 40, 167, 69; --difficulty-moderate-bar-rgb: 255, 193, 7; --brand-kofi-rgb: 255, 187, 0; --brand-patreon-rgb: 255, 66, 77; /* Neutrals */ --color-white: #fff; --color-black: #000; --ink-navy: #1a1a2e; /* Background Colors */ --bg-main: #f4e4c1; --bg-card: #e8d5b0; /* The un-themed input surface, and the pale value the three feature-suggestion badges use as their TEXT colour. Split into two names on 2026-08-20: --bg-input became mode-dependent (dark on a dark page) and those badges meant "the pale one" all along, not "whatever an input is painted". */ --bg-input-light: #faf3e3; --bg-input: var(--bg-input-light); /* Text Colors */ --text-primary: #1a1a1a; --text-header: #3d2b1f; --text-secondary: #5c4a3a; /* Accent Colors */ --color-gold: rgb(var(--color-gold-rgb)); --color-gold-light: #d4b33a; --color-gold-dark: #a8861f; --color-gold-pale: #e8d59a; --color-danger: #8b2323; --color-danger-light: #a52a2a; --color-danger-dark: #6b1a1a; --color-danger-bg: rgba(var(--color-danger-rgb), 0.1); --color-copper: #b87333; --color-copper-light: #c98544; --color-copper-dark: #9a6528; --color-copper-deep: #7a4a1a; /* Patreon brand (SubscribeCta, PatreonGate) — not a theme colour. */ --color-patreon: #f96854; /* Navigation */ --nav-bg: #4a3728; --nav-border: var(--color-gold); /* Borders */ --border-color: #8b7355; --border-light: #a89070; /* The boundary of an interactive control, which WCAG 1.4.11 holds to 3:1 against both sides of the edge — unlike a decorative card border. Follows --border-color everywhere it already clears that; Daggerheart's light mode overrides it below, where --dh-border-light does not. */ --input-border: var(--border-color); /* Adaptive text colors (overridden per theme + dark/light mode) */ --text-color: var(--text-primary); --text-muted: var(--text-secondary); /* Contrast text colors */ --on-primary-text: var(--text-primary); --on-accent-text: var(--text-primary); --nav-text: var(--bg-card); /* Button variant colors */ --color-warning: #e6a623; --color-warning-light: #f0b83a; --color-warning-dark: #c98d1d; --color-success: #4a9c5d; --color-success-light: #5aad6d; --color-success-dark: #3d8a4f; --color-secondary: var(--border-light); --color-secondary-light: #b9a080; --color-secondary-dark: var(--border-color); --on-warning-text: var(--text-primary); --on-success-text: var(--color-white); --on-danger-text: var(--color-white); --on-info-text: var(--on-primary-text); --on-secondary-text: var(--color-white); /* Compare-table stat highlighting. Values are tuned for the dark card backgrounds (.light-mode overrides them further down); both clear WCAG AA against --card-bg and the --editor-highlight-bg alternating rows in each theme. Not --color-success/--color-danger: those are fill colours meant to carry --on-*-text on top, these are text colours on the card. */ --compare-stat-highest: #6ecf78; --compare-stat-lowest: #ef8a8a; /* Focus & misc */ --focus-shadow: rgba(var(--color-gold-rgb), 0.25); --privacy-toggle-bg: rgba(var(--color-gold-rgb), 0.08); /* ──────────────────────────────────────────────────────────────────── Unthemed defaults for the tokens the theme wrappers below override. The shell, home, landing, guide, legal and admin surfaces carry no .dnd-theme / .dh-theme class, so before these existed those tokens resolved to nothing there and every scoped sheet compensated with its own inline fallback. The wrappers still override each one per system; these are what an unthemed surface actually renders. ──────────────────────────────────────────────────────────────────── */ --page-bg: #0f0f1a; --card-bg: var(--ink-navy); --card-border: #6a5a5a; --accent-color: var(--color-gold); --dropdown-bg: #2a2a2a; --dropdown-border: var(--card-border); --dropdown-text: var(--color-white); --focus-color: var(--color-gold); --radio-accent: var(--color-gold); --editor-highlight-bg: rgba(var(--color-gold-rgb), 0.1); /* Accent wash behind a selected row (FoeSearchSelectorLayout). It followed the theme's accent already; it just had no declaration to read. */ --accent-tint: var(--editor-highlight-bg); --card-actions-bg: rgba(var(--shadow-rgb), 0.15); --hover-shadow: rgba(var(--shadow-rgb), 0.15); --hover-bg: rgba(var(--highlight-rgb), 0.06); --surface-muted: #e5e7eb; /* System accents on unthemed surfaces (Home cards, builder landing). */ --system-dnd-accent: #d05560; --system-dh-accent: #9a8aba; /* Party-role chips (EncounterPartyConfig): fixed role identities, not theme colours. */ --role-caster: #9b59b6; --role-healer: #2ecc71; --role-physical: #e67e22; /* Damage-type badges (MonsterDefensesSection): vulnerability blue, resistance green, immunity red — fixed identities, not theme colours. */ --defense-badge-start: #2c5aa0; --defense-badge-end: #3a6db8; --defense-badge-border: #234b85; --resist-badge-start: #4a7c59; --resist-badge-end: #5a9a6b; --resist-badge-border: #3d6b4a; --immune-badge-end: #b83020; /* Objective-type chips (EncounterScenarioPanel) and assessment verdicts. */ --color-info: rgb(var(--color-info-rgb)); --color-purple: rgb(var(--color-purple-rgb)); --assessment-positive: #1f7a3a; --assessment-negative: #b02a37; /* Field-validation outline (base.css). */ --valid-outline: #26b050; /* Support-platform brands. Patreon ships two reds: the coral it uses on buttons (--color-patreon) and the flat red on promo tiles. */ --brand-kofi: rgb(var(--brand-kofi-rgb)); --brand-kofi-light: #ffdd00; --brand-kofi-text: var(--ink-navy); --brand-patreon: rgb(var(--brand-patreon-rgb)); --brand-patreon-dark: #ff2a35; /* Patron-tier accents (TierGateBadge, Home tier cards). Their own ramp: the --tier-badge-* tokens above are the Patreon-palette badges. */ --tier-gate-insider: #6366f1; --tier-gate-curator: #f59e0b; --tier-gate-supporter: #10b981; --tier-insider-heading: #d97706; /* ── Plain-print greys ────────────────────────────────────────────── The monochrome print modes (.print-plain cards, .eprint-* sheets) are theme-independent by design — they render the same on any surface, so they read these rather than the themed tokens. Two weights each, because the card sheets and the encounter/environment sheets were drawn against different paper. ──────────────────────────────────────────────────────────────────── */ --print-text: #444; --print-text-soft: #666; --print-text-muted: #555; --print-text-strong: #333; --print-rule: #aaa; --print-rule-strong: #999; --print-rule-light: #ddd; --mm-print-label: #7a4a35; --mm-print-rule-soft: #c4a882; --mm-print-row-tint: rgba(var(--mm-text-header-rgb), 0.05); --mm-print-panel-bg: rgba(var(--mm-bg-parchment-rgb), 0.8); --dh-print-label: #5a3d6b; --dh-print-rule-soft: #b8a0c8; --dh-print-row-tint: rgba(var(--dh-bg-dark-rgb), 0.05); --dh-print-panel-bg: rgba(var(--dh-bg-light-rgb), 0.8); --dh-card-header-text: #3d2854; --dh-card-text: #3d2b4a; --dh-card-accent-text: #5c2a44; /* Printed difficulty readout (EncounterContent). Its own ramp: the badge tokens below are fills meant to carry text on top, these are ink. */ --print-difficulty-easy: var(--color-success); --print-difficulty-moderate: #c8a227; --print-difficulty-hard: #c85c27; --print-difficulty-overwhelming: #c82727; /* Typography */ --font-header: 'Cinzel', serif; --font-body: 'Crimson Text', serif; /* Layout */ /* Difficulty colours (used by encounter display + builder) */ --difficulty-easy-bg: #d4edda; --difficulty-easy-text: #155724; --difficulty-moderate-bg: #fff3cd; --difficulty-moderate-text: #856404; --difficulty-hard-bg: #f8d7da; --difficulty-hard-text: #721c24; --difficulty-deadly-bg: var(--difficulty-hard-text); --difficulty-deadly-text: var(--color-white); --difficulty-easy-bar: rgb(var(--difficulty-easy-bar-rgb)); --difficulty-moderate-bar: rgb(var(--difficulty-moderate-bar-rgb)); --difficulty-hard-bar: rgb(var(--color-danger-rgb)); --difficulty-deadly-bar: var(--difficulty-hard-text); /* Patreon tier badge colours (TierBadge). Theme-independent by design: they mirror the Patreon tier palette, not the parchment/dark themes. Values are the ones AuthStatus and CreatorBadge each hardcoded before TierBadge was extracted. TierGateBadge deliberately uses a different palette and does not read these. */ --tier-badge-free-bg: #6c757d; --tier-badge-free-text: var(--color-white); --tier-badge-supporter-bg: #198754; --tier-badge-supporter-text: var(--color-white); --tier-badge-curator-bg: #0d6efd; --tier-badge-curator-text: var(--color-white); --tier-badge-insider-end: #ff8c00; --tier-badge-insider-bg: linear-gradient(135deg, var(--difficulty-moderate-bar) 0%, var(--tier-badge-insider-end) 100%); --tier-badge-insider-text: var(--color-black); --tier-badge-creator-bg: linear-gradient(135deg, #9333ea 0%, #ec4899 100%); --tier-badge-creator-text: var(--color-white); /* Feature suggestion badge colors */ --badge-role-bg: var(--color-copper-deep); --badge-role-text: var(--bg-input-light); --badge-type-bg: var(--color-gold-dark); --badge-type-text: var(--bg-input-light); --badge-property-bg: #3d7a5e; --badge-property-text: var(--bg-input-light); /* Classic stat block theme tokens */ --stat-block-bg: var(--mm-bg-parchment); --stat-block-text: #5e2a18; --stat-block-rule: var(--mm-accent-red-light); /* ──────────────────────────────────────────────────────────────────── Stat-block / print palettes: the D&D Monster Manual (--mm-*) and Daggerheart (--dh-*) card colours. These live on :root, NOT inside .dnd-theme / .dh-theme, and that is deliberate. A stat block is theme-independent by design — the same parchment card in dark mode, light mode, on a cross-system preview overlay, and in the OG renderer, whose OgRenderLayout has no theme class at all. Scoped to a theme wrapper these tokens resolved to nothing on exactly those surfaces, which is why every stat-block and print sheet hard-coded the hex literals instead of using them. They are namespaced by prefix, so both palettes coexist on :root without either shadowing the other. The theme wrappers below keep overriding the GENERIC tokens (--bg-main, --nav-bg, …) — that is what theming actually means here. ──────────────────────────────────────────────────────────────────── */ /* D&D Monster Manual — backgrounds */ --mm-bg-parchment: rgb(var(--mm-bg-parchment-rgb)); --mm-bg-card: #F5E6C8; /* Warmed toward the parchment on 2026-08-20: at #FEF8ED (254,248,237) a field read as white against the card it sits in. Still lighter than --mm-bg-card (#F5E6C8), so an input is still visibly a lighter well. */ --mm-bg-input: #FBF0D9; /* The dark-mode input surface. Sits one step above --card-bg (#2d1b1b) so a field reads as a field rather than a hole in the card. Before 2026-08-20 there was no such value and .dnd-theme handed --bg-input the parchment above in BOTH modes, which is why every input and select on a dark page rendered near-white. */ --mm-bg-input-dark: #3a2422; /* D&D Monster Manual — accents */ --mm-accent-red: rgb(var(--mm-accent-red-rgb)); --mm-accent-maroon: #7A200D; --mm-accent-red-light: #9c2b1b; /* D&D Monster Manual — text */ --mm-text-header: rgb(var(--mm-text-header-rgb)); --mm-text-primary: var(--text-primary); --mm-text-secondary: var(--text-secondary); /* D&D Monster Manual — borders */ --mm-border-brown: var(--border-color); /* Daggerheart — backgrounds */ --dh-bg-dark: rgb(var(--dh-bg-dark-rgb)); --dh-bg-medium: #5a3a6e; --dh-bg-light: rgb(var(--dh-bg-light-rgb)); --dh-bg-card: #ebe3ef; /* Tinted toward the lilac for the reason --mm-bg-input was warmed; was #f8f5fa. */ --dh-bg-input: #F6F0FA; /* Daggerheart's dark-mode input surface; see --mm-bg-input-dark. */ --dh-bg-input-dark: #2b2540; /* Daggerheart — accents */ --dh-accent-gold: rgb(var(--dh-accent-gold-rgb)); --dh-accent-gold-dark: var(--color-gold); --dh-accent-gold-light: #f0d46a; --dh-accent-teal: rgb(var(--dh-accent-teal-rgb)); --dh-accent-teal-dark: #5fb5a8; --dh-accent-teal-light: #a8ddd5; /* Daggerheart — text */ --dh-text-header: #2d1a38; --dh-text-primary: var(--text-primary); --dh-text-secondary: #5a4a63; /* Daggerheart — borders */ --dh-border-purple: #6b4a7d; --dh-border-light: #a89ab0; /* Control boundaries only. --dh-border-light is 2.37:1 on the light input surface, under WCAG 1.4.11's 3:1; this is 3.46:1 there and 3.09:1 on the card, without darkening every Daggerheart border. */ --dh-border-input: #8b7c96; /* Daggerheart — fonts */ --dh-font-header: 'Cormorant Garamond', 'Cinzel', serif; /* ── Paper ── The page the app prints on, in one place. These are the only physical units in the tree (CssPhysicalUnitTests enforces it) because they are the only measurements that answer to something outside the browser, and because they are related: the printable width IS the sheet less its margins, and a card measured against one number while the page frame uses another is the defect this block exists to prevent. Three files used to spell 194mm and 210mm out separately, kept in step by a comment. Swapping A4 for US Letter (215.9 x 279.4mm) is a change to these five declarations and nothing else. */ --print-page-width: 210mm; --print-page-height: 297mm; --print-page-margin: 8mm; --print-printable-width: calc(var(--print-page-width) - 2 * var(--print-page-margin)); /* Print typography and placeholders, in paper units for the same reason: what they size is measured on the sheet, not on a display. */ --print-body-size: 12pt; --print-placeholder-height: 60mm; } /* ======================================== D&D Monster Manual Theme ======================================== */ .dnd-theme { /* Dark is these two themes' default; .light-mode below flips it back. Declaring it is what makes the browser paint its OWN widgets to match — the