/* =================================================================== Theme tokens — single source of truth for every surface/text/border colour used across the login and chat screens. :root → DARK theme (the original look, unchanged) :root[data-theme="clear"] → CLEAR (light) theme — the new default The default theme is applied by a tiny inline script in that sets document.documentElement.dataset.theme before the page paints (defaults to "clear"). If that script never runs, :root falls back to the dark palette, which is always readable. Accent and semantic *foreground* hues (blue / green / red / amber) are intentionally identical in both themes; only their dark background tints get a light counterpart so nothing turns into a dark patch on the light theme. =================================================================== */ :root { /* Surfaces */ --bg: #0f1115; /* page background */ --surface: #12161f; /* panels, cards, modals */ --surface-2: #161a24; /* secondary surface, hover, list rows */ --surface-3: #1c2230; /* tertiary hover (doc/survey rows) */ --surface-accent: #1a2540; /* selected / blue-tinted surface */ --surface-accent-hover: #1e2d50; --surface-loaded: #142233; /* "loaded" survey row highlight */ --input-bg: #0c0e12; /* text inputs, selects */ --code-bg: #1a1f2a; /* inline code / pre */ --login-grad: #12181f; /* login background gradient end stop */ --select-bg: #0f1218; /* chart toolbar select */ --logo-tag: #9aa3b8; /* login tagline */ /* Borders */ --border: #2a334d; /* primary border */ --border-subtle: #1f2330; /* subtle divider */ --border-faint: #1a1e28; /* faint row divider */ --border-strong: #3a4a6d; /* hover border */ --border-accent: #2a4a87; /* org badge border */ /* Text */ --text: #e8e8e8; /* primary body text */ --text-2: #cbd3e3; /* secondary text */ --text-3: #8a92a3; /* dim text */ --text-muted: #6f7891; /* faint / meta text */ --text-faint: #4a5270; /* placeholders */ --text-user: #cfe1ff; /* user message bubble text */ --heading: #ffffff; /* headings, titles, strong */ --on-accent: #ffffff; /* text on saturated buttons/pills */ /* Accent + brand (shared by both themes) */ --accent: #29ADDC; --accent-2: #45b4e1; --link-hover: #5fc8ec; /* Login info callout */ --info-bg: #152535; --info-border: #1d3850; --info-text: #a8d4ec; /* Semantic background tints (dark) */ --danger-bg: #2a1418; --danger-bg-faint: #1a1014; --danger-border: #5a2028; --danger-text: #f2b4c0; --err-bg: #3b1414; --ok-bg: #0d3320; --warn-bg: #3b2a0a; --pill-new-bg: #1a3a2a; --pill-upd-bg: #1a2a3a; --pill-orph-bg: #3a2a1a; --pill-neworg-bg: #2a1a3a; /* Semantic foreground colours that sit on the tints above */ --code-text: #e6c98a; --ok-text: #22c55e; --err-text: #ef4444; --warn-text: #f59e0b; --pill-new-text: #86efac; --pill-upd-text: #29ADDC; --pill-orph-text: #fdba74; --pill-neworg-text: #c084fc; } :root[data-theme="clear"] { /* Surfaces */ --bg: #f8f8f8; --surface: #ffffff; --surface-2: #eef1f5; --surface-3: #e4e8ee; --surface-accent: #e4eefb; --surface-accent-hover: #d4e4f7; --surface-loaded: #d8e8fb; --input-bg: #ffffff; --code-bg: #eef0f4; --login-grad: #ffffff; --select-bg: #ffffff; --logo-tag: #6c7480; /* Borders */ --border: #d2d7e0; --border-subtle: #e5e8ec; --border-faint: #e9ebef; --border-strong: #c1c7d2; --border-accent: #aecdf0; /* Text */ --text: #23262e; --text-2: #3c4350; --text-3: #5b6470; --text-muted: #6c7480; --text-faint: #9aa1ad; --text-user: #21508a; --heading: #15171c; --on-accent: #ffffff; /* still white — sits on coloured buttons */ /* Accent + brand — deepened for legible contrast on white surfaces. (The dark theme keeps the exact brand blue #29ADDC / #45b4e1.) */ --accent: #1690bf; --accent-2: #1583b0; --link-hover: #0f6e96; /* Login info callout */ --info-bg: #e7f1fb; --info-border: #bfddf2; --info-text: #1f5e86; /* Semantic background tints (light) */ --danger-bg: #fdecef; --danger-bg-faint: #fbeaea; --danger-border: #f5c2cb; --danger-text: #9b2333; --err-bg: #fdecec; --ok-bg: #e3f7ec; --warn-bg: #fdf0d6; --pill-new-bg: #dff5e8; --pill-upd-bg: #e2eef9; --pill-orph-bg: #fbeede; --pill-neworg-bg: #f1e6fb; /* Semantic foreground colours that sit on the tints above */ --code-text: #9b5d00; --ok-text: #15803d; --err-text: #c0303a; --warn-text: #b45309; --pill-new-text: #15803d; --pill-upd-text: #1a6c8f; --pill-orph-text: #9a5b00; --pill-neworg-text: #7e22ce; }