/* Semantic colour tokens + dark theme (spec 0265, BP-007, note n-0168). * * THE LIGHT VALUE OF EVERY TOKEN EQUALS THE ORIGINAL HARDCODED COLOUR IT * REPLACED, so converting a stylesheet to use these tokens is a provable no-op * in light mode; only the `[data-theme="dark"]` block changes the rendered * colour. This is why the recolour is safe to roll out file by file (BP-007's * phased plan): light stays byte-identical, dark is layered on top. * * Applied by theme-init.js (sets data-theme on before first paint) and * the Appearance control (theme.js). `data-theme="dark"` is set explicitly; * `system` resolves to light/dark from the OS via matchMedia at runtime, so the * dark block keys off the attribute, not a media query. * * Rules: no importance overrides, no inline styles, semantic names. Add a token here * (light = the exact existing hex, dark = the chosen dark value) before using it * in a component stylesheet. Long-tail one-off tints not yet tokenised stay as * literals and are converted in follow-up passes. */ :root { color-scheme: light; /* Layout (non-colour; same in both themes) — the max width of the chat thread column (n-0376). Registered here because every var() used in a core stylesheet must be defined in this token registry. */ --chat-thread-max-width: 860px; /* Surfaces / neutrals */ --bg: #f5f5f5; --bg-admin: #f6f6f8; /* admin pages' slightly cooler canvas (n-0983) */ --surface: #ffffff; --on-accent: #ffffff; /* white text on a coloured element; stays white */ --surface-2: #f9fafb; --surface-3: #f3f4f6; --chat-main-glow: #eff4ff; /* edge glow of the chat main radial gradient */ --login-google-bg: #eff3f9; /* light-blue Google sign-in pill (n-0284) */ --login-google-bg-hover: #e3e9f3; /* its hover/active state */ --border: #e5e7eb; --border-strong: #d1d5db; /* Text */ --text: #1a1a1a; --ink: #111827; --ink-2: #1f2937; --text-secondary: #374151; --text-muted-2: #4b5563; --text-muted: #6b7280; --text-faint: #9ca3af; /* An even quieter gray than --text-faint, for de-emphasized affordances that should recede below placeholder text (n-0657). */ --text-faint-2: #c4c9d2; /* Accent (blue) */ --accent: #2563eb; --accent-strong: #1d4ed8; --accent-deep: #1e40af; --accent-tint: #eff6ff; --accent-tint-2: #dbeafe; --accent-light: #93c5fd; /* Indigo */ --indigo: #4f46e5; --indigo-strong: #4338ca; --indigo-deep: #3730a3; --indigo-tint: #e0e7ff; /* Status: danger */ --danger: #dc2626; --danger-strong: #b91c1c; --danger-deep: #991b1b; --danger-darkest: #7f1d1d; --danger-tint: #fef2f2; --danger-tint-2: #fee2e2; --danger-tint-3: #fecaca; --danger-light: #fca5a5; /* Status: success */ --success: #16a34a; --success-strong: #047857; --success-deep: #166534; /* Diff line backgrounds (n-0531): added lines green, removed lines red. */ --diff-add-bg: #e6ffec; --diff-del-bg: #ffebe9; /* Status: warning */ --warn-deep: #92400e; --warn-tint: #fef3c7; /* Violet (impersonation) */ --violet: #7c3aed; /* Left-nav collection / folder group label (n-0589; recolored #1b62d1 per Michael's change of plans, same note thread). */ --nav-group-label: #1b62d1; /* Status tints — observability badges + dev-notes states (n-0168, spec 0272). Light values are the exact literals they replaced, so light mode is unchanged; only the dark block below recolours them. */ --amber-tint: #fffbeb; --amber-text: #b45309; --amber-border: #fde68a; --amber-border-strong: #fcd34d; --amber-bar: #f59e0b; --emerald-tint: #ecfdf5; --emerald-tint-2: #f0fdf4; --emerald-text: #065f46; --emerald-border: #a7f3d0; --emerald-bar: #10b981; --indigo-tint-2: #eef2ff; --indigo-border: #c7d2fe; --indigo-solid: #6366f1; --violet-tint: #f5f3ff; --fuchsia-tint: #fdf4ff; --fuchsia-text: #a21caf; --teal-tint: #ccfbf1; --teal-text: #0f766e; --neutral-tint: #fafafa; --slate-tint: #eef2f7; --red-bar: #ef4444; /* Shadows (n-0469): light values match the previously hardcoded literals; the dark block swaps the light/blue glows for black-based depth so cards don't halo on dark surfaces. */ --shadow-card: 3px 5px 15px 0px #e6efff; --shadow-card-hover: 2px 2px 10px rgb(96 119 255 / 66%); --shadow-soft: 2px 2px 8px #a4bdf530; --shadow-input: 1px 3px 12px rgb(107 107 107 / 10%); --shadow-tile: 0 2px 8px rgba(37, 99, 235, 0.1); --shadow-tile-sm: 0 1px 4px rgba(37, 99, 235, 0.08); --resolved-ring: #dcfce7; /* Left-nav tree rows (n-0468): hover + selected backgrounds. */ --nav-hover-bg: #f3f6fc; --nav-active-bg: #eaf1ff; /* Current-location breadcrumb pills in the left nav (n-0740, round 6). */ --nav-path-bg: #f6f9fe; --nav-path-border: #eaf2ff; /* Accent-family hover border (was the hardcoded #bfdbfe). */ --accent-border: #bfdbfe; } [data-theme="dark"] { color-scheme: dark; /* Layout (non-colour; identical to light — the token-set parity guard requires both blocks to define the same names). */ --chat-thread-max-width: 860px; /* Surfaces / neutrals */ --bg: #141414; --bg-admin: #141414; /* dark keeps the app canvas (n-0983 is light-only) */ --surface: #1e1e1e; --on-accent: #ffffff; --surface-2: #242424; --surface-3: #2c2c2c; --chat-main-glow: #222b38; /* subtle dark-blue edge glow (was a light band) */ --login-google-bg: #222b38; /* dark-mode Google sign-in pill (n-0284) */ --login-google-bg-hover: #2a3545; /* its hover/active state */ --border: #3a3a3a; --border-strong: #4a4a4a; /* Text */ --text: #ededed; --ink: #ededed; --ink-2: #e2e2e2; --text-secondary: #cdcdcd; --text-muted-2: #b4b4b4; --text-muted: #9a9a9a; --text-faint: #888888; /* Dark-mode counterpart: dimmer (further toward the background) than --text-faint so the affordance still recedes below placeholder text (n-0657). */ --text-faint-2: #6f6f6f; /* Accent (blue) */ --accent: #5b9bf5; --accent-strong: #4f86ef; --accent-deep: #3f74e0; --accent-tint: #182a3f; --accent-tint-2: #1e3552; --accent-light: #5e94d4; /* Indigo */ --indigo: #8b84f0; --indigo-strong: #9c95f5; --indigo-deep: #c3bff7; --indigo-tint: #2a2a47; /* Status: danger */ --danger: #f06464; --danger-strong: #e25a5a; --danger-deep: #f0a0a0; --danger-darkest: #f0b4b4; --danger-tint: #2a1a1a; --danger-tint-2: #3a2020; --danger-tint-3: #4a2828; --danger-light: #c87474; /* Status: success */ --success: #3cba6a; --success-strong: #3cba8e; --success-deep: #80d49e; /* Diff line backgrounds (n-0531): muted so text stays legible in dark mode. */ --diff-add-bg: #12341c; --diff-del-bg: #3f1d20; /* Status: warning */ --warn-deep: #e0a55f; --warn-tint: #38301a; /* Violet (impersonation) */ --violet: #9d6bf0; /* Left-nav collection / folder group label (n-0589; #1b62d1 per Michael's change of plans); the same blue reads well on the dark sidebar too. */ --nav-group-label: #1b62d1; /* Status tints (n-0168, spec 0272) */ --amber-tint: #2e2510; --amber-text: #e8b46b; --amber-border: #5a4a22; --amber-border-strong: #6e571f; --amber-bar: #d9922f; --emerald-tint: #122a20; --emerald-tint-2: #132a20; --emerald-text: #6fd6a6; --emerald-border: #2c5a44; --emerald-bar: #2fbe82; --indigo-tint-2: #20243c; --indigo-border: #3b4068; --indigo-solid: #7d7af2; --violet-tint: #241f3a; --fuchsia-tint: #2a1830; --fuchsia-text: #e07be0; --teal-tint: #123433; --teal-text: #5fd6c8; --neutral-tint: #242424; --slate-tint: #242424; --red-bar: #f06464; /* Shadows (n-0469): black-based depth instead of light glows. */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-card-hover: 0 2px 12px rgba(0, 0, 0, 0.7); --shadow-soft: 2px 2px 8px rgba(0, 0, 0, 0.35); --shadow-input: 1px 3px 12px rgba(0, 0, 0, 0.4); --shadow-tile: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-tile-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --resolved-ring: #1c3a29; /* Left-nav tree rows (n-0468) */ --nav-hover-bg: #242424; --nav-active-bg: #182a3f; /* Current-location breadcrumb pills in the left nav (n-0740, round 6) */ --nav-path-bg: #1c2636; --nav-path-border: #2a3b55; /* Accent-family hover border */ --accent-border: #1e3552; }