/* /public/css/app-theme.css Centralized theme + shared background. Loaded by index.html, daily-brief.html, settings-preview.html, and every /settings/*.html so the look is unified across the lightweight surfaces. Apps with their own visual identity (Scribble, Scope) opt out by simply not loading this file. Theme is selected via [data-theme="dark"|"light"] on , written by /js/appearance-apply.js before first paint. The "auto" value is resolved to dark/light by JS via prefers-color-scheme. User overrides for the background are read off two custom properties that the apply script sets on :root: --app-bg-image : url('...') | none (when user picks an image or solid) --app-bg-color : #hex (when user picks solid) When unset, body::before falls back to the file-level defaults below. */ /* DARK (default) -------------------------------------------------- */ :root, :root[data-theme="dark"] { --bg: #0a0a0a; --panel: rgba(10, 10, 10, .80); --panel-solid: #111111; --panel-hover: rgba(255, 255, 255, .04); --border: rgba(255, 255, 255, .08); --border-strong:rgba(255, 255, 255, .14); --text: #e8e4dc; --text-body: #d8d3c8; --text-soft: rgba(232, 228, 220, .82); --text-dim: rgba(232, 228, 220, .55); --accent: #e8e4dc; --accent-dim: rgba(232, 228, 220, .15); --danger: #ff4d6a; --warn: #ffaa2a; --success: #6acf73; --radius: 14px; --radius-sm: 10px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --bg-image: url('https://cdn.shopify.com/s/files/1/0973/4465/1539/files/TeamsBackground.png?v=1776378521'); } /* LIGHT ----------------------------------------------------------- */ :root[data-theme="light"] { --bg: #f4ecdb; --panel: rgba(255, 252, 244, .80); --panel-solid: #fdf8eb; --panel-hover: rgba(0, 0, 0, .04); --border: rgba(0, 0, 0, .08); --border-strong:rgba(0, 0, 0, .16); --text: #1a1a1a; --text-body: #2a2a2a; --text-soft: rgba(26, 26, 26, .78); --text-dim: rgba(26, 26, 26, .50); --accent: #1a1a1a; --accent-dim: rgba(26, 26, 26, .10); /* Light theme dims the photo bg by default so contrast stays readable. */ --bg-image: none; } html { background: var(--bg); } body { background: transparent; position: relative; color: var(--text); } /* The fixed bg layer respects user overrides: - --app-bg-image : "url('...')" or "none" (set by apply.js) - --app-bg-color : "#hex" (set by apply.js when solid) Falls back to the per-theme --bg-image when neither override is present. */ body::before { content: ""; position: fixed; inset: 0; background-color: var(--app-bg-color, transparent); background-image: var(--app-bg-image, var(--bg-image)); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; pointer-events: none; }