/* ============================================================================ Per-user BACKGROUND presets (portal-wide). Layers on top of the light/dark system: a preset only shifts the canvas/surface family (never the ink tokens), so text contrast stays safe. Applied via data-bg on ; persisted per mode (localStorage portal-bg-light / portal-bg-dark). Chosen from the sidebar palette popover. Default keys (cool / navy) have no rule → base tokens apply. Higher specificity than dark_mode.css's single-attr override, so dark presets win in dark mode. ============================================================================ */ /* ---- Light-mode background presets (surfaces stay light) ---- */ html:not([data-theme="dark"])[data-bg="warm"] { --m-bg:#faf6f0; --m-surface:#fffdf9; --m-surface-2:#f6efe6; --m-border:#ece3d6; --m-border-strong:#ddd0bd; } html:not([data-theme="dark"])[data-bg="gray"] { --m-bg:#eceef1; --m-surface:#ffffff; --m-surface-2:#f3f4f6; --m-border:#e2e5ea; --m-border-strong:#d3d7de; } html:not([data-theme="dark"])[data-bg="paper"] { --m-bg:#ffffff; --m-surface:#ffffff; --m-surface-2:#f5f6f8; --m-border:#e6e9ee; --m-border-strong:#d6dbe3; } /* ---- Dark-mode background presets (surfaces stay dark) ---- */ html[data-theme="dark"][data-bg="midnight"] { --m-bg:#0a0e14; --m-surface:#12161d; --m-surface-2:#0e1319; --m-border:#1e2630; --m-border-strong:#2a3441; } html[data-theme="dark"][data-bg="slate"] { --m-bg:#111827; --m-surface:#1b2536; --m-surface-2:#172032; --m-border:#2a3546; --m-border-strong:#374357; } html[data-theme="dark"][data-bg="espresso"] { --m-bg:#17130f; --m-surface:#221c16; --m-surface-2:#1b1611; --m-border:#33291f; --m-border-strong:#453726; } /* ---- Inline swatches (inside gear-menu dropdown) ---- */ .sb-palette-cap { font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--m-ink-2); margin-bottom:8px; } .sb-swatch-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .sb-swatch { height:34px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0; outline:1px solid var(--m-border); position:relative; } .sb-swatch[data-active="1"] { border-color:var(--m-primary); } /* Which swatch row shows depends on the active mode */ .sb-swatch-grid.for-light { display:grid; } .sb-swatch-grid.for-dark { display:none; } html[data-theme="dark"] .sb-swatch-grid.for-light { display:none; } html[data-theme="dark"] .sb-swatch-grid.for-dark { display:grid; }