/* ============================================================================
KH OS — tokens.css
Design-authored token sheet. 2026-08-04.
LOAD ORDER MATTERS: link this AFTER styles.css.
styles.css declares :root three times (line 1, --appbar-h mid-file,
--topbar-h mid-file). Same specificity, so last declaration wins — if this
file loads first, those mid-file blocks override it and the layout tokens
silently revert.
SECTION 1 restates every existing token at its CURRENT production value.
Nothing in section 1 is a change. It is here so that a brand colour, radius,
shadow or type change is a one-file edit against a complete list, rather than
a grep through 3,824 lines. Change a value here and it lands everywhere the
token is already consumed.
SECTION 2 adds tokens that do not exist yet. These do nothing on their own —
the values they replace are currently hard-coded literals in styles.css.
components.css in this folder does that substitution; it is the whole of the
component delta this round.
============================================================================ */
:root{
/* ── 1. EXISTING — current production values, unchanged ────────────────── */
/* Layout. --rail-w is Chad's standing rule (300 → 240, deliberate). Do not
re-widen. --topbar-h is the LAYOUT LAW invariant: one fixed header height
in every module, which is why the subtitle stays out of the bar. */
--rail-w:240px;
--appbar-h:56px;
--topbar-h:64px;
/* Brand — COLAB sign palette: royal blue → cyan */
--blue-deep:#081A66;
--blue-royal:#1733a5;
--blue-mid:#1A4FD0;
--cyan:#37BDF5;
--cyan-soft:#7cc7f0;
/* Accent — chartreuse. Logo "OS", active nav, live dots, Today pill. */
--chart:#D6E24A;
--chart-deep:#c3d02f;
--chart-ink:#5a5f0e;
/* Brands. Real logos only — never mascot emoji. */
--csc:#69b048;
--csc-deep:#4e8a33;
--ffc:#e31937;
--ffc-deep:#a01423;
--kh:#1733a5;
/* Text */
--ink:#323338;
--ink-soft:#50525f;
--muted:#676879;
/* Lines and ground */
--line:#d0d4e4;
--line-soft:#e6e9f2;
--bg:#f6f7fb;
--card:#ffffff;
/* Status — monday's */
--st-done:#00c875;
--st-doing:#fdab3d;
--st-todo:#c4c4c4;
--st-stuck:#e2445c;
/* ---- THE SCALES (DESIGN.md, Chad 2026-08-14) — Apple's type ramp, a 4pt
grid above 8, six radii + pill, four weights. Added 2026-08-19 when the
HR folder was restyled to the contract; the old --r-sm/--r/--r-lg triple
is NOT retargeted here (too global for one pass) — new work uses these. */
--t-caption2:12px; --t-caption:13px; --t-footnote:14px; --t-body:15px;
--t-headline:17px; --t-title3:20px; --t-title2:22px; --t-title1:28px; --t-display:34px;
--w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
--sp-0:0; --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px;
--sp-6:16px; --sp-6b:20px; --sp-7:24px; --sp-8:32px; --sp-9:40px;
--r-xs:4px; --r-md:10px; --r-xl:16px; --r-pill:999px;
/* Radii */
--r-sm:10px;
--r:14px;
--r-lg:22px;
/* Shadows and focus ring */
--shadow:0 1px 2px rgba(8,26,102,.05),0 4px 14px rgba(8,26,102,.06);
--shadow-md:0 6px 16px rgba(8,26,102,.09),0 16px 40px rgba(8,26,102,.11);
--shadow-lg:0 24px 70px rgba(9,18,60,.38);
--ring:0 0 0 3px rgba(55,189,245,.28);
/* Gradients */
--grad:linear-gradient(120deg,#081A66 0%,#1A4FD0 48%,#37BDF5 100%);
--grad-soft:linear-gradient(115deg,rgba(23,51,165,.08),rgba(55,189,245,.10));
/* Motion — 70/100/150ms productive, emphasized easing for pops */
--m-fast:70ms;
--m-med:100ms;
--m-slow:150ms;
--ease-emph:cubic-bezier(0,0,.2,1.4);
/* ── 2. NEW — proposed, with what each is for ──────────────────────────── */
/* Type. Currently the two stacks are re-typed as literals at styles.css:37
and in .greet-h1, .bh-line, .sc-name, .pn-title and the KB heads. Behind a
token, a font change is one line here instead of eight sites. Values are
the current stacks verbatim — this is not a type change. */
--font-head:Poppins,Figtree,sans-serif;
/* THE SYSTEM STACK (DESIGN.md §5, adopted by Chad 2026-08-27: "lets go with B").
-apple-system resolves to genuine San Francisco on every Mac, iPhone and
iPad in the company — the font is already on the device, so nothing is
downloaded and nothing is redistributed (Apple's licence does not permit
serving SF Pro as a webfont; it does not need to). Windows falls to Segoe
UI Variable, Android to Roboto. Figtree stays as the non-Apple fallback so
a machine with neither still gets the old face rather than Arial.
Poppins is untouched above — it is the brand's heading voice and stays on
the wordmark and headings. This token existed since 2026-08-19 holding the
OLD stack verbatim, waiting for exactly this one-line change. */
--font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,
"Segoe UI Variable Text","Segoe UI",Roboto,Figtree,Inter,sans-serif;
/* 14 → 15. Apple's ramp has no 14 and no 16: 13 → 15 → 17. 15 is --t-body,
the documented default, and is what fixes "the font is still really small"
(Chad, 2026-08-27). Everything reading this token moves with it. */
--ui-size:15px;
--ui-line:1.55;
/* The one dashed panel border. X4 in VISUAL_DELTA: every empty panel uses
#d5daea, hard-coded today at .empty-note.empty-panel (styles.css:502).
Distinct from --line, which stays on controls like .lrow-add. */
--line-dash:#d5daea;
/* Completed / struck text. Hard-coded #8b8fa3 at .tt-row.done and used by the
prototype's list and board rows. One token so "done" reads identically in
all three views. */
--ink-done:#8b8fa3;
/* Overdue. The row tint is hard-coded #fffafb twice (styles.css:2331 region
and 3563) and once more at .tt-row.od. The bar is --st-stuck already —
no new token for it. */
--od-tint:#fffafb;
/* Chip pairs. Each is a bg/ink couple currently written as literals in the
.chip rules (styles.css:536-541, 2334). Tokenised so a tag or due chip can
be retinted without touching six selectors. */
--due-bg:#fff7e4; --due-ink:#95650e;
--od-chip-bg:rgba(226,68,94,.12); --od-chip-ink:#c0122c;
--tag-bg:rgba(55,189,245,.12); --tag-ink:#1567a3;
--tag-bg-hover:rgba(55,189,245,.22);
/* Tier tags. #store-private inverts to navy-on-chartreuse, #store-public to
olive — the two tags DESIGN.md calls out as styled distinctly. */
--tier-private-bg:#101733; --tier-private-ink:#D6E24A;
--tier-public-bg:rgba(214,222,47,.25); --tier-public-ink:#5a5f0e;
/* Sizes that recur as magic numbers. --avatar is the single avatar size
(X2); --avatar-sm is the one deliberate exception, the table's 40px Owner
column. --pill-w is the status pill; note it now sits inside a 100px grid
track on the row branch, so the pill and the track should read the same
number rather than drifting apart. */
--avatar:34px;
--avatar-sm:26px;
--pill-w:104px;
/* At-risk ring on store cards. Design's sheet keeps shipping the OLD #f3c6cb;
the rebuild landed on #f0b7bf, the softer border that pairs with the 3px
rgba(226,68,92,.10) ring. This is the SECOND time taking design's value
verbatim would have quietly reverted the store-card work — if a v2 sheet
arrives still carrying #f3c6cb, keep this line.
Consumers: .store-card.at-risk and .bh-pill.bh-red. */
--at-risk:#f0b7bf;
/* The :active press. DESIGN.md specifies scale(.96); it is written out at
styles.css:1038 and in six one-off :active rules. */
--press:scale(.96);
/* ── 3. NEW in v1 — shell + item detail ────────────────────────────────── */
/* The brand block's width is what lines Create / Help up with the content
pane's left edge: (--rail-w + child rail) - 21. Tokenised so the two rails
and the brand block can never drift apart. */
--brand-w:459px; /* both rails present */
--brand-w-narrow:219px; /* no child rail */
/* Top bar. --appbar-h stays 56 (section 1) — the prototype draws 54 and the
2px is not worth re-pinning a LAYOUT LAW invariant for. */
--appbar-grad:linear-gradient(90deg,#081A66 0%,#14286f 55%,#1c3f95 100%);
--appbar-ctl:44px; /* search / bell / avatar, one height */
--appbar-pad:11px;
/* Nav rail skin, distinct from --grad, which the hero and store bands use. */
--rail-grad:linear-gradient(168deg,#081A66 0%,#152b8f 48%,#1f5ec2 100%);
--rail-ink:#b9c8ea; /* idle item */
--rail-cap:#8fa5d8; /* NAVIGATE / EDIT caption */
--rail-mini-w:68px; /* tablet icon rail */
/* Child rail active row — the one pair used in every module's scope list. */
--scope-on-bg:#eef2ff;
--scope-on-ink:#1733a5;
/* Module header. Drawn at 58; --topbar-h is 64 in production. Pick ONE and
put it here, because the title/action x/y invariant is measured off it. */
--topbar-drawn-h:58px;
/* Breakpoints, so the collapse order is stated once. Custom properties can't
be used in media queries — these are documentation for the two numbers that
must match everywhere: 1200 (rail labels, inline view switcher) and 768
(side rails to bottom tab bar). 1000 is the store grid's four-across. */
--bp-desktop:1200px;
--bp-phone:768px;
--bp-store-grid:1000px;
/* Item detail (task / special event / roadmap item). */
--id-side-w:300px; /* right-hand property column */
--id-max-body:64ch; /* description and checklist measure */
/* ── 4. NEW in v2.1 — Documents editor ─────────────────────────────────── */
/* Chrome. The editor draws three fixed bands: document header, toolbar, then
the body. Both numbers are literals in the prototype; behind tokens the
canvas top offset is computable instead of measured. */
--doc-head-h:60px;
--doc-toolbar-h:46px;
/* Toolbar controls. Buttons live inside grouped pills — a --doc-group-bg
tray at --doc-group-r, each button --doc-ctl-h tall at --doc-ctl-r. The
active button is white on the tray with --doc-ctl-shadow, which is how a
pressed state reads without a border. .ttb is 30px today; 28 inside a 2px
tray comes out to the same 32px band. */
--doc-ctl-h:28px;
--doc-ctl-w:30px;
--doc-ctl-r:7px;
--doc-group-bg:#f6f7fb;
--doc-group-r:9px;
--doc-ctl-shadow:0 1px 2px rgba(8,26,102,.08);
/* Canvas. --doc-measure is the reading measure and it does NOT change with
the viewport — the rail overlays, the page does not narrow. .tt-page is
8.5in (816px) today with a 1in pad; 700/76 is a shorter line at the same
optical margin. --doc-canvas-bg is already the literal at .tt-canvas. */
--doc-canvas-bg:#eef1f6;
--doc-measure:700px;
--doc-page-pad-x:76px;
--doc-page-pad-t:54px;
--doc-page-top:26px;
--doc-page-r:6px;
--doc-page-shadow:0 3px 18px rgba(20,30,60,.13);
/* Canvas type. .tt-page .ProseMirror is 11pt/1.65 today. These are the
modernized values, in px so they match the rest of the app's scale. */
--doc-ink:#1b2436;
--doc-body:14.5px;
--doc-body-line:1.72;
--doc-h1:27px;
--doc-h2:16px;
--doc-meta:11.5px;
/* The rail. One 320px column carrying Comments / History / Read receipts,
docked at >= --doc-rail-bp and an overlay sheet below it. Live has three
separate fixed drawers (.cmt-panel 400px, .hist-side 340px) — one width
replaces both. */
--doc-rail-w:320px;
--doc-rail-tab-h:34px;
--doc-rail-bp:1200px;
/* Callout panels. The emoji ::before goes; a 3px left rule carries the kind
and a stroked icon sits inline. Fills and borders are unchanged from
styles.css:391-394 — only the rule and the ink are new. */
--panel-pad:12px 14px;
--panel-rule-w:3px;
--panel-r:10px;
--panel-info-rule:#1A4FD0; --panel-info-ink:#1733a5;
--panel-note-rule:#7c5cd6; --panel-note-ink:#4a2f8f;
--panel-success-rule:#00c875; --panel-success-ink:#0a8a4e;
--panel-warn-rule:#fdab3d; --panel-warn-ink:#8a5a00;
/* Comment highlight and the rail's quote block. Both are literals today
(.tt-comment styles.css:412, .cmt-quote 421). Same values, tokenised so
the highlight and its echo in the rail cannot drift. */
--cmt-hl-bg:#fff3c4;
--cmt-hl-rule:#f2c744;
--cmt-quote-bg:#fff8e8;
--cmt-quote-ink:#7a5a12;
/* Saved / acknowledged green. Already written out at .rc-ack (403) and in
the prototype's Saved pill. One triple. */
--ok-bg:#eafaf1;
--ok-line:#b7e6cc;
--ok-ink:#0a8a4e;
/* Selection bubble — dark, floating, sits --bubble-rise above the line. */
--bubble-bg:#1b2436;
--bubble-r:10px;
--bubble-rise:42px;
--bubble-shadow:0 8px 24px rgba(9,18,60,.32);
--bubble-sep:#3a4358;
/* Task block (the chosen mechanic: 3b's block, 3a's trigger). A bordered
card with a --task-rule-w status stripe down the left edge; the stripe
colour is the existing --st-* set, so no new status colours. */
--task-block-r:10px;
--task-rule-w:4px;
--task-chip-h:24px;
--task-chip-r:7px;
/* Menus — slash menu and the toolbar's overflow popover. */
--menu-w:280px;
--menu-r:11px;
--menu-shadow:0 12px 34px rgba(9,18,60,.20);
/* ── 5. NEW in v2.2 — Forms builder ────────────────────────────────────
The forms builder is the one surface in this handoff with no existing
markup behind it. formBuilder() in app.js builds an .overlay > .modal
string; the full-screen builder is a new view (state.view "formsEdit"),
so these tokens are consumed by renderers/formsbuilder.js, not by a
substitution into styles.css. Nothing here changes an existing pixel. */
/* The three regions. --fb-canvas-min is the whole point: the canvas is the
only region that must keep its width, and 700 is the same measure the
Documents editor settled on. Below --fb-bp-tablet the palette drops to
an icon rail; below --fb-bp-phone both side regions become sheets. */
--fb-palette-w:244px;
--fb-palette-mini-w:62px;
--fb-inspector-w:320px;
--fb-canvas-max:720px;
--fb-canvas-min:700px;
--fb-canvas-pad-x:28px;
--fb-bp-tablet:1200px;
--fb-bp-phone:760px;
/* Builder header. Two bands: the app bar (--appbar-h, section 1) then the
form bar carrying back / title / Build-Preview-Logic / Publish. It is
--topbar-h so the LAYOUT LAW invariant holds — one header height in
every module, and the builder is not an exception to it. */
--fb-bar-h:var(--topbar-h);
/* Field card. The selected card is the editing surface, which is the whole
change from the modal: --ring plus a --blue-mid border, not a chip in a
list. Unselected cards drop to --shadow. */
--fb-card-r:13px;
--fb-card-pad:15px 16px;
--fb-card-gap:10px;
--fb-card-sel-line:var(--blue-mid);
--fb-card-sel-shadow:var(--ring),0 6px 16px rgba(8,26,102,.09);
--fb-grip-ink:#c4c4c4;
/* The control previews drawn inside a field card. These are not live
inputs — they are the shapes of them, so the card reads as the question
it will be. --fb-ph-ink is placeholder grey, one step lighter than
--muted so a preview never reads as a filled answer. */
--fb-ctl-h:38px;
--fb-ctl-r:10px;
--fb-ctl-area-h:76px;
--fb-drop-h:74px;
--fb-ph-ink:#a9adbe;
/* Palette tiles — two-across on desktop, icon-only on tablet. 38px is the
tablet rail button; on phone the palette is a sheet and tiles go to
--tap-min. */
--fb-tile-r:11px;
--fb-tile-pad:10px 9px;
--fb-tile-gap:7px;
--fb-tile-mini:38px;
/* Inspector. Tabs are Field / Form; the underline is the same 2px inset
box-shadow the module tabs use. --fb-ins-label is the small caps label
above every control in the rail. */
--fb-ins-tab-h:38px;
--fb-ins-gap:16px;
--fb-ins-label:10.5px;
--fb-ins-overlay-shadow:-14px 0 34px rgba(9,18,60,.14);
/* Toggle. One in the field pane (Required). The handoff also drew "Fail
creates a task" and "Kiosk mode"; neither is persisted by
/api/forms/save, so neither ships — see formsbuilder.js. On is --st-done,
the same green as a done status, so "on" reads identically app-wide. */
--fb-switch-w:40px;
--fb-switch-h:22px;
--fb-knob:18px;
/* Minimum tap target, phone. Every control in the phone sheets is at least
this tall; the Add field button is 48. */
--tap-min:44px;
}
/* ── MOTION ────────────────────────────────────────────────────────────────
Chad, 2026-08-13: "make the entire website grow fluently, make everything
very smooth and the way it moves in transitions."
One scale, used everywhere, so nothing in the app animates at a speed of its
own invention. --dur-1 is for a colour or a border reacting under the
cursor; --dur-2 is the default for anything that MOVES; --dur-3 is for a
panel or a page arriving. The easing is a standard decelerate curve — fast
out of the gate, settling at the end — which is what reads as "fluid"
rather than "sliding". --ease-spring overshoots slightly and is reserved
for things that pop IN (menus, toasts); never use it on hover.
------------------------------------------------------------------------ */
:root{
--dur-1:110ms;
--dur-2:180ms;
--dur-3:280ms;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--ease-spring:cubic-bezier(.34,1.4,.64,1);
}