/* tokens.css — THE design system. ONE token family, one component vocabulary. * * Lineage: 1.6 deleted 5 competing token families + 24 copies of token(); this is the merged * survivor (--txt/--ink/--fg were three names for one slot). This pass GROWS that survivor into a * real system — full color/space/type/elevation scales + a semantic component layer — so screens * stop hand-rolling inline styles and inherit one look. See docs/DESIGN-SYSTEM.md. * * Two axes, kept independent: * 1. ACCENT — set by the shell on , one of the STANDARD TEN below. * The FIRM picks its key (Settings ▸ Appearance); a person may override it for their own view * from the same ten. Weak tints derive from it via color-mix, so every key flows everywhere. * 2. THEME (light/dark) — set by the shell on ; default follows the OS via * prefers-color-scheme. Only the neutral + semantic tokens flip; components never re-declare. */ /* ---- THE FACES, SELF-HOSTED (2026-10-11). Figtree for text, Red Hat Display for page titles and big numbers. They were named in --font / --font-display but never loaded, so every screen fell back to the OS font, which read "compressed" (David). Served from web/shared/fonts/, nothing fetched from a third party, SIL Open Font License (OFL-*.txt beside them). Variable files: one per face covers its whole weight range. Latin and Latin Extended only; a character outside them falls back to the system face. */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/red-hat-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/red-hat-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- DARK is the base (:root). Light is layered on top. ---------------------------------- */ :root { /* neutral ground → text, four surfaces + two borders + three text tiers. WARM-neutral (the readback "paper ground" look): the ramp carries a faint warm cast rather than the old cool blue-black, so the ground reads calm and the per-tenant accent pops off it. */ --bg: #1a1917; /* warm charcoal — the cockpit-v3 mock's dark "ground" (was too-black #14130f) */ --surface: #232220; --surface-2: #2b2926; /* raised / hover / inset */ --card: var(--surface); /* back-compat alias — modules + atlas-bar.js read var(--card) */ --line: #302e2a; --line-2: #3d3a34; /* stronger divider / control border on hover */ --txt: #eceae4; --dim: #98938a; /* secondary text */ --faint: #6c685f; /* tertiary / placeholder / captions */ /* accent (per-tenant, overridden below) + tints derived from whatever it is. The ROOT default is CLAY — the warm terracotta of the Atlas Today / Readback prototypes. It only shows where no data-accent is stamped (artifacts, tenant-less previews); every signed-in screen stamps one, so this changes the prototype ground, never a company's identity colour. */ /* TEAL (2026-10-11), the action colour docs/TASTE.md chose; was clay over a grey bar. An entity that has not picked a colour no longer reads as grey (David: "it all feels computer"). */ --accent: #29a898; /* --link: a link is TYPE in the accent, and the bare accent is a fill hue: clay on white 4.35, and on the dark ground clay, berry, indigo and graphite 2.7-4.0 (surfaces lens SF12, 2026-10-09). Dark lifts the accent toward white, light deepens --accent-strong: every swatch clears 4.6:1 on every ground of its theme (test_a_colour_you_cannot_read). Mixed per element, so the tenant's swatch still drives it. */ --link: color-mix(in srgb, var(--accent) 70%, white); --accent-strong: #1f7f73; /* the same hue, deep enough to carry --accent-fg; see the tenant-accent block for why every filled control uses it */ /* THE PAINT LAYER (2026-09-10). Everything below 15% was missing, and that absence is why every attempt at colour in this product came out as a SPLASH — a wordmark, a button, eleven 6px dots — rather than a room that is a colour. The only accent tools on the shelf were object-sized (a chip at 15%, a border at 40%), so screens could only ever DOT the accent onto a white ground. --accent-tint / --accent-wash are SURFACE-sized: low enough that no single element reads as coloured, so the effect is cumulative (a page feels green) rather than local (a thing is green). Two properties worth knowing before reaching for a stronger value: * they cannot break the contrast floor — a 5% wash barely moves background luminance, so text on them keeps whatever AA ratio it had. A SATURATED fill cannot promise that: it forces a per-hue light/dark text decision, and half the tenant presets would fail it. * they survive re-theming. A 5% tint of ANY hue looks fine; a solid header tuned for FH green goes muddy in WH amber and heavy in TC purple. This is what makes "tenants pick their own colour" a safe promise instead of a per-tenant support burden. */ --accent-tint: color-mix(in srgb, var(--accent) 5%, var(--surface)); /* surface wash — nav strip, table head, row hover */ --accent-wash: color-mix(in srgb, var(--accent) 8%, var(--surface)); /* one step up: selected row, active tab */ --accent-ground: color-mix(in srgb, var(--accent) 3%, var(--bg)); /* the room itself — the page behind every card */ /* ── THE BAR (2026-09-12) ────────────────────────────────────────────────────────────────────── The shelf used to be a 30% tint of the accent over --surface. That made the nav LABELS legible (--nav-ink) but it could never give a tab a visible EDGE: on a pale shelf the best boundary available anywhere is 2.41:1 (an accent ring, light theme), and WCAG 1.4.11 wants 3.0 for a UI component. A white fill reached only 1.30-1.41. So the current tab was told apart by a shadow, and every other tab had no container at all — David: "the text seems to fade into the blue." --bar is the fix and it is a different KIND of surface: dark enough that white ink clears AA on it (4.84-4.89 on every tenant), which in turn makes a white rim a real boundary. Three consequences worth knowing before you touch these numbers: 1. ONE COLOUR, BOTH THEMES. --bar does not change between light and dark, so nothing measured against it changes either. The old shelf mixed into --surface, which IS per-theme, so every figure on that bar had two values. Against the page the bar simply flips polarity: 4.64 as the darkest thing in a light room, 3.61 as a lit shelf in a dark one. 2. THERE IS NO SECONDARY INK TIER. --bar is solved so that white lands at 4.84 — the floor, with no headroom. White at 92% is already 4.38 and fails. Anything sitting DIRECTLY on the bar is full white; hierarchy up there comes from size, case and tracking, never from ink. (That is why --nav-dim, added hours earlier for the pale shelf, is white here.) 3. SATURATION IS FREE. Every ratio here is a function of lightness alone, so these hues are muted to ~35% saturation with no effect on any measurement. David: "those colors are INTENSE." They were the --accent-strong values, solved for CHIP-sized use, not for a band across the whole screen. The well/rim/lift are all derived from --bar by fixed percentages, so a sixth workspace needs one hex, not five. Guarded by test_a_colour_you_cannot_read.py. */ --bar: #3b7b73; /* teal default; per-tenant below */ --nav-well: color-mix(in srgb, #000 36%, var(--bar)); /* a resting tab is recessed */ --nav-well-hov: color-mix(in srgb, #000 60%, var(--bar)); /* hover sinks it further */ --nav-rim: color-mix(in srgb, #fff 70%, var(--bar)); /* its boundary, 3.26-3.31 */ /* focus. --ring is 3px of --accent-weak, a translucent wash of the accent: on a bar that IS the accent it is invisible. This is the same white rim hover uses, plus a 2px gap in the bar's own colour and a white halo outside it, so focus is distinguishable from hover by SHAPE rather than by a second colour nobody has room for. */ --ring-on-bar: inset 0 0 0 1px #fff, 0 0 0 2px var(--bar), 0 0 0 4px #fff; --nav-lift: color-mix(in srgb, var(--bar) 18%, #fff); /* the ONE tab that inverts */ --nav-on-lift: #22201c; /* 12.88 on --nav-lift */ --nav-ink: #ffffff; --nav-dim: #ffffff; /* see (2) above — no dim tier exists on this bar */ /* --accent-shelf is retained: modules still use it for table heads and row washes, where it sits on the CONTENT plane and its pale tint is correct. It is no longer the top bar. */ --accent-shelf: color-mix(in srgb, var(--accent) 30%, var(--surface)); --accent-weak: color-mix(in srgb, var(--accent) 15%, transparent); --accent-line: color-mix(in srgb, var(--accent) 40%, transparent); --accent-fg: #fff8f2; /* text on an accent fill */ /* semantic — SEPARATE from accent (good / warning / critical / info), each with a weak fill. Semantic hues never bend to the tenant accent (docs/DESIGN-SYSTEM.md: accent ≠ semantic). */ --ok: #4fb85e; --ok-weak: color-mix(in srgb, var(--ok) 16%, transparent); --warn: #e0a12a; --warn-weak: color-mix(in srgb, var(--warn) 17%, transparent); /* was USED 12× but never defined */ --danger: #ff6b6b; --danger-weak: color-mix(in srgb, var(--danger) 15%, transparent); --info: #3fb6c4; --info-weak: color-mix(in srgb, var(--info) 16%, transparent); /* calm teal — "on track", never the accent */ /* THE SAME FOUR HUES, AS TEXT — the --nav-ink pattern, applied to the semantic family. A colour tuned to read as a FILL (a dot, a bar, a chip) is too light to read as TEXT, and these four were doing both jobs with one value. Measured on the LIGHT ground, 2026-09-11, where WCAG AA wants 4.5:1: --warn 2.26 · --info 2.41 · --ok 2.51 · --danger 2.78. All four fail. On the DARK ground the very same hues are 5.7-7.8:1 and are fine — which is the tell: the palette was tuned for charcoal and the light theme carried it through unchanged (the block below still says so: "Semantic + state hues carry through from :root unchanged"). A persona audit of the live firm hit it where it costs: the amber chip on EVERY worklist row, and the payroll compliance score a person is meant to act on. DARKENING THE HUES THEMSELVES WAS THE WRONG FIX — they are correct as fills, they feed the -weak tints by color-mix, and dropping their lightness would muddy every chart to repair text. So `-ink` is an additive ROLE, used only where a semantic colour lands on type. Hue and saturation are preserved exactly; only lightness moves. Dark keeps the originals. */ --ok-ink: var(--ok); --warn-ink: var(--warn); --danger-ink: var(--danger); --info-ink: var(--info); /* THE ASSISTANT HAS ITS OWN COLOUR (docs/TASTE.md colour table, landed 2026-10-11): anything the AI drafted or suggested wears it, so a person always sees which words a machine wrote. */ /* faces: six deep hues that carry white initials at AA in BOTH themes (the colour table's inks) */ --av-1: #16694b; --av-2: #1f4e9a; --av-3: #9a4a12; --av-4: #a1263a; --av-5: #4a3a86; --av-6: #1f6f68; --ai: #9b83ff; --ai-ink: #b9a6ff; --ai-weak: color-mix(in srgb, var(--ai) 18%, transparent); --state-mine-ink: var(--ok-ink); --state-waiting-ink: var(--warn-ink); --state-urgent-ink: var(--danger-ink); --state-track-ink: var(--info-ink); /* ---- STATE LANGUAGE — the ONE scanning layer, reused on every list / board / row. -------- David: "auto colour coding — oh, the green ones are mine." Four states, the SAME hue on every surface, so state reads pre-attentively. COLOURBLIND-SAFE by construction: the .state chip / .sdot marker below always pair the hue with a distinct SHAPE and a word — colour is never the only carrier (mine=green and urgent=red are the classic confusion pair, so they get the most distinct shapes: disc vs diamond). Map, don't reinvent: these alias the semantic hues. */ --state-mine: var(--ok); --state-mine-weak: var(--ok-weak); /* green ● — yours to do */ --state-waiting: var(--warn); --state-waiting-weak: var(--warn-weak); /* amber ◗ — waiting on someone */ --state-urgent: var(--danger); --state-urgent-weak: var(--danger-weak); /* red ◆ — needs you now */ --state-track: var(--info); --state-track-weak: var(--info-weak); /* teal ▪ — on track, no action */ /* HEAT — a position ramp, best (1) to worst (6): a DATA scale, not a state. It fills a chip, a map cell or a chart dot, always beside the number it colours, so the colour is never the only carrier. --heat-ink is the type on any step (4.95:1 on the reddest). One ramp, so the firm's screen and the client's page colour the same position the same way: Local Rank's two copies had drifted apart (portal lens, 2026-10-11). The SVG that draws with it reads the value through getComputedStyle, because a presentation attribute cannot take var(). */ --heat-1: #2fae5f; --heat-2: #77c04a; --heat-3: #c9b83a; --heat-4: #e0a53a; --heat-5: #e07a3a; --heat-6: #e0503a; --heat-ink: #0b0e12; /* spacing scale (4px grid). --gap kept as the old name = --s3 ⚠️ --s7 WAS MISSING (added 2026-09-13). The scale read 4/8/12/16/24/32/—/48, and three pages reached for `var(--s7)` anyway. One invalid value voids the WHOLE shorthand, so `padding: var(--s7) var(--s4)` computed to 0px — the wedding's couple portal and guest RSVP page had shipped with NO hero padding at all, text flush to both screen edges on a phone. Found by looking at the rendered page, not by reading the CSS: the declaration is not "wrong", it simply does not exist, and nothing in the pipeline says so. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px; /* the top bar's height: shell.js measures it after every chrome render and writes the real value on (an inline style, which wins over this); 96px is the first frame's. Read by .rail and by any card that scrolls into view under the bar (Settings ▸ Integrations). */ --bar-h: 96px; --gap: var(--s3); /* radius scale. --radius kept as the old name = --r */ --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px; /* --r-lg softened 12→14 toward the mocks' 13–16 */ --radius: var(--r); /* the resting-card LIFT — the mocks' signature: a card floats a hair off the ground, not flat on it. Deliberately ONE value for both themes (like the mock), and far gentler than --shadow-1 (which is for menus/popovers): a card at rest should be barely-there, felt not seen. */ --card-lift: 0 1px 2px rgba(0,0,0,.05); /* type — ROOM TO BREATHE (David, 2026-10-11: "too compact", "the font is not good", "designed by a computer"). Measured against ten apps a business owner has used: every one sets body text at 14-16px on a 20-24px line; this file had 13.5px, and "Inter" never loaded, so every screen was really the OS system font. Figtree is the face David picked by eye; Inter stays as the fallback. */ --font: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --fs-caption: 12.5px; --fs-sm: 13.5px; --fs-body: 16px; --fs-md: 17.5px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 30px; /* A SECOND FACE for the two places a page speaks loudest: its title and its big numbers. One face everywhere is how software looks when nobody chose anything. Toast's admin (measured live, 2026-10-11) pairs a 16px text face with a medium-weight display face at 26px; this is that move. */ --font-display: "Red Hat Display", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* elevation + focus */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 12px 32px -12px rgba(0,0,0,.6); --ring: 0 0 0 3px var(--accent-weak); /* scrim — the darkening layer behind a slide-over / modal. One value for both themes: it dims whatever is under it, so it reads correctly on a light or a dark surface alike. */ --scrim: rgba(0,0,0,.4); /* ---- MOTION — the timing scale, the fifth family beside color / space / type / elevation. WHY IT EXISTS: this file had NO motion tokens and had accumulated FIVE ad-hoc durations of its own (.12s .14s .15s .18s .25s across 13 transitions). Short and CONSISTENT is what reads as fast; five near-identical values read as drift. Reach for one of these rather than typing a number — `test_design_tokens_are_not_bypassed.py` fails on a new literal in this file. Durations get names because they are the drift-prone half. The EASING is deliberately the browser default made explicit, NOT a new curve: tokenising timing must not silently restyle the app. Real spring curves are motion design, and they belong to obj_e04020efaec2 (the motion / interaction specialist card), not to a tokenisation pass. */ --dur-fast: .12s; /* row / hover tint — the snappiest thing that still reads as a transition */ --dur-quick: .14s; /* control state: button, input, border colour */ --dur-base: .18s; /* the workhorse — overlays, toasts, slide-overs, drawers */ --dur-slow: .25s; /* deliberate, meant-to-be-noticed motion (the saved-tick fade) */ --dur-shimmer: 1.2s; /* the skeleton loading shimmer's LOOP — long, calm, not a transition (see .skel) */ --ease: ease; /* the curve every transition here already resolved to, now named */ /* ---- FEEL — the tactile half of motion (David, 2026-09-23: Trello's "little wiggle shake" is "extremely friendly"). docs/DESIGN-SYSTEM.md § "Feel — motion that answers the hand". These are the numbers behind the shared classes further down (.tactile, .is-grabbed, .is-landing, .drop-zone): a card tilts and lifts when you pick it up, settles when you put it down, the column you aim at makes room, and a press gives a hair under the finger. Deliberately SMALL — a few degrees, a few percent — because feel must never cost speed: every one of these runs AFTER the action has already happened (optimistic), never in front of it. Motion design beyond this (real springs, choreography) is still obj_e04020efaec2's; this is the vocabulary it grows. */ --ease-out: cubic-bezier(.2, .8, .2, 1); /* decelerate — a thing arriving or lifting to you */ --ease-settle: cubic-bezier(.34, 1.56, .64, 1); /* a slight overshoot past rest, then back: the spring */ --tilt-grab: 2.5deg; /* how far a picked-up card leans — the Trello tell; more reads as a toy */ --scale-grab: 1.03; /* a picked-up card comes a little toward you */ --scale-press: .98; /* a press gives, barely */ --lift-hover: -1px; /* a clickable card rises one pixel under the pointer */ --lift-grab: var(--shadow-2); /* the shadow of a card in the hand — the menu/popover elevation */ --drop-gap: var(--s7); /* the room a target column opens for the card you are aiming */ /* the tap floor: 24px under a mouse (WCAG 2.5.8); 44px under a finger, set in the (pointer: coarse) block with the 44px rule below. One :root, so --tap lives here with the other tokens. */ --tap: 24px; } /* ---- LIGHT — OS preference, unless the shell has stamped an explicit theme. Warm PAPER ground (off-white with a faint warm cast), warm-gray ink + borders: the light half of the readback look. Semantic + state hues carry through from :root unchanged. ------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg:#f1f0ec; --surface:#ffffff; --surface-2:#f5f2eb; --line:#e8e4dc; --line-2:#dcd6cc; --txt:#22201c; --dim:#6b655b; --faint:#b4afa4; --accent-fg:#fff8f2; --link: color-mix(in srgb, var(--accent-strong) 95%, black); /* Clears 4.6:1 on EVERY ground one of these lands on: the three light grounds bare — #fff (surface), #fafaf7 (bg), #f5f2eb (surface-2) — AND each ink on its own `-weak` tint over each of them, which is where a badge actually sits and is the commonest destination of all. ⚠️ SOLVED AGAINST THE BARE GROUNDS FIRST, AND THAT WAS NOT ENOUGH: those values cleared 4.5 on flat white but bottomed out at 4.01-4.11 on a chip tint over --surface-2 — so the single most common case was the one still failing. The tint is the worst case; solve for it. */ --ok-ink:#2e7238; --warn-ink:#865e13; --danger-ink:#cb0000; --info-ink:#256e77; /* THE TASTE.md COLOUR TABLE, IN THE APP AT LAST (2026-10-11): it had been agreed on 10-03 and lived only in a doc. Each meaning gets an ink for words, a pastel fill for chips and tiles, and a solid hue for bars and dots. Inks clear 5.2-6.9:1 on their own fills. */ --ok:#22a06b; --ok-ink:#16694b; --ok-weak:#ddf3ea; --warn:#e07a2e; --warn-ink:#9a4a12; --warn-weak:#fce7d2; --danger:#d9466a; --danger-ink:#a1263a; --danger-weak:#fde2e4; --info:#4c82e8; --info-ink:#1f4e9a; --info-weak:#e2eeff; --ai:#7a5af8; --ai-ink:#4a3a86; --ai-weak:#f3f0fa; --shadow-1:0 1px 2px rgba(40,32,20,.06); --shadow-2:0 14px 30px -12px rgba(40,32,20,.16); } } /* explicit toggle wins over the media query, both directions */ :root[data-theme="light"] { color-scheme: light; --bg:#f1f0ec; --surface:#ffffff; --surface-2:#f5f2eb; --line:#e8e4dc; --line-2:#dcd6cc; --txt:#22201c; --dim:#6b655b; --faint:#b4afa4; --accent-fg:#fff8f2; --link: color-mix(in srgb, var(--accent-strong) 95%, black); /* Clears 4.6:1 on EVERY ground one of these lands on: the three light grounds bare — #fff (surface), #fafaf7 (bg), #f5f2eb (surface-2) — AND each ink on its own `-weak` tint over each of them, which is where a badge actually sits and is the commonest destination of all. ⚠️ SOLVED AGAINST THE BARE GROUNDS FIRST, AND THAT WAS NOT ENOUGH: those values cleared 4.5 on flat white but bottomed out at 4.01-4.11 on a chip tint over --surface-2 — so the single most common case was the one still failing. The tint is the worst case; solve for it. */ --ok-ink:#2e7238; --warn-ink:#865e13; --danger-ink:#cb0000; --info-ink:#256e77; /* THE TASTE.md COLOUR TABLE, IN THE APP AT LAST (2026-10-11): it had been agreed on 10-03 and lived only in a doc. Each meaning gets an ink for words, a pastel fill for chips and tiles, and a solid hue for bars and dots. Inks clear 5.2-6.9:1 on their own fills. */ --ok:#22a06b; --ok-ink:#16694b; --ok-weak:#ddf3ea; --warn:#e07a2e; --warn-ink:#9a4a12; --warn-weak:#fce7d2; --danger:#d9466a; --danger-ink:#a1263a; --danger-weak:#fde2e4; --info:#4c82e8; --info-ink:#1f4e9a; --info-weak:#e2eeff; --ai:#7a5af8; --ai-ink:#4a3a86; --ai-weak:#f3f0fa; --shadow-1:0 1px 2px rgba(40,32,20,.06); --shadow-2:0 14px 30px -12px rgba(40,32,20,.16); } :root[data-theme="dark"] { color-scheme: dark; --bg:#1a1917; --surface:#232220; --surface-2:#2b2926; --line:#302e2a; --line-2:#3d3a34; --txt:#eceae4; --dim:#98938a; --faint:#6c685f; --accent-fg:#fff8f2; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 12px 32px -12px rgba(0,0,0,.6); } /* ---- PRINT — always paper, whatever the screen was (portal lens T6, 2026-10-09). The ground above is DARK unless the OS asks for light, and a person who chose Dark has data-theme="dark" stamped on , which print obeys too. A browser prints without backgrounds by default, so a client page, a statement or a report printed from a dark screen came out as near-white ink (#eceae4) on white paper: the page a firm's client forwards to their board, blank. Print takes the light inks on a white ground and drops the shadows; it is later than, and as specific as, every theme rule above. */ @media print { :root, :root[data-theme] { color-scheme: light; --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f2eb; --line:#e8e4dc; --line-2:#dcd6cc; --txt:#22201c; --dim:#726d63; --faint:#b4afa4; --accent-fg:#fff8f2; --link: color-mix(in srgb, var(--accent-strong) 95%, black); --ok-ink:#2e7238; --warn-ink:#865e13; --danger-ink:#cb0000; --info-ink:#256e77; --shadow-1:none; --shadow-2:none; } } /* ...and the paper is the SCREEN, not the app around it. Twenty module screens print with window.print() (continuity, credit, esg, gifts, household, ...), which printed the top bar (its labels white on a background the printer drops), the module rail down the left and the assistant dock over the page. The breadcrumbs stay: they say what the page is. shell.printDocument still opens its own window. */ @media print { .topbar, #rail, #assistant-dock { display: none !important; } body.has-rail #host, body.has-rail .crumbs { padding-left: var(--s4); } } /* --bar, per tenant (2026-09-12). One hue per entity, same lightness, ~35% saturation, so every ratio in the bar block above holds for all of them: white 4.86-4.95, rim 3.27-3.34, label on a resting well 9.11-9.17, chosen tab 3.85-3.93. ⚠️ atlas is TEAL, not the pink, and not the graphite it was briefly going to be. The pink sat at hue 330°, which is the exact midpoint of the largest unclaimed arc left after blue, green, amber and purple — it was produced by a separation rule, never chosen, and David: "that pinkish color does not scream professional." Graphite was the next proposal, on the logic that atlas is the vendor's own workspace and does not need to answer "which company am I in". That was WRONG for a reason this file records two lines below: `personal` is ALREADY neutral by design, and the two greys collide badly enough that the one distinction the hue exists to make stops working. Teal (186°) is the other free arc, 45° clear of both blue and green. tenant accents — one hue per entity, so "which company am I in" is pre-attentive. --accent-strong IS THE SAME HUE, DEEP ENOUGH TO CARRY WHITE TEXT, and it exists for exactly one job: a FILL behind `--accent-fg`. MEASURED 2026-09-12: white text on the accent scored 2.40-4.14 across ALL EIGHT accents — every one below WCAG AA's 4.5, and four below 3.0, which fails even the large-text allowance. That is every primary button in the product, for every tenant, including the "Plan…" button on every row of the busiest screen (3.04:1). The accent itself is UNCHANGED — it is the tenant's identity and it stays exactly as it is for the shelf, the tints, the borders and the dots. Only the filled control deepens, which is what most design systems do anyway. Hue and saturation preserved; lightness is the only thing that moves. */ /* LEGACY FALLBACK — what an entity that predates the standard ten wore BY ID, kept so nothing changes colour on the day branding lands. It paints only while that firm has not chosen (the shell then stamps no data-accent), and every `[data-accent]` rule below beats it by source order. Each row carries exactly the values of the preset named beside it. When a firm picks a colour its line stops mattering; when they all have, delete this block and re-pin test_no_tenant_slugs.py — it counts these lines here, so the fence shrinks with them, and no id was mapped in Python. */ :root[data-tenant="lh"] { --accent: #4c8dff; --accent-strong: #1167ff; --bar: #5271a9; } /* = slate */ :root[data-tenant="fh"] { --accent: #3fb950; --accent-strong: #2c8238; --bar: #3d7f46; } /* = moss */ :root[data-tenant="wh"] { --accent: #d29922; --accent-strong: #946b18; --bar: #856e40; } /* = ochre */ :root[data-tenant="tc"] { --accent: #a371f7; --accent-strong: #8a4af5; --bar: #8061b3; } /* = heather */ :root[data-tenant="atlas"] { --accent: #29a898; --accent-strong: #1f7f73; --bar: #3b7b73; } /* = teal */ /* THE STANDARD TEN (David, 2026-10-04). The firm picks one; a person may override it for their own view; nothing else may set an accent. Ten, not a free picker, because each row below is MEASURED: its --accent-strong carries --accent-fg at AA, and its --bar carries white nav ink at AA (both pinned by test_a_colour_you_cannot_read.py). A free hex would let a firm pick a brand colour its own primary button cannot be read on. The keys are mirrored in firm_branding.py (PRESETS), and test_firm_branding.py holds the two lists equal. Status hues are NOT here and never will be. Which firm wears which key is the firm's own setting, stamped by the shell from the session — the only entity ids left in this file are the LEGACY FALLBACK just above, which loses to every one of these rules (same specificity, earlier in source). */ :root[data-accent="teal"] { --accent: #29a898; --accent-strong: #1f7f73; --bar: #3b7b73; } :root[data-accent="slate"] { --accent: #4c8dff; --accent-strong: #1167ff; --bar: #5271a9; } :root[data-accent="moss"] { --accent: #3fb950; --accent-strong: #2c8238; --bar: #3d7f46; } :root[data-accent="ochre"] { --accent: #d29922; --accent-strong: #946b18; --bar: #856e40; } :root[data-accent="heather"] { --accent: #a371f7; --accent-strong: #8a4af5; --bar: #8061b3; } :root[data-accent="clay"] { --accent: #c25a3c; --accent-strong: #b65438; --bar: #a1604e; } :root[data-accent="indigo"] { --accent: #5b5bd6; --accent-strong: #5b5bd6; --bar: #6969b7; } :root[data-accent="ocean"] { --accent: #1f8fbf; --accent-strong: #1b7ba5; --bar: #45788f; } :root[data-accent="berry"] { --accent: #b8487a; --accent-strong: #b8487a; --bar: #ad547c; } :root[data-accent="graphite"] { --accent: #5e6b78; --accent-strong: #5e6b78; --bar: #657381; } /* .swatch — a colour CHIP for one of the ten, for the pickers (account menu, Settings ▸ Appearance). It shows a key's colour without stamping it on the page, so a picker never needs a private hex. */ .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--line); background: var(--accent); vertical-align: middle; } .swatch[data-swatch="teal"] { background: #29a898; } .swatch[data-swatch="slate"] { background: #4c8dff; } .swatch[data-swatch="moss"] { background: #3fb950; } .swatch[data-swatch="ochre"] { background: #d29922; } .swatch[data-swatch="heather"] { background: #a371f7; } .swatch[data-swatch="clay"] { background: #c25a3c; } .swatch[data-swatch="indigo"] { background: #5b5bd6; } .swatch[data-swatch="ocean"] { background: #1f8fbf; } .swatch[data-swatch="berry"] { background: #b8487a; } .swatch[data-swatch="graphite"] { background: #5e6b78; } .swatch-lg { width: 28px; height: 28px; } /* ============================================================================ BASE ELEMENTS — every module already uses these; evolved, not renamed. ============================================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--accent-ground); color: var(--txt); font: var(--fs-body)/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; font-size: var(--fs-body); font-weight: 500; line-height: 1; padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--txt); cursor: pointer; transition: background var(--dur-quick), border-color var(--dur-quick), filter var(--dur-quick), scale var(--dur-fast) var(--ease-out); } button:hover { border-color: var(--line-2); background: var(--surface); } button:focus-visible { outline: none; box-shadow: var(--ring); } /* FOCUS YOU CAN SEE ON EVERYTHING YOU CAN TAB TO (surfaces lens, 2026-10-07). Only