/* ============================================================ Shadowdark Theme System ============================================================ All theme-dependent colors use CSS custom properties. Themes are activated via data-theme attribute on . Default (no attribute) = dark-parchment. ============================================================ */ :root { /* --- Color components (for rgba() usage) --- */ --gold-rgb: 201, 168, 76; --shadow-rgb: 0, 0, 0; --danger-rgb: 231, 76, 60; --crit-rgb: 255, 215, 0; /* --- Backgrounds --- */ --bg-body: #0a0908; --bg-body-vignette: rgba(25, 22, 18, 0.6); --bg-surface: #2a2520; --bg-modal: #201c18; --bg-input: #15130f; --bg-inset: rgba(0, 0, 0, 0.3); --bg-overlay: rgba(0, 0, 0, 0.75); --bg-roll-log: #1a1714; --bg-roll-entry: #252118; /* --- Text --- */ --text-primary: #dad5c9; --text-secondary: #908878; --text-tertiary: #665e52; --text-faint: #4a4238; /* --- Gold accent --- */ --gold: #c9a84c; --gold-hover: #d4b65a; --gold-bright: #dcc06a; --btn-gold-bg: linear-gradient(180deg, #d4b65a, #c9a84c 40%, #b8973e); --btn-active-text: #1a1a2e; /* --- Status colors --- */ --hp: #4caf50; --ac: #5dade2; --danger: #e74c3c; --warning: #ff9800; --crit: #ffd700; --copper: #b87333; --silver: #a0a0a0; /* --- Textures --- */ --texture-surface: url("/textures/parchment-noise.png"); --texture-speckle: url("/textures/speckle.png"); --texture-body: url("/textures/wood-grain.png"); --texture-surface-size: 256px 256px; --texture-speckle-size: 128px 128px; --texture-body-size: 512px 512px; } /* ============================================================ Light Parchment — warm beige, like reading by daylight ============================================================ */ [data-theme="light-parchment"] { --gold-rgb: 140, 110, 40; --shadow-rgb: 80, 60, 30; --danger-rgb: 200, 60, 45; --bg-body: #c4b594; --bg-body-vignette: rgba(160, 140, 100, 0.3); --bg-surface: #ddd0b0; --bg-modal: #d5c8a8; --bg-input: #c8bb9a; --bg-inset: rgba(0, 0, 0, 0.06); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-roll-log: #d0c3a0; --bg-roll-entry: #d8cbb0; --text-primary: #2a2218; --text-secondary: #5a5040; --text-tertiary: #7a7060; --text-faint: #9a9080; --gold: #8a6d2b; --gold-hover: #a0832e; --gold-bright: #b89530; --btn-gold-bg: linear-gradient(180deg, #a08335, #8a6d2b 40%, #7a5d20); --btn-active-text: #f0e8d0; --hp: #2e8b34; --ac: #2e7da8; --danger: #c83c2d; --warning: #c87800; --crit: #b8960a; --copper: #8a5520; --silver: #707070; --texture-surface: url("/textures/parchment-noise-light.png"); --texture-speckle: url("/textures/speckle-light.png"); --texture-body: url("/textures/wood-grain-light.png"); } /* ============================================================ White — clean, minimal, near-white ============================================================ */ [data-theme="white"] { --gold-rgb: 154, 125, 48; --shadow-rgb: 0, 0, 0; --danger-rgb: 200, 60, 45; --bg-body: #f0ede8; --bg-body-vignette: transparent; --bg-surface: #faf8f4; --bg-modal: #f5f3ef; --bg-input: #eae7e0; --bg-inset: rgba(0, 0, 0, 0.04); --bg-overlay: rgba(0, 0, 0, 0.4); --bg-roll-log: #f2f0ec; --bg-roll-entry: #f8f6f2; --text-primary: #1a1816; --text-secondary: #555048; --text-tertiary: #807870; --text-faint: #aaa498; --gold: #9a7d30; --gold-hover: #b0932e; --gold-bright: #c8a830; --btn-gold-bg: linear-gradient(180deg, #b09335, #9a7d30 40%, #8a6d25); --btn-active-text: #f5f3ef; --hp: #2e8b34; --ac: #2e7da8; --danger: #c83c2d; --warning: #c87800; --crit: #8a7010; --copper: #8a5520; --silver: #707070; --texture-surface: none; --texture-speckle: none; --texture-body: none; } /* ============================================================ Abyss — maximum dark, pitch black ============================================================ */ [data-theme="abyss"] { --gold-rgb: 212, 182, 90; --shadow-rgb: 0, 0, 0; --danger-rgb: 231, 76, 60; --bg-body: #050505; --bg-body-vignette: transparent; --bg-surface: #0e0e14; --bg-modal: #0a0a10; --bg-input: #08080e; --bg-inset: rgba(0, 0, 0, 0.5); --bg-overlay: rgba(0, 0, 0, 0.85); --bg-roll-log: #0a0a10; --bg-roll-entry: #0e0e14; --text-primary: #e8e8e8; --text-secondary: #888888; --text-tertiary: #606060; --text-faint: #404040; --gold: #d4b65a; --gold-hover: #e0c870; --gold-bright: #edd880; --btn-gold-bg: linear-gradient(180deg, #e0c870, #d4b65a 40%, #c4a64a); --btn-active-text: #0a0a10; --hp: #4caf50; --ac: #5dade2; --danger: #e74c3c; --warning: #ff9800; --crit: #ffd700; --copper: #b87333; --silver: #a0a0a0; --texture-surface: none; --texture-speckle: none; --texture-body: none; }