/* 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. TENANT accent — set by the shell on (the tenant IS the accent: * "you know where you are before you read a word"). Weak tints derive from it via color-mix, * so a new tenant color flows everywhere for free. * 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. */ /* ---- 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-tenant is stamped (artifacts, tenant-less previews); every live tenant overrides it below, so this changes the prototype ground, never a company's identity colour. */ --accent: #c25a3c; --accent-strong: #b65438; /* 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: #6b7279; /* neutral 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); --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 */ /* 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; --gap: var(--s3); /* radius scale. --radius kept as the old name = --r */ --r-sm: 6px; --r: 8px; --r-lg: 14px; --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 — one clean grotesque (Inter target, self-host later), mono for ids/figures */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --fs-caption: 11px; --fs-sm: 12px; --fs-body: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; /* 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 */ } /* ---- 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:#fafaf7; --surface:#ffffff; --surface-2:#f5f2eb; --line:#e8e4dc; --line-2:#dcd6cc; --txt:#22201c; --dim:#857f74; --faint:#b4afa4; --accent-fg:#fff8f2; /* 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; --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:#fafaf7; --surface:#ffffff; --surface-2:#f5f2eb; --line:#e8e4dc; --line-2:#dcd6cc; --txt:#22201c; --dim:#857f74; --faint:#b4afa4; --accent-fg:#fff8f2; /* 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; --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); } /* --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. */ :root[data-tenant="lh"] { --accent: #4c8dff; --accent-strong: #0e65ff; --bar: #5271a9; } /* slate blue */ :root[data-tenant="fh"] { --accent: #3fb950; --accent-strong: #2c8138; --bar: #3d7f46; } /* moss */ :root[data-tenant="wh"] { --accent: #d29922; --accent-strong: #926b18; --bar: #856e40; } /* ochre */ :root[data-tenant="tc"] { --accent: #a371f7; --accent-strong: #8949f5; --bar: #8061b3; } /* heather */ :root[data-tenant="atlas"] { --accent: #29a898; --accent-strong: #3b7b73; --bar: #3b7b73; } /* teal — see the note above */ :root[data-tenant^="personal-"] { --accent: #8b949e; --accent-strong: #69727d; --bar: #707070; } /* personal = neutral, not a company */ /* user-chosen accent — a PERSONAL override (per-browser preference) that wins over the tenant hue. Same specificity as the tenant rules above but later in source, so it takes precedence when present. Absent = follow the tenant. Set/cleared from the top-bar accent picker; -weak/-line derive from it. */ :root[data-accent="clay"] { --accent: #c25a3c; --accent-strong: #b65438; --bar: #a1604e; } /* warm terracotta — the Readback prototype ground */ :root[data-accent="blue"] { --accent: #4c8dff; --accent-strong: #0e65ff; --bar: #5271a9; } :root[data-accent="green"] { --accent: #3fb950; --accent-strong: #2c8138; --bar: #3d7f46; } :root[data-accent="amber"] { --accent: #d29922; --accent-strong: #926b18; --bar: #856e40; } :root[data-accent="purple"] { --accent: #a371f7; --accent-strong: #8949f5; --bar: #8061b3; } :root[data-accent="pink"] { --accent: #e05d9f; --accent-strong: #d1287d; --bar: #a1587c; } :root[data-accent="teal"] { --accent: #29a898; --accent-strong: #1f7e72; --bar: #3b7b73; } :root[data-accent="neutral"] { --accent: #8b949e; --accent-strong: #69727d; --bar: #707070; } /* ============================================================================ 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(--accent); 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); } /* A FILL BEHIND WHITE TEXT USES --accent-strong, never --accent. White on the plain accent measured 2.40-4.14 across all eight accents (2026-09-12) — below AA on every one, and below the large-text floor on four. This is the most-clicked control in the product. */ button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-fg); font-weight: 600; } button.primary:hover { background: var(--accent); filter: brightness(1.08); } /* AN ANCHOR THAT IS THE PAGE'S ACTION. Every rule above is element-qualified to `button`, so an `` inherited none of it and rendered as body text with a link colour. The first case was the sign-in hand-off (`obj_5e7e92eee8b1`): a cross-ORIGIN destination, so it has to be a real anchor — a button cannot be middle-clicked, copied or opened in a new tab, and the card's own words for what is being built are "a link, not a protocol". ADDITIVE ON PURPOSE: this is a new selector, not a change to the `button` rules, so nothing already drawn moves. Reach for it instead of an inline style the next time an action navigates somewhere rather than doing something. */ a.btn-primary { display: inline-block; padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid var(--accent-strong); background: var(--accent-strong); color: var(--accent-fg); font-weight: 600; text-decoration: none; text-align: center; transition: background var(--dur-quick), filter var(--dur-quick); } a.btn-primary:hover { background: var(--accent); filter: brightness(1.08); } a.btn-primary:focus-visible { outline: none; box-shadow: var(--ring); } button.danger { color: var(--danger-ink); } button.danger:hover { border-color: var(--danger); } button.ghost { background: transparent; border-color: transparent; color: var(--dim); } button.ghost:hover { background: var(--surface-2); color: var(--txt); } button.sm { padding: 5px 9px; font-size: var(--fs-sm); } button:disabled { opacity: .5; cursor: default; } input, select, textarea { font: inherit; font-size: var(--fs-body); color: var(--txt); padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); transition: border-color var(--dur-quick), box-shadow var(--dur-quick); } /* A CONTROL MAY NOT BE WIDER THAN WHAT HOLDS IT. This is the second way the page used to scroll sideways at phone width, and the one that is easy to miss because nothing on screen LOOKS too wide: a `