/* ────────────────────────────────────────────────────────────────────────── SlatePhone theme tokens — shared by the public pages and the /admin area. Dark is the brand default. Light is a full alternate palette for readability. The active theme is set as data-theme on by theme.js before first paint; the media query below is the no-JS fallback. MAINTENANCE: the light values appear twice — in the [data-theme="light"] block and again in the prefers-color-scheme fallback. Change both. ────────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { --bg: #1e2530; --surface: #252d38; --surface2: #2c3542; --border: #384150; --border-light: #475569; --text: #e8ecf1; --text-dim: #a9b6c6; --text-muted: #7d8b9d; --accent: #5b9bd5; --accent-dim: rgba(91, 155, 213, 0.12); --on-accent: #16202c; --nav-bg: rgba(30, 37, 48, 0.85); --error: #f87171; --error-bg: rgba(248, 113, 113, 0.10); --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.10); --overlay: rgba(0, 0, 0, 0.65); color-scheme: dark; } :root[data-theme="light"] { --bg: #f7f8fa; --surface: #ffffff; --surface2: #eef1f6; --border: #d5dce6; --border-light: #b3bfcf; --text: #16202c; --text-dim: #495767; --text-muted: #5c6a80; --accent: #2a6bab; --accent-dim: rgba(42, 107, 171, 0.10); --on-accent: #ffffff; --nav-bg: rgba(247, 248, 250, 0.88); --error: #c62b2b; --error-bg: rgba(198, 43, 43, 0.07); --success: #15803d; --success-bg: rgba(21, 128, 61, 0.07); --overlay: rgba(22, 32, 44, 0.45); color-scheme: light; } /* No-JS fallback: honor the OS preference when no explicit choice is set. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f7f8fa; --surface: #ffffff; --surface2: #eef1f6; --border: #d5dce6; --border-light: #b3bfcf; --text: #16202c; --text-dim: #495767; --text-muted: #5c6a80; --accent: #2a6bab; --accent-dim: rgba(42, 107, 171, 0.10); --on-accent: #ffffff; --nav-bg: rgba(247, 248, 250, 0.88); --error: #c62b2b; --error-bg: rgba(198, 43, 43, 0.07); --success: #15803d; --success-bg: rgba(21, 128, 61, 0.07); --overlay: rgba(22, 32, 44, 0.45); color-scheme: light; } } /* ── Theme toggle button ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border-light); border-radius: 0; color: var(--text-dim); cursor: pointer; flex-shrink: 0; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--text); border-color: var(--text-dim); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 15px; height: 15px; display: block; } /* Show the icon for the theme you'd switch *to*. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme]) .theme-toggle .icon-moon { display: none; } }