/* Dark-mode overrides for the warm editorial palette. Applies whenever is set. Each page keeps its own light defaults via inline :root — this file just re-declares the same variables at higher specificity so the whole design goes dark. */ html[data-theme="dark"] { --bg: #14100c; /* warm near-black */ --paper: #1e1710; /* soft dark warm — replaces cream cards */ --sidebar: #1e1710; --ink: #f6f1e7; /* cream, was dark brown */ --sub: #a89a80; /* muted warm tan */ --line: #2c231b; --line-warm: #302517; --field: #1e1710; --accent: #d97046; /* slightly warmer coral so it pops on dark */ } html[data-theme="dark"] body { background: #14100c; } /* Fix a few hard-coded colors used in inline styles across the mockups. These selectors let common places (chat bubbles, chip menus, etc.) invert naturally without editing each page. */ html[data-theme="dark"] .user-menu, html[data-theme="dark"] .list, html[data-theme="dark"] .compose { background: var(--paper); } html[data-theme="dark"] .compose { border-color: var(--line-warm); } html[data-theme="dark"] .chatbox, html[data-theme="dark"] .comment-add { background: var(--paper); border-color: var(--line-warm); } html[data-theme="dark"] .msg.ai, html[data-theme="dark"] .typing, html[data-theme="dark"] .bubble.them { background: var(--paper); border-color: var(--line-warm); color: var(--ink); } html[data-theme="dark"] .avatar-sm, html[data-theme="dark"] .avatar-xs, html[data-theme="dark"] .bell, html[data-theme="dark"] .user-chip .avatar, html[data-theme="dark"] .avatar { /* keep initials-based ink avatars readable on dark */ color: #f6f1e7; } html[data-theme="dark"] .bell:hover { border-color: var(--ink); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--ink); color-scheme: dark; } /* Google Sign-In button — force its container background */ html[data-theme="dark"] .google-wrap > div { background: transparent; }