/* =========================================================================== Sotogrande Dungeon Masters — theme system. Three modes via [data-theme] on : light (default), dark, terminal. Brand palette: navy / brass gold / oxblood / parchment. =========================================================================== */ :root, [data-theme="light"] { --sdm-navy: #0b2a4a; --sdm-gold: #b8893b; --sdm-gold-soft: #c8a24b; --sdm-oxblood: #6e1a2b; --sdm-parchment: #f4ecd8; --bg: #fbf8f0; --bg-elevated: #ffffff; --bg-muted: #f1ead6; --text: #24303c; --text-muted: #5d6b78; --heading: var(--sdm-navy); --border: #e0d5b8; --brand: var(--sdm-navy); --brand-contrast:#ffffff; --accent: var(--sdm-gold); --danger: var(--sdm-oxblood); --link: #1d5a8a; --card-shadow: 0 1px 3px rgba(11, 42, 74, .08), 0 4px 16px rgba(11, 42, 74, .06); --radius: .6rem; --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --font-head: Georgia, "Times New Roman", serif; --font-mono: "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace; } [data-theme="dark"] { --bg: #0c1722; --bg-elevated: #122236; --bg-muted: #16293d; --text: #dbe4ee; --text-muted: #93a4b6; --heading: #e8c879; --border: #21344a; --brand: #14365a; --brand-contrast:#f4ecd8; --accent: #d2a44c; --danger: #c5566b; --link: #7bb6e6; --card-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3); } /* Classic DEC VT100 terminal mode: phosphor green on near-black, monospace. */ [data-theme="terminal"] { --bg: #020a02; --bg-elevated: #061306; --bg-muted: #0a1c0a; --text: #33ff66; --text-muted: #1faa45; --heading: #5cff8a; --border: #1c7a38; --brand: #0a1c0a; --brand-contrast:#33ff66; --accent: #33ff66; --danger: #ff5f5f; --link: #74ffa0; --card-shadow: 0 0 0 1px rgba(51, 255, 102, .25), 0 0 14px rgba(51, 255, 102, .12); --radius: 0; --font-body: var(--font-mono); --font-head: var(--font-mono); } /* Respect OS dark preference before the user picks a theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0c1722; --bg-elevated: #122236; --bg-muted: #16293d; --text: #dbe4ee; --text-muted: #93a4b6; --heading: #e8c879; --border: #21344a; --brand: #14365a; --brand-contrast: #f4ecd8; --accent: #d2a44c; --danger: #c5566b; --link: #7bb6e6; } }