/* ============================================================
Ben-Zvi platform — design tokens, "White City" (DESIGN.md), bright since 2026-11-01.
THE one source of every colour, size, space, radius, shadow
and duration on the site and in its services. Components read
these names only; a new value is a new token, added here and in
DESIGN.md first.
Who loads it:
- every page of apps/web: right after fonts.css;
- Pocket Calc: the same link (and sw.js keeps it for offline);
- MBZ CAD / MBZ BIM: mbz/mbz.css @imports it (with fallbacks for offline);
- Plan Room / CRM / Cargo: a generated copy, app/platform-tokens.css
(tools/design/sync-tokens.mjs; apps/web/tests/tokens.test.mjs fails on drift);
- Research and PillGuard: from the platform.
Light is the default. Dark ("Navy") is [data-theme="dark"]: /assets/bz-theme.js sets it on from the
person's display mode, and a subtree may set it too.
Reduced motion sets the durations to 0, so every component that
uses --motion-* honours it without its own media query.
============================================================ */
:root {
color-scheme: light;
/* ---------- colour: surfaces ---------- */
--color-bg: #FBFBFC; /* the page: bright, a clean cool white */
--color-surface: #FFFFFF; /* cards, fields, menus, dialogs */
--color-surface-2: #F4F5F7; /* work-screen page, planes, quiet bands, table heads: a very light grey */
--color-surface-3: #EAECEF; /* hover and pressed on surface-2 */
--color-scrim: rgb(27 29 33 / 0.42); /* behind a dialog */
/* ---------- colour: text and lines ---------- */
--color-text: #1B1D21; /* body text, icons */
--color-text-2: #5E636B; /* secondary text, labels, meta (>= 5.1:1 on every surface) */
--color-line: #E3E5E9; /* hairlines: card borders, separators */
--color-line-soft: #EEF0F2; /* separators inside a card */
--color-field-line: #868B94; /* form-field border (3.42:1 on surface: WCAG 1.4.11) */
/* ---------- colour: the accent (the firm's signal red; one tinted action per section) ---------- */
--color-accent: #C8362A; /* fills: the primary button, the current-item rule */
--color-accent-hover: #A32A20; /* the primary's hover and pressed fill */
--color-accent-text: #A32A20; /* red text and links (4.5:1 on every surface; --color-accent is not on surface-2) */
--color-accent-soft: #F9ECE9;
--color-accent-line: #EFD2CC;
--color-on-accent: #FFFFFF; /* text and icons on an accent, status or ink fill (navy at night) */
--color-on-strong: #FFFFFF; /* text and icons on an identity or data fill (white in both themes) */
/* ---------- colour: status (always with a word or an icon, never colour alone) ---------- */
--color-ok: #2C6E45;
--color-ok-soft: #E6F0E9;
--color-ok-line: #C9DECF;
--color-warn: #8A5600;
--color-warn-soft: #FAEFD8;
--color-warn-line: #EBD9AE;
--color-danger: #962017; /* deeper crimson than the accent; outlined, with an icon and a word */
--color-danger-soft: #F7E6E3;
--color-danger-line: #EBC9C4;
--color-info: #2D5577;
--color-info-soft: #E8EEF3;
--color-info-line: #CBD8E3;
/* ---------- colour: identity (DESIGN.md › App identity): each app's own colour and the people's avatar colours.
Fills only, under a white glyph or white initials (>= 5:1 each); never chrome, never a selection. ---------- */
--color-app-planroom: #6F56D6;
--color-app-pillguard: #2C6B57;
--color-app-hvac-calc: #0B6E99;
--color-app-cargo: #8A4B08;
--color-app-crm: #7A3E8E;
--color-app-research: #2B4C7E;
--color-app-project-request: #9D3B66;
--color-app-manager: #0F6B6B;
--color-app-reception: #8E3B6E;
--color-app-documents: #3D5A40;
--color-app-mbz-cad: #33415C;
--color-app-mbz-bim: #7A5C12;
--color-app-account: #49607F;
--color-app-admin: #1F5F8B; /* not the accent: the app bar never carries a red fill */
--color-app-apps: #44484E;
--color-avatar-1: #6F56D6;
--color-avatar-2: #2C6B57;
--color-avatar-3: #0B6E99;
--color-avatar-4: #9C2419;
--color-avatar-5: #49607F;
--color-avatar-6: #8A5C10;
--color-avatar-7: #6A4E82;
--color-avatar-8: #B04A32;
--color-avatar-9: #0E6E7E;
--color-avatar-10: #1F7A43;
/* ---------- type ---------- */
--font-display: "Rubik", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif; /* headings */
--font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif; /* everything else */
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* numbers, ids, code; dir="ltr" */
--text-xs: 12px; /* the floor: chips, captions */
--text-sm: 14px; /* meta, hints, nav, table cells */
--text-md: 16px; /* body, buttons, fields (16px: no iOS zoom on focus) */
--text-lg: 18px; /* lead text, card titles */
--text-xl: 24px; /* screen titles */
--text-2xl: 32px; /* public section titles */
--text-3xl: 40px;
--text-4xl: 56px;
--text-display: clamp(40px, 6vw, 72px); /* the public hero only */
--weight-regular: 400;
--weight-medium: 500; /* Rubik headings */
--weight-semibold: 600; /* labels, buttons, titles */
--weight-bold: 700;
--leading-body: 1.55;
--leading-tight: 1.2;
/* ---------- space: a 4px grid, these steps only ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-section: calc(2 * var(--space-7)); /* between public sections (a layout rhythm, not a step) */
/* ---------- radius: three shapes (fixed, capsule, concentric) ---------- */
--radius-xs: 4px; /* the floor of a concentric inner radius */
--radius-sm: 8px; /* fields */
--radius-md: 12px; /* menus, banners, tiles, folds */
--radius-lg: 20px; /* cards, dialogs, planes */
--radius-capsule: 999px; /* buttons, chips, tags, tabs, nav items */
--radius-card: var(--radius-lg);
--card-pad: var(--space-5); /* card padding (16 on phones) */
/* ---------- shadow: few and soft ---------- */
--shadow-card: none; /* cards are flat planes */
--shadow-raised: 0 1px 2px rgb(27 29 33 / 0.08); /* the selected segment */
--shadow-overlay: 0 12px 32px rgb(27 29 33 / 0.14); /* menus, popovers, dialogs, toasts */
/* ---------- motion: short; zero under prefers-reduced-motion ---------- */
--motion-fast: 120ms; /* hover, press */
--motion-base: 200ms; /* open, close */
--motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
/* ---------- size ---------- */
--hit-min: 44px; /* every target, everywhere */
--control-height: 44px; /* buttons and fields */
--control-height-sm: 36px; /* small buttons: the visual; a hit slop takes the target to 44 */
--appbar-height: 61px; /* the app bar with its hairline */
--layout-max: 1280px;
--layout-form: 640px; /* one-column forms */
--layout-gutter: clamp(16px, 5vw, 48px);
--focus-width: 2px;
--focus-offset: 2px;
--focus-field: 0 0 0 3px rgb(200 54 42 / 0.18); /* the halo round a focused field (its border turns accent) */
}
/* Names made of other names are declared again wherever a theme is set, so a dark subtree recomputes them. */
:root, [data-theme] {
--color-focus: var(--color-text);
/* ============================================================
Old names, kept as aliases while the pages move to the names
above (DESIGN.md › Aliases lists them; remove each when the
last use is gone). Never use them in new code.
============================================================ */
--ink: var(--color-text);
--ink-soft: var(--color-text);
--ink-invert: var(--color-text);
--paper: var(--color-bg);
--paper-2: var(--color-surface-2);
--paper-3: var(--color-surface-3);
--surface: var(--color-surface);
--slate: var(--color-text-2);
--slate-invert: var(--color-text-2);
--line: var(--color-line);
--line-soft: var(--color-line-soft);
--field-line: var(--color-field-line);
--accent: var(--color-accent);
--accent-ink: var(--color-accent-text);
--accent-bright: var(--color-accent);
--accent-soft: var(--color-accent-soft);
--accent-line: var(--color-accent-line);
--on-accent: var(--color-on-accent);
--ok: var(--color-ok);
--ok-soft: var(--color-ok-soft);
--ok-line: var(--color-ok-line);
--warn: var(--color-warn);
--warn-ink: var(--color-warn);
--warn-soft: var(--color-warn-soft);
--warn-line: var(--color-warn-line);
--danger: var(--color-danger);
--danger-soft: var(--color-danger-soft);
--danger-line: var(--color-danger-line);
--info: var(--color-info);
--info-soft: var(--color-info-soft);
--info-line: var(--color-info-line);
--grid-ink: transparent;
--display: var(--font-display);
--body: var(--font-body);
--mono: var(--font-mono);
--fs-xs: var(--text-xs);
--fs-sm: var(--text-sm);
--fs-md: var(--text-md);
--fs-lg: var(--text-lg);
--fs-xl: var(--text-lg);
--fs-2xl: var(--text-xl);
--fs-3xl: var(--text-2xl);
--fs-display: var(--text-display);
--fw-regular: var(--weight-regular);
--fw-medium: var(--weight-semibold);
--fw-bold: var(--weight-bold);
--lh-body: var(--leading-body);
--lh-tight: var(--leading-tight);
--sp-1: var(--space-1);
--sp-2: var(--space-2);
--sp-3: var(--space-3);
--sp-4: var(--space-4);
--sp-5: var(--space-5);
--sp-6: var(--space-6);
--sp-7: var(--space-7);
--sp-8: calc(var(--space-7) + var(--space-4));
--r: var(--radius-sm);
--r-sm: var(--radius-xs);
--r-md: var(--radius-sm);
--r-lg: var(--radius-lg);
--r-full: var(--radius-capsule);
--shadow-sm: var(--shadow-raised);
--shadow-md: var(--shadow-overlay);
--shadow-lg: var(--shadow-overlay);
--elev-card: var(--shadow-card);
--elev-overlay: var(--shadow-overlay);
--focus-ring: var(--color-focus);
--ease: var(--motion-ease);
--dur-fast: var(--motion-fast);
--dur-base: var(--motion-base);
--control-sm: var(--control-height-sm);
--control-md: var(--control-height);
--control-touch: var(--hit-min);
--wrap: var(--layout-max);
--content-max: var(--layout-max);
--form-max: var(--layout-form);
--gutter: var(--layout-gutter);
}
/* Dark, "Navy" (Rony, 2026-11-06): navy page, cream text, coral accent. Set on by /assets/bz-theme.js from the
person's "מצב תצוגה" (light / dark / the device's / by the hours), or on a subtree that has its own switch. */
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #14213D; /* navy: the page */
--color-surface: #1B2A4A; /* cards, fields, menus, dialogs: a step lighter */
--color-surface-2: #223357; /* planes, table heads, quiet bands */
--color-surface-3: #2B3E66; /* hover and pressed on surface-2 */
--color-scrim: rgb(5 10 22 / 0.65);
--color-text: #F4EDE0; /* cream */
--color-text-2: #BDB6A9;
--color-line: #2F4069;
--color-line-soft: #26365C;
--color-field-line: #7883A0;
--color-accent: #FF6B5B; /* coral: fills only, under navy text (white on coral is 2.8:1) */
--color-accent-hover: #FF8A7D;
--color-accent-text: #FF8E81; /* coral text and links (4.5:1 on every navy surface) */
--color-accent-soft: #2A3B63; /* selected / pressed: a lighter navy, not a pink tint */
--color-accent-line: #2F4069; /* its edge: the hairline (coral text on it stays 4.5:1) */
--color-on-accent: #14213D; /* navy on the light fills of the night (coral, rose, green, amber, cream) */
--color-on-strong: #FFFFFF; /* white on identity and data fills, which stay deep */
--color-ok: #7CCB9A;
--color-ok-soft: #173A3A;
--color-ok-line: #245244;
--color-warn: #F0C46E;
--color-warn-soft: #33321F;
--color-warn-line: #574A24;
--color-danger: #F58BB0; /* rose, kept apart from the coral accent (and the chart's down candle) */
--color-danger-soft: #3B2440;
--color-danger-line: #5E3352;
--color-info: #A6C3E2;
--color-info-soft: #1D3050;
--color-info-line: #33496F;
--color-logo-tile: #F4EDE0; /* the logo's dark drawing sits on a cream tile at night */
/* identity at night: the same hues (nothing red or coral), light enough to stand out on navy (>= 3:1 on bg and
surface) and still under a white glyph (>= 4.5:1) */
--color-app-planroom: #7760E0;
--color-app-pillguard: #2E8268;
--color-app-hvac-calc: #227CA7;
--color-app-cargo: #A46627;
--color-app-crm: #9A5DAF;
--color-app-research: #5376AB;
--color-app-project-request: #B1548C;
--color-app-manager: #138282;
--color-app-reception: #AD578A;
--color-app-documents: #5E7C60;
--color-app-mbz-cad: #657593;
--color-app-mbz-bim: #8F702B;
--color-app-account: #5E7696;
--color-app-admin: #3C7AA7;
--color-app-apps: #70757B;
--color-avatar-1: #7760E0;
--color-avatar-2: #2E8268;
--color-avatar-3: #227CA7;
--color-avatar-4: #895FC7;
--color-avatar-5: #5E7696;
--color-avatar-6: #9B6C26;
--color-avatar-7: #8669A0;
--color-avatar-8: #9E6A00;
--color-avatar-9: #1A8091;
--color-avatar-10: #2C844C;
--shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.5);
--focus-field: 0 0 0 3px rgb(255 142 129 / 0.3);
}
@media (prefers-reduced-motion: reduce) {
:root { --motion-fast: 0ms; --motion-base: 0ms; }
}