/* Single CSS entry for login.html — same reasoning as entry-main.css's header comment.
Matches login.html's original two tags, same order. */
/* Business OS — base tokens + theme overrides (Prompt 24.8's CSS split of style.css).
MUST load first — every other sheet inherits the --ds-* tokens from :root/[data-theme].
No @media (prefers-color-scheme) here by design — theme.js resolves 'system' to a
concrete data-theme value itself; this stays the one mechanism deciding colors. Also
carries the page-wide reset (box-sizing, [hidden], body, .layout) since those depend on
the tokens defined immediately above them. */
* { box-sizing: border-box; }
:root {
--surface-hover: #242938;
--border-strong: #3a3f52;
--danger-bg: #3a1e22;
--danger-text: #ff9a9a;
/* ---- Design System tokens (Business OS — Design System + Environment Intelligence
Redesign, V1). Forward-only: only new components (below) and Environment's rebuild
consume these — the rest of the app's ~400 existing hardcoded hex occurrences are
deliberately NOT retrofitted onto this scale (see docs/BUSINESS_OS.md's Design System
section for the scoping rationale). See /styleguide for a live token+component
showcase. ---- */
/* Background layers */
--ds-bg-page: #0f1115;
--ds-bg-card: #171a21;
--ds-bg-inset: #1d212b;
--ds-border: #262b36;
--ds-border-strong: #343b4a;
/* Sidebar shell (.primary-nav and friends — Commit 5, dark/light/system theme).
No existing --ds-* background/border token was a close semantic match for the
sidebar's own slightly-lighter-than-page chrome, so these are new rather than a
forced reuse of --ds-bg-card/--ds-border. */
--ds-nav-bg: #14161c;
--ds-nav-border: #23262f;
--ds-nav-active-bg: #23283a;
/* Text */
--ds-text-primary: #e8e8ec;
--ds-text-secondary: #aab0c0;
/* WCAG AA: measured against --ds-bg-card (5.47:1) and --ds-bg-page (5.93:1), because
.ds-kpi-sub / .ds-loading / .ds-empty render on the card, not the page. The previous
#6b7180 was 3.56:1 on the card — the whole secondary text tier failed AA in dark mode.
test/design-token-contrast.test.js holds this to 4.5:1; do not darken without re-running it. */
--ds-text-muted: #8b90a0;
/* Focus ring. Reuses --ds-info-text's hue rather than introducing a new accent, so focus
reads as the same "interactive blue" the rest of the system already uses. WCAG 2.4.11
wants a focus indicator distinguishable from its surroundings; #60a5fa is 3.4:1 against
--ds-bg-inset, the darkest ground any focusable control sits on. */
--ds-focus-ring: #60a5fa;
/* THE INTERACTIVE COLOUR — the one an inline link or an active tab is drawn in. Same hue as
--ds-focus-ring above and --ds-info-text below, deliberately: a system with one interactive
blue should say so once, and focus should look like the thing it is focusing.
ADDED BECAUSE IT WAS ALREADY BEING USED AND DID NOT EXIST. Three files referenced
var(--ds-accent) while nothing defined it anywhere in the repo. Two carried a fallback and
silently rendered that instead (builder.css's #58a6ff, accounting.css's currentColor); the
third, css/auditLog.css's `.audit-entity`, had NO fallback — so an unresolvable var() made
the declaration invalid at computed-value time, `color` fell back to inherited, and every
audit-log entity link rendered as plain body text with no underline. The only clickable
element in each row was indistinguishable from the text beside it (WCAG 1.4.1).
Contrast, computed against all three grounds rather than assumed, and held by
test/design-token-contrast.test.js from here on: 7.43:1 on --ds-bg-page, 6.85:1 on
--ds-bg-card, 6.33:1 on --ds-bg-inset. */
--ds-accent: #60a5fa;
/* The accent under a pointer. Deeper, not lighter: --ds-accent is already the bright end
of the ramp in dark, so a "brighter on hover" step has nowhere to go and reads as a
wash. Added with the builder's colour sweep, which had three separate literals doing
this by hand (#3a5ce0, #a9c6ff, #2c3350) and no shared answer. */
--ds-accent-hover: #3a5ce0;
/* Text ON a fill that does NOT invert between palettes — a fixed semantic red badge, an
overlay scrim. Distinct from --ds-btn-primary's use of --ds-bg-page, which is the
answer when the FILL itself inverts (see components.css's note there): if the ground
flips light-to-dark with the theme, the text has to flip with it, and if the ground is
fixed the text must NOT. Deliberately the same value in both palettes — a role that
stays put is a decision, not an oversight. */
--ds-text-on-fill: #ffffff;
/* The INK half of that pair. A fill light enough to need dark text needs a token for it too,
and until now there was none — which is why .ds-badge-force and .ds-badge-scope simply used
white on all 16 categorical fills and FAILED WCAG AA on 15 of them in dark, worst 1.86:1 on
the amber. Whether a fill takes ink or paper is decided per fill by measured contrast, not
by palette (see components.css's .ds-badge-force-* block); both values are fixed in both
palettes for the same reason --ds-text-on-fill is. */
--ds-ink-on-fill: #14161c;
/* The other half of that role: a fixed dark ground for a floating overlay that must read
the same in both palettes — the [data-tip] tooltip, an image scrim. A tooltip is not a
surface of the page, it is a label over it, so it does not take the page's palette.
Same value in both blocks, for the same deliberate reason as --ds-text-on-fill. */
--ds-scrim: #000000;
/* Driving-force accents (PESTTG) */
--ds-force-political: #ef4444;
--ds-force-economic: #22c55e;
--ds-force-societal: #f0b429;
--ds-force-technological: #3b82f6;
--ds-force-mega_trends: #a855f7;
--ds-force-globalisation: #14b8a6;
/* Idea scope accents (Ideas Hub Redesign — Intrapreneurship V1) — org_wide/new_venture
plus the 8 lib/businessOrgSlots.ts FUNCTION_SLOTS keys, same "one accent per enum
value" shape as --ds-force-* above. */
--ds-scope-org_wide: #6b7280;
--ds-scope-new_venture: #ec4899;
--ds-scope-supply_chain: #f0b429;
--ds-scope-operations: #3b82f6;
--ds-scope-marketing_sales: #22c55e;
--ds-scope-service_warranty: #14b8a6;
--ds-scope-infrastructure: #a855f7;
--ds-scope-human_resources: #ef4444;
--ds-scope-technology: #06b6d4;
--ds-scope-procurement: #f97316;
/* Semantic */
--ds-success-bg: #14301f;
--ds-success-text: #4ade80;
--ds-warning-bg: #3a2e12;
--ds-warning-text: #f0b429;
--ds-danger-bg: #3a1e22;
--ds-danger-text: #ff9a9a;
--ds-info-bg: #14243a;
--ds-info-text: #60a5fa;
--ds-neutral-bg: #262b36;
--ds-neutral-text: #aab0c0;
/* The hairline on a semantic fill. The bg/text pair above is the codebase's usual
callout shape (see components.css's .ds-badge-* block), but a BORDERED status strip
needs a third value, and builder.css's .build-status.* variants had been carrying it
as literals — which is exactly why that whole file had no light palette. Each sits
between its own -bg and -text so the edge reads without competing with the label. */
--ds-success-border: #1e4029;
--ds-warning-border: #4d3f1a;
--ds-danger-border: #5a2a30;
/* Impact scale (low -> very_high) */
--ds-impact-low: #6b7180;
--ds-impact-medium: #60a5fa;
--ds-impact-high: #f0b429;
--ds-impact-very_high: #ef4444;
/* Spacing scale */
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 24px;
--ds-space-6: 32px;
/* Radius scale */
--ds-radius-sm: 6px;
--ds-radius-md: 10px;
--ds-radius-lg: 14px;
/* ---- Type scale ------------------------------------------------------------------------
Nine steps, each with one job. A size that is not one of these is drift, and
test/type-scale.test.js fails on it rather than trusting the rule to be read.
--ds-font-glyph-xs 9px a symbol in a small fixed box: avatar initials, SVG chart labels
--ds-font-glyph-sm 10px a symbol in a fixed box: the info tip's "i", the nav caret
--ds-font-xs 11px THE FLOOR FOR TEXT — badges, chips, meta, timestamps
--ds-font-sm 12px labels, control text, table headers
--ds-font-md 13px body
--ds-font-lg 16px card and section titles
--ds-font-title 18px panel titles — the login card, a popover heading, a tile value
--ds-font-xl 22px a KPI value: the largest thing ON a card
--ds-font-2xl 28px a PAGE title: the only step that outranks a KPI value
THE GLYPH TIER IS A TOKEN, NOT A SENTENCE. Sub-11px sizes exist because a "9px" that is
one letter centred in a 20px circle is not small TEXT, it is a symbol scaled to its box —
but stated as prose that is a judgement call every reviewer re-litigates. As tokens it
becomes mechanical: sub-floor is legitimate iff it uses a glyph token, and the guard can
assert exactly that. THE TEST A READER CAN APPLY ALONE: a symbol occupying a fixed box, not
text a user reads as a line. Initials in an avatar, a caret, an "i", an axis label — glyph.
A tag, a business name, a section title — text, and it takes --ds-font-xs or larger.
WHY THIS DOES NOT FOLD INTO THE CHART EXCEPTION, since both look like carve-outs for
non-chrome content: that rule (docs/BUSINESS_OS.md, AUDIT.md AUD-24) exempts chart COLOUR
from the token system — it says stay OUT. This says the opposite: sub-floor sizes come INTO
the token set under a named tier. Opposite directions, so folding them would blur the one
thing each is for. SVG chart labels therefore take a glyph token for SIZE while their
strokes and fills stay literal under the Chart Exception, which is not an inconsistency:
size is chrome-like and bounded, palette is data.
HOW A STEP GETS ADDED, so the next drift has a procedure rather than a precedent:
1. Show the sites that need it. Two or more real, shipped sites that no existing step
serves — not one, and not a hypothetical.
2. Name the ROLE it fills, in one line, distinct from its neighbours' roles above.
3. Add it here, in size order, with that line.
4. Convert every site in step 1 in the same commit, so the step ships with its readers
(a token nothing reads is the SR-1 defect).
5. Update DESIGN.md's step count and role table.
--ds-font-title and --ds-font-2xl were both added this way: eleven titles at 15/18/20px had
no step between 16 and 22, and the Dashboard's page title could not outrank the KPI values
it labels because 22px was the ceiling (docs/ROADMAP.md's [Dashboard] entry). */
--ds-font-glyph-xs: 9px;
--ds-font-glyph-sm: 10px;
--ds-font-xs: 11px;
--ds-font-sm: 12px;
--ds-font-md: 13px;
--ds-font-lg: 16px;
--ds-font-title: 18px;
--ds-font-xl: 22px;
--ds-font-2xl: 28px;
/* Monospace family. ADDED BECAUSE IT WAS ALREADY BEING USED AND DID NOT EXIST — the same
defect --ds-accent was added to fix (see its comment above), found again by an audit and
fixed together with seven more of the same shape. css/content.css referenced
var(--ds-font-mono, monospace) in four places while nothing defined it anywhere in the
repo, so all four silently rendered the bare `monospace` fallback — the browser default,
not this stack — and css/builder.css and css/automationsCanvas.css each carried their own
hand-written copy of the family instead. The value is the stack builder.css already used
(the most complete of the three), so nothing changes visually where a stack was declared;
content.css's four sites gain the stack they were asking for.
test/design-token-defined.test.js is the permanent guard: it fails on any var(--ds-*)
reference this file does not define, with or without a fallback. A fallback does not make
an undefined token safe — it silently substitutes an off-system value, which is how six of
the eight went unnoticed; the two without one (css/media.css, css/messages.css) made the
whole declaration invalid at computed-value time and fell back to inherited colour. */
--ds-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* Z-index scale (P0-A — Z-Index Scale Consolidation). One ordered scale for the whole
app shell's stacking, replacing scattered literals (including several max-int hacks
that lived in the preview-iframe VE overlay scripts — see public/veZIndex.js, a
separate parallel scale since that iframe document never loads this stylesheet).
Each tier below lists every current consumer so the next addition has an obvious
home; --ds-z-messages is a deliberate reserved gap for the upcoming shell messages
overlay (must sit above all module chrome/popovers/drawers/modals, below toasts). */
--ds-z-inline-suggest: 10; /* .ds-mention-autocomplete, .ds-reference-search */
--ds-z-float-control: 20; /* .ds-info-tip::after, .ve-toolbar, .global-footer-bar, .docs-search-results */
--ds-z-tooltip: 30; /* [data-tip]:hover::after, #pesttgOverflowMenu */
--ds-z-mobile-toggle: 50; /* .ds-messages-rail-toggle (mobile) */
--ds-z-modal-lite: 100; /* .ds-messages-rail (mobile), .attachment-lightbox */
--ds-z-menu: 200; /* .ds-board-menu-popover, .ds-reaction-picker-popover */
--ds-z-popover: 500; /* .new-project-popover, .notifications-popover */
--ds-z-drawer: 600; /* .drawer-backdrop, .ds-search-modal-backdrop */
--ds-z-drawer-top: 601; /* .drawer-panel */
--ds-z-modal: 700; /* .ds-lightbox-backdrop */
--ds-z-messages: 1000; /* #messagesOverlayRoot — see public/messagesOverlay.js (P0-B) */
--ds-z-toast: 2000; /* .feedback-toast, .global-toast-stack */
}
/* ---- Light theme (Business OS — Notifications Bell + Settings, V1, Commit 5). ----
Overrides every color token declared in :root above for document.documentElement
([data-theme="light"] on , set by public/theme.js / index.html's inline
flash-of-wrong-theme guard — see theme.js's header comment). Purely attribute-driven:
no `@media (prefers-color-scheme)` anywhere in this file — theme.js resolves 'system'
to a concrete 'dark'/'light' data-theme value itself via matchMedia, so there is exactly
one mechanism deciding colors.
Scope of the retrofit that makes this override actually work app-wide, beyond the
token layer itself: body{} (below) and the .primary-nav sidebar shell (further down —
search ".primary-nav {") now read these tokens instead of hardcoded hex, since the
sidebar wraps every page including /styleguide and /settings. Everything inside
#bizosMain's per-module CSS (~400 pre-existing hardcoded hex values, out of scope for
this commit) is NOT retrofitted and stays dark-only when data-theme="light" — logged
page-by-page to docs/ROADMAP.md.
Non-color tokens (spacing/radius/type scale) are identical in both modes and aren't
repeated here. The 6 PESTTG force-accent colors and the 4 impact-scale colors are
categorical, not background/foreground, so they're only lightly adjusted for
contrast-on-white rather than fully re-paired like the bg/text tokens. */
[data-theme="light"] {
--surface-hover: #e9ebef;
--border-strong: #c7ccd6;
--danger-bg: #fee2e2;
--danger-text: #b91c1c;
/* Background layers */
--ds-bg-page: #f5f6f8;
--ds-bg-card: #ffffff;
--ds-bg-inset: #eef0f3;
--ds-border: #dfe2e8;
--ds-border-strong: #c7ccd6;
/* Sidebar shell */
--ds-nav-bg: #eef0f3;
--ds-nav-border: #dde1e7;
--ds-nav-active-bg: #e2e6ee;
/* Text */
--ds-text-primary: #14161c;
--ds-text-secondary: #4b5563;
/* Was #6b7280: 4.83:1 on --ds-bg-card #ffffff (pass) but 4.47:1 on --ds-bg-page #f5f6f8
(FAIL). Light mode was not "one adjustment from failing" — it was already failing on the
page background, which is where .ds-empty and .ds-loading render. #666c7a is 5.26:1 on
card and 4.87:1 on page. Both are enforced by test/design-token-contrast.test.js. */
--ds-text-muted: #666c7a;
/* Focus ring, light palette — the dark #60a5fa is too pale on white. Matches this
palette's own --ds-info-text hue for the same reason. */
--ds-focus-ring: #1d4ed8;
/* The interactive colour, light palette — see the dark declaration for why this token exists.
Same value as this palette's focus ring, same reasoning. Measured: 6.20:1 on --ds-bg-page,
6.70:1 on --ds-bg-card, 5.87:1 on --ds-bg-inset. */
--ds-accent: #1d4ed8;
/* Accent-under-pointer, light palette. Deeper again, for the same reason as the dark
declaration: the hover step moves AWAY from the page, and on white that means darker. */
--ds-accent-hover: #1e40af;
/* Text on a non-inverting fill — see the dark declaration. Same value on purpose: the
grounds this sits on (a fixed red badge, a black scrim) do not change with the theme,
so neither may their text. */
--ds-text-on-fill: #ffffff;
/* Overlay ground — see the dark declaration. Same value on purpose. */
--ds-scrim: #000000;
/* Ink on a fill — see the dark declaration. Same value on purpose; what changes between
palettes is WHICH fills choose it, since the fills themselves shift. */
--ds-ink-on-fill: #14161c;
/* Driving-force accents (PESTTG) — darkened slightly from the dark-mode values for
contrast against light backgrounds, otherwise the same recognizable hues. */
--ds-force-political: #dc2626;
--ds-force-economic: #16a34a;
--ds-force-societal: #b45309;
--ds-force-technological: #2563eb;
--ds-force-mega_trends: #9333ea;
--ds-force-globalisation: #0d9488;
/* Idea scope accents — darkened for light-background contrast, same hues as the dark
theme's --ds-scope-* above. */
--ds-scope-org_wide: #4b5563;
--ds-scope-new_venture: #db2777;
--ds-scope-supply_chain: #b45309;
--ds-scope-operations: #2563eb;
--ds-scope-marketing_sales: #16a34a;
--ds-scope-service_warranty: #0d9488;
--ds-scope-infrastructure: #9333ea;
--ds-scope-human_resources: #dc2626;
--ds-scope-technology: #0891b2;
--ds-scope-procurement: #c2410c;
/* Semantic */
--ds-success-bg: #dcfce7;
--ds-success-text: #15803d;
--ds-warning-bg: #fef3c7;
--ds-warning-text: #92400e;
--ds-danger-bg: #fee2e2;
--ds-danger-text: #b91c1c;
--ds-info-bg: #dbeafe;
--ds-info-text: #1d4ed8;
--ds-neutral-bg: #e5e7eb;
--ds-neutral-text: #4b5563;
/* Semantic hairlines, light palette — see the dark declarations. Each sits between its
own -bg and -text here too, which on this palette means a tint darker than the fill. */
--ds-success-border: #86d5a4;
--ds-warning-border: #e5c169;
--ds-danger-border: #f0a9a9;
/* Impact scale (low -> very_high) */
--ds-impact-low: #6b7280;
--ds-impact-medium: #2563eb;
--ds-impact-high: #b45309;
--ds-impact-very_high: #dc2626;
}
/* The `hidden` attribute must win even on flex/grid elements (otherwise a
display:flex rule overrides it and the element stays visible). */
[hidden] { display: none !important; }
/* The clipping that makes the app shell a fixed, non-scrolling frame lives on .layout, NOT on
body. It used to sit on body, and that was a plain bug rather than a device policy: index.html
hosts three FULL-PAGE surfaces that sit OUTSIDE .layout — the QR wants survey
(#wantsSurveyMain), the accept-invite card, and the workspace chooser — and `overflow: hidden`
on body clipped every one of them at exactly one viewport height with no way to reach the rest.
The survey is the case that proves it: a respondent scanning a printed QR code gets a
multi-question form on a phone, and anything past the first screenful was unreachable.
.layout keeps the identical behaviour it always had (its own panes scroll internally via
.bizos-main's overflow-y), so the shell is visually and behaviourally unchanged. Nothing
depends on body's height: the two `height: 100%` shells in the app (.docs-shell,
.settings-shell) chain off .bizos-main, not off body.
dvh with a vh fallback: on mobile browsers 100vh is the viewport with the chrome HIDDEN, so a
100vh frame is taller than what you can actually see and the bottom sits under the toolbar.
Fixing this is not a device commitment either way — it is what vh has always meant. */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--ds-bg-page);
color: var(--ds-text-primary);
min-height: 100vh;
min-height: 100dvh;
}
.layout {
display: flex;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
/* Business OS — the AI App Builder's own shell (Prompt 24.8's CSS split of style.css).
Predates Business OS entirely: sidebar/header/section cards/build progress/panels/
checklist/login/visual-editing toolbar/attachments/voice input/brand kits/content (CMS)/
publish. Not tied to any single os/.js module — this is the chat-panel + preview-
panel builder tool, not a Business OS analysis page. */
/* ---- Left sidebar (collapsible) ---- */
.chat-panel {
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--ds-nav-border);
background: var(--ds-nav-bg);
padding: 14px;
transition: width 0.18s ease, padding 0.18s ease;
}
.sidebar-inner {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
gap: 10px;
}
.chat-panel.collapsed {
width: 60px;
padding: 12px 8px;
}
/* ---- Header ---- */
.sidebar-header {
display: flex;
align-items: center;
gap: 8px;
}
.chat-panel h1 {
font-size: var(--ds-font-lg);
margin: 0;
white-space: nowrap;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.header-right {
display: flex;
align-items: center;
gap: 6px;
}
.chat-panel.collapsed .sidebar-header {
flex-direction: column;
}
.chat-panel.collapsed h1,
.chat-panel.collapsed #provider {
display: none;
}
select {
/* Widened slightly beyond the plan's named sidebar selector list (Commit 5) — this bare
`select` rule is what paints every plain