/* ============================================================ UnilogIQ - Theme layer (R-120 dark mode) Loads LAST, after tokens.css / app.css / admin.css / redesign.css / home.css / login.css. This is the single switch that themes the whole app: light and dark are two value sets for the SAME semantic tokens, selected by data-theme on the document root. Architecture (see execution/tasks/R-120-dark-mode-scoping.md): - Tier 1 primitives (brand ramps in tokens.css) stay fixed. - Tier 2 semantic tokens are the contract components reference. The canonical Tier 2 set is the --rd-* family (redesign.css), with --ink-* / --border-* / --fg-* / --bg-* aliasing onto it. - Dark mode overrides the SOURCE tokens (the --rd-* set, the tokens.css --fg-*/--bg-* shortcuts, and the handful of brand primitives used directly in component inline styles). Everything that references a token follows automatically, including screens not yet written. No new palette is invented here: the dark values are derived from the Unilog brand ramps (blue/yellow/neutral) and the existing .on-dark brand sections. Brand-dark islands (.on-dark hero, login gradient, generated branded documents) intentionally stay dark/light regardless of theme and are handled at the end. ============================================================ */ /* ------------------------------------------------------------ (1) Fill tokens that were referenced but never defined. These rendered from inline fallbacks before, so several text/surface uses were either invalid (inheriting) or pinned to a literal that could never theme. Aliasing them onto the canonical --rd-* ramp keeps light mode visually correct (and slightly more consistent) and makes every one of these references theme in dark for free. ------------------------------------------------------------ */ :root { --ink-1: var(--rd-ink); /* primary text (was undefined -> #1a1a1a fallback) */ --line: var(--rd-line); /* hairline (was undefined -> #eef1f4-ish fallback) */ --bg: var(--rd-canvas); /* app/chat frame bg (was undefined -> #f6f7f9 fallback, pinned light) */ --surface-1: var(--rd-surface); /* card surface (was undefined -> #fff fallback) */ --surface-2: var(--rd-sunken); /* nested strip / well (was -> #eef1f4 fallback) */ --surface-3: var(--rd-sunken); /* chip / hover fill (was -> #eef0f3 fallback) */ /* Sticky header glass: a translucent surface over scrolling content. Themed so the top bar is dark in dark mode (was a hardcoded rgba white). */ --header-glass: rgba(255, 255, 255, 0.92); /* ---- New Tier 2 semantic names (scoping Section 1.2), aliased onto the canonical ramp so they theme with everything else. New screens should prefer THESE names. ---- */ --surface-sunken: var(--rd-sunken); --surface: var(--rd-canvas); --surface-raised: var(--rd-surface); --surface-overlay: var(--rd-surface); --surface-overlay-2: var(--rd-surface-2); --text-primary: var(--rd-ink); --text-secondary: var(--rd-ink-2); --text-muted: var(--rd-ink-3); --text-inverse: #ffffff; --action: var(--blue); --action-hover: var(--blue-medium); --action-active: var(--blue-semi-dark); --action-weak: rgba(50, 137, 231, 0.10); --text-link: var(--blue); --accent-uniiq: #6A3FE2; --status-success: var(--success); --status-warning: var(--warning); --status-danger: var(--danger); --status-info: var(--blue); /* Aliases for a few tokens referenced but never defined (rendered from fallbacks, so they could not theme). Pointed at the canonical ramp. */ --text: var(--rd-ink); --border: var(--rd-line); --brand: var(--blue); --accent: var(--blue); --rd-card: var(--rd-surface); --rd-ink-1: var(--rd-ink); --good: var(--success); --warn: var(--warning); --amber: var(--warning); --gold: var(--yellow); /* Status-chip tint backgrounds (light tint + colored text). */ --danger-bg: #FDECEC; --warning-bg: #FEF3DA; --success-bg: #EAFAF0; /* Form controls + feedback surfaces */ --input-bg: var(--rd-surface); --input-border: var(--rd-line-strong); --input-text: var(--rd-ink); --input-placeholder: var(--rd-ink-3); --scrim: rgba(13, 38, 68, 0.40); --focus-ring: rgba(50, 137, 231, 0.45); } /* A smooth (reduced-motion-respecting) cross-fade when the theme flips, so toggling reads as a settle rather than a hard cut. Scoped to the common container/text properties to avoid janky transitions on transforms or layout. */ @media (prefers-reduced-motion: no-preference) { :root[data-theme] body, :root[data-theme] .rd-card, :root[data-theme] .rd-statline, :root[data-theme] .admin, :root[data-theme] .admin-main, :root[data-theme] input, :root[data-theme] textarea, :root[data-theme] select { transition: background-color 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease), color 220ms var(--ease-out, ease); } } /* ============================================================ (2) DARK THEME - the designed value set. Overriding the source tokens cascades to every alias and every component that references a token. ============================================================ */ :root[data-theme="dark"] { /* ---- Surfaces: dark blue-grays (not pure black), with an elevation scale because shadows do not read on dark, so raised gets lighter. ---- */ --rd-canvas: #0F1825; /* app / page background */ --rd-surface: #16202F; /* cards, panels (the old white box) */ --rd-surface-2: #1C2738; /* nested strips, table headers */ --rd-sunken: #0B121C; /* wells, insets, track backgrounds */ --rd-tint: #17293D; /* active / hover row wash (dark blue) */ /* ---- Hairlines: light, slightly stronger than light mode since they do the elevation work shadows cannot. ---- */ --rd-line: rgba(255, 255, 255, 0.10); --rd-line-soft: rgba(255, 255, 255, 0.06); --rd-line-strong: rgba(255, 255, 255, 0.18); /* ---- Ink ramp (text): WCAG AA on every surface above. ---- */ --rd-ink: #E8EDF3; /* ~14:1 on --rd-canvas */ --rd-ink-2: #AEBCCD; /* ~8:1 */ --rd-ink-3: #8C9AAE; /* ~5:1, reserve for >=13px meta */ --rd-ink-on-tint: #BBD8F7; /* ---- Elevation: real shadows on dark + a stronger pop for overlays. ---- */ --rd-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.45); --rd-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.60); /* ---- tokens.css semantic shortcuts (still referenced directly). ---- */ --fg-primary: #E8EDF3; --fg-secondary: #AEBCCD; --fg-muted: #8C9AAE; --fg-inverse: #0A111C; --bg-page: #0F1825; --bg-subtle: #0B121C; --bg-muted: #16202F; /* ---- Brand primitives used DIRECTLY in component inline styles. These are tuned for dark (lighter/desaturated) so they stay recognizably Unilog without vibrating on a dark canvas. ---- */ --blue: #5AA2F0; /* the action color (used ~195x directly) */ --blue-medium: #7DB6F4; --blue-semi-light: #6FAEEF; --blue-semi-dark: #7FB4F2; /* light-mode dark-blue accent -> lightened */ --blue-light: #34507A; /* was a pale wash; becomes a mid-blue line/fill */ --blue-ultra-light:#14223A; /* was #F2F6FA wash -> dark blue tint */ /* Status: lightened toward tints so red/green stay legible on dark and keep their semantic meaning. */ --danger: #FF5C6E; --success: #2ED48A; --warning: #F7BE3F; --yellow-semi-dark:#F7BE3F; /* --yellow (#FBC756) already reads well on dark; left as-is. */ /* Neutral ramp: the LIGHT end is used as backgrounds/fills, so it must go dark. (The dark end of the ramp, used as text, is migrated to ink tokens by the component sweep.) */ --gray-50: #0F1825; --gray-100: #1B2636; --gray-200: #243247; --gray-300: #2E3E56; --neutral-ultra-light: #1B2636; --neutral-light: #243247; /* New Tier 2 names: re-point the few that do not simply alias --rd-*. */ --surface-overlay: #1C2738; --surface-overlay-2: #243247; --action-weak: rgba(90, 162, 240, 0.16); --text-link: #7DB6F4; --accent-uniiq: #9B82F2; /* lightened for legibility on dark */ --input-bg: #0B121C; --input-border: rgba(255, 255, 255, 0.18); --scrim: rgba(0, 0, 0, 0.60); --focus-ring: rgba(125, 182, 244, 0.55); --header-glass: rgba(16, 24, 38, 0.85); /* dark sticky header */ /* Status-chip tints: translucent on dark so a colored pill reads on the dark canvas instead of a light tint block. */ --danger-bg: rgba(255, 92, 110, 0.16); --warning-bg: rgba(247, 190, 63, 0.16); --success-bg: rgba(46, 212, 138, 0.16); /* Shadows from tokens.css (navy-tinted) become true black on dark. */ --shadow-xs: none; --shadow-s: 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-m: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-l: 0 20px 40px rgba(0, 0, 0, 0.55); --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.65); /* ---- Direct dark values for the :root alias tokens (defined above as var(--rd-*)). Surfaces like the Cost tab and Preferences reference these aliases with a LIGHT inline fallback, e.g. var(--surface-1, #fafbfc); if the nested var() indirection does not resolve to the dark value at runtime, the surface falls back to its light literal and the page reads light in dark mode. Redeclaring them here with concrete dark values removes that risk entirely (direct values in this block are known to apply). ---- */ --ink-1: #E8EDF3; /* --ink / --ink-2 / --ink-3 alias --rd-ink* (redesign.css). Pin them dark too, so text using var(--ink-2, #444) etc. (e.g. the recents list) is legible instead of falling back to a dark literal. Recents get a touch lighter. */ --ink: #E8EDF3; --ink-2: #B9C6D6; --ink-3: #93A1B5; --line: rgba(255, 255, 255, 0.10); --bg: #0F1825; --surface-1: #16202F; --surface-2: #0B121C; --surface-3: #0B121C; --surface-sunken: #0B121C; --surface: #0F1825; --surface-raised: #16202F; --text-primary: #E8EDF3; --text-secondary: #AEBCCD; --text-muted: #8C9AAE; --input-text: #E8EDF3; --input-placeholder: #8C9AAE; --action: #5AA2F0; --action-hover: #7DB6F4; --action-active: #4892EA; --status-success: #2ED48A; --status-warning: #F7BE3F; --status-danger: #FF5C6E; --status-info: #5AA2F0; --text: #E8EDF3; --border: rgba(255, 255, 255, 0.10); --brand: #5AA2F0; --accent: #5AA2F0; --rd-card: #16202F; --rd-ink-1: #E8EDF3; --good: #2ED48A; --warn: #F7BE3F; --amber: #F7BE3F; --gold: #FBC756; color-scheme: dark; /* native form controls, scrollbars, etc. */ } /* ============================================================ (3) DARK - surface-specific fixes the token swap cannot reach. ============================================================ */ /* Form controls: native styling looks wrong on dark; pin to tokens. */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--input-placeholder); } /* EXCEPTION: the composer text fields are transparent so the tinted, blue composer box shows through (the rule above would otherwise paint them the near-black --input-bg, which read as a "black box" inside the blue composer). Higher specificity than the generic input rule so it wins. */ :root[data-theme="dark"] .ask-box input.ph, :root[data-theme="dark"] .ask-box input, :root[data-theme="dark"] .chat-input-box textarea { background: transparent; border: none; } /* Chat empty state: the suggestion cards sit at --rd-surface, which on dark is close to the canvas, so they read flat. Lift them onto the raised surface with a clearer hairline and primary-weight text, and give the greeting room to breathe. (Light mode untouched.) */ :root[data-theme="dark"] .chat-suggest { background: var(--rd-surface-2); border-color: var(--rd-line-strong); color: var(--rd-ink-2); } :root[data-theme="dark"] .chat-suggest:hover { border-color: var(--blue); background: var(--rd-tint); color: var(--rd-ink); } :root[data-theme="dark"] .chat-empty h1 { color: var(--rd-ink); } :root[data-theme="dark"] .chat-empty p { color: var(--rd-ink-2); } /* Composer input fields read BLUE in dark, not black. The input box gets a clear blue tint (like the old hero input) with the always-visible blue border (border set in ai-shared.jsx / home.css), so it is a blue field, not a dark slab. Covers the chat composer AND the standard home composer. */ :root[data-theme="dark"] .chat-input-box { background: rgba(90, 162, 240, 0.18); } :root[data-theme="dark"] .chat-input-box:focus-within { background: rgba(90, 162, 240, 0.24); } /* Home composer: bluer card + blue input field (was rendering near-black). */ :root[data-theme="dark"] .home-brief-ask .ask:not(.ask-slim) { background: rgba(50, 137, 231, 0.14); border-color: rgba(90, 162, 240, 0.40); } :root[data-theme="dark"] .home-brief-ask .ask:not(.ask-slim) .ask-box { background: rgba(90, 162, 240, 0.18); } :root[data-theme="dark"] .home-brief-ask .ask:not(.ask-slim) .ask-box:focus-within { background: rgba(90, 162, 240, 0.24); } /* Belt-and-suspenders: pin the full-screen chat/page shells to the dark canvas directly, so the main column can never render light (it previously did when the var(--bg) indirection resolved to its light fallback). High enough specificity to beat the components' own injected `.chat-*` background rules. */ :root[data-theme="dark"] .chat-frame, :root[data-theme="dark"] .chat-shell, :root[data-theme="dark"] .chat-main, :root[data-theme="dark"] .chat-scroll { background: var(--rd-canvas); } /* Text selection + scrollbars read with the brand on dark. */ :root[data-theme="dark"] ::selection { background: rgba(90, 162, 240, 0.32); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } /* Code blocks (highlight.js). The app self-hosts highlight.js with no theme CSS, so code rendered light by default. Provide a calm dark scheme keyed to the brand for dark mode (D-DM-3). Light mode is untouched. */ :root[data-theme="dark"] pre, :root[data-theme="dark"] pre code, :root[data-theme="dark"] .hljs { background: #0B121C; color: #D6DEEA; } :root[data-theme="dark"] .hljs-comment, :root[data-theme="dark"] .hljs-quote { color: #7E8B9C; font-style: italic; } :root[data-theme="dark"] .hljs-keyword, :root[data-theme="dark"] .hljs-selector-tag, :root[data-theme="dark"] .hljs-literal, :root[data-theme="dark"] .hljs-section, :root[data-theme="dark"] .hljs-link { color: #7DB6F4; } :root[data-theme="dark"] .hljs-string, :root[data-theme="dark"] .hljs-title, :root[data-theme="dark"] .hljs-name, :root[data-theme="dark"] .hljs-attr, :root[data-theme="dark"] .hljs-addition { color: #2ED48A; } :root[data-theme="dark"] .hljs-number, :root[data-theme="dark"] .hljs-symbol, :root[data-theme="dark"] .hljs-meta, :root[data-theme="dark"] .hljs-built_in, :root[data-theme="dark"] .hljs-class .hljs-title { color: #F7BE3F; } :root[data-theme="dark"] .hljs-deletion, :root[data-theme="dark"] .hljs-variable, :root[data-theme="dark"] .hljs-template-variable { color: #FF8A97; } /* ============================================================ (4) Brand-dark islands and light islands (deliberate opt-outs). - .on-dark sections (hero, tagline) are ALREADY dark by brand intent; they must not be re-themed in either mode. They reference brand primitives that we do not lighten (--blue-dark / --blue-ultra-dark), so they hold as-is. Nothing to do here beyond NOT touching them. - Generated, externally-shared branded content (documents, one-pagers, posters) must stay LIGHT even in dark mode, since they are emailed and printed (D-DM-2). Any such surface marks itself data-theme="light", which re-asserts the light value set locally regardless of app theme. The light value set is simply the :root defaults, so a nested [data-theme="light"] island restores them. ============================ */ :root[data-theme="dark"] [data-theme="light"] { --rd-canvas: #F6F8FB; --rd-surface: #FFFFFF; --rd-surface-2: #FBFCFE; --rd-sunken: #EEF2F7; --rd-tint: #F2F7FD; --rd-line: rgba(13, 38, 68, 0.08); --rd-line-soft: rgba(13, 38, 68, 0.05); --rd-line-strong: rgba(13, 38, 68, 0.14); --rd-ink: #14233A; --rd-ink-2: #51627A; --rd-ink-3: #8595AC; --fg-primary: #14233A; --fg-secondary: #51627A; --fg-muted: #8595AC; --bg-page: #FFFFFF; --bg-subtle: #FAFAFA; --bg-muted: #F2F2F2; --blue: #3289E7; --danger: #D80027; --success: #18B26B; --gray-50: #FAFAFA; --gray-100: #F2F2F2; color-scheme: light; }