/** * Site themes — colours and fonts only. * Apply via . Default matches :root. */ :root, [data-theme="classic"] { --cream: #F8F4EE; --cream-dark: #EDE7DC; --ink: #1C1917; --ink-mid: #44403C; --ink-muted: #78716C; --ink-faint: #A8A29E; --border: rgba(28, 25, 23, 0.12); --border-mid: rgba(28, 25, 23, 0.22); --accent: #8B6F4E; --accent-light: #C4A882; --accent-dark: #6E5A3F; --accent-rgb: 139, 111, 78; --logo-heart: #E02020; --font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --panel: #fff; --wound: #a03030; --heal: #2a6090; --reward: #2d6b44; --reward-dark: #1f4d32; --reward-rgb: 45, 107, 68; --nav-bg: rgba(248, 244, 238, 0.88); --flash-success-bg: #edf6f0; --flash-success-border: #8eb89a; --flash-success-ink: #1f4d32; --flash-error-bg: #faf0ee; --flash-error-border: #d49a92; --flash-error-ink: #6b2218; --void: var(--cream); --deep: var(--cream-dark); --surface: var(--cream); --card: var(--cream-dark); --text: var(--ink); --muted: var(--ink-muted); --faint: var(--ink-faint); --accent2: var(--accent-light); --gold: var(--accent); --gold-dim: var(--accent-light); --btn-bg: #E2D6C4; --btn-bg-hover: #D4C4A8; --btn-text: var(--ink); --btn-text-hover: var(--ink); --btn-border: rgba(28, 25, 23, 0.14); } [data-theme="twilight"] { --cream: #1A2230; --cream-dark: #242D3D; --ink: #E8EDF5; --ink-mid: #C5CEDB; --ink-muted: #93A0B5; --ink-faint: #6E7A90; --border: rgba(232, 237, 245, 0.1); --border-mid: rgba(232, 237, 245, 0.18); --accent: #8FA4C4; --accent-light: #B4C5DE; --accent-dark: #6E86AA; --accent-rgb: 143, 164, 196; --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --panel: #242D3D; --wound: #E07070; --heal: #6AAED4; --reward: #5A9A72; --reward-dark: #3F7558; --reward-rgb: 90, 154, 114; --nav-bg: rgba(26, 34, 48, 0.92); --flash-success-bg: rgba(90, 154, 114, 0.16); --flash-success-border: rgba(90, 154, 114, 0.45); --flash-success-ink: #B8E0C8; --flash-error-bg: rgba(224, 112, 112, 0.12); --flash-error-border: rgba(224, 112, 112, 0.4); --flash-error-ink: #F5C4C4; --void: var(--cream); --deep: var(--cream-dark); --surface: var(--cream); --card: var(--cream-dark); --text: var(--ink); --muted: var(--ink-muted); --faint: var(--ink-faint); --accent2: var(--accent-light); --gold: var(--accent); --gold-dim: var(--accent-light); } [data-theme="sage"] { --cream: #EEF2EA; --cream-dark: #E2E9DC; --ink: #243024; --ink-mid: #3E4A3C; --ink-muted: #667264; --ink-faint: #8E978C; --border: rgba(36, 48, 36, 0.12); --border-mid: rgba(36, 48, 36, 0.22); --accent: #5A7356; --accent-light: #8FA889; --accent-dark: #445A41; --accent-rgb: 90, 115, 86; --font-body: 'Lora', Georgia, 'Times New Roman', serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --panel: #FAFCF8; --wound: #9A4540; --heal: #3E6E88; --reward: #3F7350; --reward-dark: #2E553B; --reward-rgb: 63, 115, 80; --nav-bg: rgba(238, 242, 234, 0.92); --flash-success-bg: #E6F2EA; --flash-success-border: #8EB89A; --flash-success-ink: #2E553B; --flash-error-bg: #F5EBEA; --flash-error-border: #CF9A96; --flash-error-ink: #6B2A26; --void: var(--cream); --deep: var(--cream-dark); --surface: var(--cream); --card: var(--cream-dark); --text: var(--ink); --muted: var(--ink-muted); --faint: var(--ink-faint); --accent2: var(--accent-light); --gold: var(--accent); --gold-dim: var(--accent-light); } [data-theme="earth-garden"] { --cream: #EEF1E8; --cream-dark: #D8DDD0; --body-bg: #CCD5BA; --focus-card-bg: #B8C1A6; --ink: #0F120F; --ink-mid: #1A201A; --ink-muted: #2A302A; --ink-faint: #5A635A; --border: rgba(15, 18, 15, 0.16); --border-mid: rgba(15, 18, 15, 0.28); --accent: #D97242; --accent-light: #E8A67A; --accent-dark: #B85A28; --accent-rgb: 217, 114, 66; --font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --panel: #F6F8F2; --shadow: #8A7A82; --shadow-rgb: 138, 122, 130; --wound: #B87A7A; --heal: #152818; --reward: #0F1E15; --reward-dark: #0A150F; --reward-rgb: 15, 30, 21; --nav-bg: var(--focus-card-bg); --flash-success-bg: #C8D8CC; --flash-success-border: #3D5C45; --flash-success-ink: #0A150F; --flash-error-bg: #F5EBEA; --flash-error-border: #D4A8A2; --flash-error-ink: #7A4545; --void: var(--cream); --deep: var(--cream-dark); --surface: var(--cream); --card: var(--cream-dark); --text: var(--ink); --muted: var(--ink-muted); --faint: var(--ink-faint); --accent2: #C9A5A0; --gold: var(--accent); --gold-dim: var(--accent-light); } [data-theme="earth-garden"] body { background-color: var(--focus-card-bg); } [data-theme="earth-garden"] #step-focus-card, [data-theme="earth-garden"] .portal-page .card { background: var(--body-bg); }