/* ============================================================================ BizBaby design tokens — the single source of truth for the org-side UI. Owner-approved 2026-07-06 (see DESIGN-SYSTEM-PLAN.md + the three mockups). Rules: - Components and pages reference ONLY these names, never raw values. - A skin overrides values under [data-bb-skin="..."]; it never adds names. - Surface hierarchy: warm page bg -> white container -> NEUTRAL gray insets. Insets differ from the page by hue (gray vs cream); cream (--bb-surface-2) is a page-level accent only, never a surface inside containers. ============================================================================ */ :root { /* brand */ --bb-primary: #DB3A57; --bb-primary-hover: #C22F4A; --bb-primary-soft: #FFF1F5; --bb-on-primary: #FFFFFF; /* surfaces */ --bb-bg: #FAF7F2; --bb-surface: #FFFFFF; --bb-inset: #F6F6F6; --bb-zebra: #F8F8F8; --bb-surface-2: #F7F3EC; --bb-select-bg: #F0F0EF; /* text */ --bb-text: #2B2622; --bb-text-2: #6E6660; --bb-text-3: #A39B93; /* borders */ --bb-border: #EAE4DC; --bb-border-strong: #D9D2C8; --bb-border-neutral: #E5E5E5; /* current table/grid line color */ --bb-border-input: #D2D5DA; /* current input/select border (cool gray) */ /* semantic */ --bb-amber: #B45D08; --bb-amber-bg: #FDF0DC; --bb-success: #1E7B4D; --bb-success-bg: #E6F4EC; --bb-success-bright: #2FBF71; --bb-danger: #C22F4A; --bb-danger-bg: #FFE9EE; --bb-info-bg: #F3EEE7; /* job/order statuses (absorbed from jobs-flow data-tables vars in Phase 1) */ --bb-status-approved: #1E7B4D; --bb-status-rejected: #C22F4A; --bb-status-pending: #B45D08; /* radii: controls 5px (current app feel), containers 16px */ --bb-radius-s: 5px; --bb-radius-m: 8px; --bb-radius-l: 16px; /* spacing steps: 4 8 12 16 24 32 — nothing in between */ --bb-sp-1: 4px; --bb-sp-2: 8px; --bb-sp-3: 12px; --bb-sp-4: 16px; --bb-sp-5: 24px; --bb-sp-6: 32px; /* ---- typography system ---- One family token per ROLE (all Rubik today; swapping the app's font later = editing these lines). Weight tokens map to the self-hosted Rubik faces (300/400/500/600/700/900 — see @font-face in app.css); never use a weight that has no face, the browser fakes it. */ --bb-font: 'Rubik', system-ui, 'Segoe UI', sans-serif; /* body/UI */ --bb-font-display: 'Rubik', system-ui, 'Segoe UI', sans-serif; /* page titles */ --bb-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; /* codes, IDs */ --bb-fw-light: 300; --bb-fw-regular: 400; --bb-fw-medium: 500; /* table headers, menu items, subtab active */ --bb-fw-semibold: 600; /* buttons, labels, card heads, org name */ --bb-fw-bold: 700; /* page titles, chips, big numbers */ /* type scale */ --bb-fs-xs: 11px; --bb-fs-s: 12.5px; --bb-fs-m: 14px; --bb-fs-l: 16px; --bb-fs-xl: 20px; --bb-fs-2xl: 26px; --bb-lh-tight: 1.2; /* headings */ --bb-lh-body: 1.45; /* paragraphs, banners */ /* elevation */ --bb-shadow-1: 0 1px 4px rgba(60, 45, 30, .06); --bb-shadow-2: 0 12px 32px rgba(60, 45, 30, .14); /* legacy aliases — existing scss uses var(--red, ...) fallbacks */ --red: #DB3A57; --default-color-red: #DB3A57; } /* ============================ ESPRESSO SKIN ============================= Values only — same names. Applied via . */ [data-bb-skin="espresso"] { --bb-primary: #E54763; --bb-primary-hover: #DB3A57; --bb-primary-soft: rgba(219, 58, 87, .16); --bb-bg: #1B1511; --bb-surface: #241D17; --bb-inset: #2E251D; --bb-zebra: #28211A; --bb-surface-2: #2E251D; --bb-select-bg: #2E251D; --bb-text: #F4EDE3; --bb-text-2: #B7AC9E; --bb-text-3: #847A6D; --bb-border: #3A2F25; --bb-border-strong: #4A3D30; --bb-border-neutral: #3A2F25; --bb-border-input: #4A3D30; --bb-amber: #F5A93C; --bb-amber-bg: rgba(245, 169, 60, .16); --bb-success: #5BC98B; --bb-success-bg: rgba(91, 201, 139, .14); --bb-danger: #FF7A93; --bb-danger-bg: rgba(229, 71, 99, .18); --bb-info-bg: rgba(183, 172, 158, .12); --bb-shadow-1: 0 1px 4px rgba(0, 0, 0, .4); --bb-shadow-2: 0 12px 32px rgba(0, 0, 0, .5); }