@hattisar/design-tokens 0.3.5

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@hattisar/design-tokens",
+  "version": "0.3.5",
+  "description": "Shared design tokens (colors, type, radius, spacing, motion) and base primitives (reset, buttons, inputs, cards, modals, auth shell) for every Hattisar frontend.",
+  "main": "tokens.css",
+  "files": [
+    "tokens.css",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hattisar/hattisar-inventory.git"
+  }
+}

package/tokens.css

@@ -0,0 +1,1067 @@
+/**
+ * Mirrors shared/src/design-tokens.ts. Neutral scale carries structure
+ * and layout; --color-brand is charcoal ink (var(--color-text-primary)),
+ * not a separate hue — no indigo/brand accent color, primary actions
+ * are the same black-on-white (white-on-black in dark theme) as body
+ * text. Color is otherwise reserved for the ten inventory status tiers
+ * (see StatusBadge.tsx) plus the three page-level alert banners. Every
+ * text/background pairing here is verified >=4.5:1 (WCAG AA body text).
+ *
+ * :root holds the light theme (the default). [data-theme="dark"] on
+ * <html> overrides every color/status/banner/sidebar/shadow variable
+ * below for dark mode; [data-theme="light"] re-asserts the same light
+ * values so a subtree (print pages) can pin itself to light and win
+ * over an ancestor's dark attribute. Shape tokens (radius, spacing,
+ * type, motion) are theme-invariant and live in :root only.
+ *
+ * Canonical source for every Hattisar frontend (Inventory, Storefront,
+ * Console) — published as @hattisar/design-tokens so a change here
+ * propagates to all three on their own release schedule (version bump
+ * + redeploy), rather than three copies silently drifting apart. Holds
+ * only what's genuinely identical across all three: color/shape tokens,
+ * the base reset, typography, buttons, form controls, .card, the auth
+ * page shell, and the modal primitive. Anything app-specific (nav/
+ * sidebar shape, data tables, dashboards, chat UI, ...) stays local to
+ * each app's own stylesheet, loaded after this one.
+ */
+:root {
+  /* Flat and opaque throughout — no gradient, no blur; color is
+     reserved for the status-tier badges and the brand accent below,
+     never the page chrome itself.
+     Neutral scale re-tuned for WCAG AA (every text/bg pair here hits
+     >=4.5:1) and for a real 3-step surface ladder — surface-tint used
+     to equal background-global exactly, which meant hover states had
+     no visible target to land on. */
+  --color-background-global: #f6f7f9;
+  --color-background-card: #ffffff;
+  --color-surface-tint: #eef0f3;
+  --color-input: #fdfdfd;
+  --color-text-primary: #1c2127;
+  /* ~6.4:1 on card */
+  --color-text-secondary: #56606f;
+  /* ~4.6:1 on card — was #8f99a8 at 2.9:1, failing AA body text */
+  --color-text-muted: #6b7684;
+  /* Derived from text-primary's own RGB (28,33,39) rather than a
+     separately maintained literal, so border and text can never drift
+     apart the way they used to (border was rgb(17,20,24), a different
+     dark from text-primary's rgb(28,33,39)). */
+  --color-border: rgba(28, 33, 39, 0.1);
+  --color-border-strong: rgba(28, 33, 39, 0.2);
+  --color-hover: var(--color-surface-tint);
+
+  /* Named accents — the same 8 hues most of the status tiers below
+     already used, promoted into reusable tokens instead of each tier repeating
+     its own literal hex (removes the duplication, doesn't change the
+     colors). Tuned for small, dense badge text — text on a light tinted
+     pill needs a genuinely dark/saturated shade, not a vibrant mid-tone,
+     to stay readable at a glance across a long table or KPI tile alike.
+     Also not used for the primary button system below — that stays the
+     existing neutral "ink" fill by design (grays carry structure, color
+     is reserved for status/data). Reuses --color-text-primary rather
+     than its own literal hex, so "draft" badge text always tracks
+     whatever the page's own ink color is. */
+  --accent-slate: var(--color-text-primary);
+  --accent-violet: #5700d1;
+  /* Deepened from #956f00 (was 4.61:1 on white — technically passing
+     but with no margin); now ~5.2:1. --color-warning below reuses this
+     rather than repeating its own literal, same reasoning as
+     --color-success/--accent-mint further down. */
+  --accent-amber: #8a6600;
+  --accent-bronze: #a35200;
+  --accent-blue: #005bd3;
+  --accent-cyan: #007cb4;
+  --accent-mint: #047b5d;
+  --accent-fuchsia: #984062;
+
+  /* Primary button — charcoal brand ink. Reuses --color-text-primary
+     (not its own literal hex) so the button fill is exactly the same
+     ink as body text — these used to drift apart by a few points of
+     warmth/coolness whenever one was retuned without the other. */
+  --color-brand: var(--color-text-primary);
+  --color-brand-hover: color-mix(in srgb, var(--color-brand) 85%, black);
+  --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
+  --color-brand-text: #ffffff;
+
+  /* Secondary button — bordered light-gray fill. Reuses
+     --color-surface-tint/--color-border-strong/--color-text-primary
+     rather than their own literal hex, so the secondary button always
+     tracks the same neutral scale as the rest of the page. */
+  --color-secondary-fill: var(--color-surface-tint);
+  --color-secondary-border: var(--color-border-strong);
+  --color-secondary-text: var(--color-text-primary);
+  --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
+
+  /* Destructive button — irreversible actions only (delete, void). */
+  --color-destructive-fill: #c70a24;
+  --color-destructive-hover: #a30a24;
+  --color-destructive-text: #ffffff;
+
+  /* General-purpose semantic text/icon colors (form errors, savebar
+     warning icon, scan-log rows, ...) — distinct from the dedicated
+     --status-* fill/text pairs below, which StatusBadge uses directly.
+     Warning/success reuse the matching accent token below rather than
+     repeating their own literal, so the two can never drift apart the
+     way --color-warning and --accent-amber used to (same value, two
+     separately-maintained literals). */
+  --color-warning: var(--accent-amber);
+  /* Sits between warning and danger — near-empty stock, more urgent
+     than a plain low-stock reorder point but not yet actually out.
+     See --status-critical-stock-* below and StatusBadge.tsx's
+     "criticalStock" tier. */
+  --color-critical: #a83c00;
+  --color-danger: #c70a24;
+  --color-success: var(--accent-mint);
+
+  /* The ten inventory status tiers — the only color in the UI outside
+     the button system and these three banners. Each pairs a saturated
+     text color with its own soft fill, applied as-is (no color-mix
+     derivation) so the exact hue is controlled directly rather than
+     computed. See StatusBadge.tsx for the status keyword -> tier
+     mapping — ten distinct hues, deliberately no collisions. */
+  --status-draft-text: var(--accent-slate);
+  --status-draft-bg: #f0f4f9;
+  --status-backordered-text: var(--accent-violet);
+  --status-backordered-bg: #f7ecfe;
+  --status-low-stock-text: var(--accent-amber);
+  --status-low-stock-bg: #ffd289;
+  /* Near-empty stock — more urgent than low-stock's reorder-point
+     nudge, not yet fully out. Bg sits between low-stock's punchy
+     amber-gold and out-of-stock's pale peach; text is --color-critical. */
+  --status-critical-stock-text: var(--color-critical);
+  --status-critical-stock-bg: #ffe0c2;
+  --status-out-of-stock-text: var(--accent-bronze);
+  --status-out-of-stock-bg: #ffede1;
+  --status-partially-fulfilled-text: var(--accent-blue);
+  --status-partially-fulfilled-bg: #e7f2ff;
+  --status-shipped-text: var(--accent-cyan);
+  --status-shipped-bg: #92e5ff;
+  --status-delivered-text: var(--accent-mint);
+  --status-delivered-bg: #ddf8d8;
+  --status-cancelled-text: var(--accent-fuchsia);
+  --status-cancelled-bg: #ffcbda;
+  --status-overdue-text: var(--color-danger);
+  --status-overdue-bg: #ffecee;
+
+  /* Page-level warning/danger/success banners — distinct from the row
+     badges above: a border plus a matching soft fill, no separate text
+     color (banner text uses --color-text-primary as usual). Warning/
+     danger borders reference the semantic tokens directly (rather than
+     repeating their own literal hex) so they can never drift out of
+     sync the way they briefly did here. Success intentionally doesn't:
+     it was never meant to mirror --color-success, it's its own shade. */
+  --banner-warning-bg: #fff1e3;
+  --banner-warning-border: var(--color-warning);
+  --banner-danger-bg: #fee8eb;
+  --banner-danger-border: var(--color-danger);
+  --banner-success-bg: #cdfed4;
+  --banner-success-border: var(--color-success);
+
+  /* A restrained scale, not flat — every step deliberately small, since
+     most controls here are compact (30-36px buttons/inputs, smaller
+     badges); a radius sized for a big consumer-app card looks
+     disproportionately round on something this size. --radius-full is
+     the one exception, reserved strictly for shapes that are
+     geometrically circles/pills by function (dots, the small circular
+     remove-buttons inside chips, the settings toggle switch) — never
+     applied to a badge/tag/chip just for a rounder look; those use
+     --radius-sm like everything else (see .status-badge and friends). */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+
+  /* One shared tier for every FloatingPanel-based dropdown/menu
+     (row actions, column picker, combobox, select, table-actions,
+     "+ Create", report filters, global search, the header drawer,
+     the Save-button split menu, ...) — all identical position:fixed
+     portals to document.body (see FloatingPanel.tsx), so none of them
+     has a reason to out-rank another. Before this token they'd
+     accumulated six different literal values (30/70/90/95/110/unset)
+     purely by accident of whoever wrote each one, which meant a
+     dropdown opened from inside a Modal (--z-modal below, 100) could
+     silently render behind it depending on which component it was.
+     Set above --z-modal for exactly that reason — a menu must always
+     be able to open on top of a dialog it lives inside. */
+  --z-dropdown: 110;
+  --z-modal: 100;
+
+  /* 4px-based spacing scale — new markup (bento tiles, order cards)
+     should reach for these instead of new magic numbers. Existing
+     inline styles/hardcoded px values elsewhere are untouched. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* Type scale — matches sizes already in use across the app (body
+     14.5px, h2 19px, h1 23px, ...) plus one new step (--text-3xl) for
+     bento hero stats. */
+  --text-xs: 12px;
+  --text-sm: 13.5px;
+  --text-base: 14.5px;
+  --text-md: 15px;
+  --text-lg: 17px;
+  --text-xl: 19px;
+  --text-2xl: 23px;
+  --text-3xl: 29px;
+
+  /* A real weight scale — headings, card titles, and KPI/stat values
+     use these to stand apart from the body text around them; dense
+     areas (table cells, form labels, buttons) stay on --font-weight-
+     regular so scanning a long list doesn't fight a page of bold text.
+     <strong>/<b> deliberately stay regular too (see the rule below) —
+     a separate, unrelated choice about semantic inline emphasis, not
+     part of this heading/value hierarchy. */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Motion — formalizes the transition durations already scattered
+     through this file (mostly 0.1-0.15s) into shared tokens so new
+     micro-interactions (bento tiles, order cards, DataTable polish)
+     stay consistent with the existing feel. */
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --duration-fast: 100ms;
+  --duration-base: 150ms;
+  --duration-slow: 250ms;
+
+  --header-height: 52px;
+
+  /* Exact Hattisar Design match — aside/header sit at the same white
+     --hd-card-bg as every card (bordered, not tonally separate),
+     mirrored by dark theme's own literal Hattisar Design values below. */
+  --sidebar-bg: var(--color-background-card);
+  --sidebar-text: #1c2127;
+  --sidebar-text-muted: #5f6b7c;
+  --sidebar-active-bg: var(--color-surface-tint);
+  --sidebar-active-text: #1c2127;
+  --sidebar-hover-bg: var(--color-surface-tint);
+  /* Icon tint for the active nav row — not a full fill, so
+     --sidebar-active-bg/text above stay the "you're here" pill and
+     this just adds a distinct accent on top. Reuses --sidebar-active-
+     text rather than its own color, so the accent never drifts out of
+     sync with the text it's paired with. No left border (removed —
+     read as a stray dark mark down the row on top of the pill). */
+  --sidebar-active-icon: var(--sidebar-active-text);
+  --sidebar-rail-bg: var(--color-background-card);
+
+  /* Every left-hand nav rail in an app sharing this one width instead
+     of each picking its own. */
+  --sidebar-width: 240px;
+  --sidebar-width-collapsed: 64px;
+  --sidebar-height: calc(100vh - var(--header-height));
+
+  /* Three content widths, not one — simple field-only forms (Credit
+     Memos, Settings CRUD, ...), structured views with a sidebar or grid
+     (Dashboard, Customer/Vendor forms, Modules), and line-item-heavy
+     documents (Invoices, Purchase Orders, ...) don't read well at the
+     same width. Every page that opts into one of these also centers via
+     margin: 0 auto (see .record-form-layout > form, .wide-form-layout >
+     form, .dashboard-page-content, .settings-layout-content below) —
+     instead of each page picking its own guess at either. */
+  --page-width-small: 800px;
+  --page-width-medium: 1152px;
+  --page-width-large: 1600px;
+
+  color-scheme: light dark;
+}
+
+/* Dark theme — overrides every color/status/banner/sidebar/shadow
+   variable declared in :root above. Shape tokens (radius, spacing,
+   type, motion) are theme-invariant and not repeated here. */
+[data-theme="dark"] {
+  /* Three-step dark surface ladder: sidebar/chrome sits deliberately
+     below the page canvas (true black, a distinct chrome rail rather
+     than "just another card"), page canvas sits below the card, card
+     sits below the hover/tint tier. Modest steps between each (not a
+     dramatic jump) plus real borders is what keeps a dark theme
+     reading crisp instead of washed out — see --color-border below. */
+  --color-background-global: #121214;
+  --color-background-card: #1b1b1f;
+  --color-surface-tint: #232328;
+  --color-input: var(--color-background-card);
+  /* Not pure white — pure white text on a near-black surface causes
+     halation (a glow/vibrate effect on the eye over long sessions).
+     ~92% white instead. */
+  --color-text-primary: #e9e9ec;
+  /* ~7:1 on card */
+  --color-text-secondary: #9c9da5;
+  /* ~4.7:1 on card — was #5f6b7c at 2.7:1, failing AA body text */
+  --color-text-muted: #7e7f87;
+  /* Derived from text-primary's own RGB (233,233,236) — same
+     single-source-of-truth reasoning as :root's own --color-border. */
+  --color-border: rgba(233, 233, 236, 0.09);
+  --color-border-strong: rgba(233, 233, 236, 0.16);
+  --color-hover: var(--color-surface-tint);
+
+  /* Brighter counterparts of :root's accent set — a dark badge fill
+     needs a light/saturated text color for contrast, the mirror image
+     of light mode's dark-on-pale text. Same 8 hues, same tier mapping,
+     just the dark-theme-appropriate shade of each. Reuses
+     --color-text-primary rather than its own literal hex, same
+     reasoning as :root's own --accent-slate. */
+  --accent-slate: var(--color-text-primary);
+  --accent-violet: #d4ccff;
+  --accent-amber: #ffc879;
+  --accent-bronze: #ffab73;
+  --accent-blue: #4188ff;
+  --accent-cyan: #91d0ff;
+  --accent-mint: #2ced83;
+  --accent-fuchsia: #ff9dbd;
+
+  /* Near-white fill for the primary action, with dark ink text. Reuses
+     --color-text-primary (not its own literal hex) so the button fill
+     is exactly the same "white ink" as body text — same reasoning as
+     :root's own --color-brand. */
+  --color-brand: var(--color-text-primary);
+  --color-brand-hover: color-mix(in srgb, var(--color-brand) 90%, black);
+  --color-brand-active: color-mix(in srgb, var(--color-brand) 75%, black);
+  --color-brand-text: #121212;
+
+  --shadow-btn-primary: none;
+  --shadow-btn-secondary: none;
+
+  --color-secondary-fill: var(--color-surface-tint);
+  --color-secondary-border: var(--color-border-strong);
+  --color-secondary-text: var(--color-text-primary);
+  --color-secondary-hover: color-mix(in srgb, white 6%, var(--color-secondary-fill));
+
+  --color-destructive-fill: #a30a24;
+  --color-destructive-hover: #c70a24;
+  --color-destructive-text: #ffffff;
+
+  --color-warning: var(--accent-amber);
+  /* Sits between warning and danger — see :root's --color-critical. */
+  --color-critical: #ffa057;
+  --color-danger: #f78086;
+  --color-success: var(--accent-mint);
+
+  --status-draft-text: var(--accent-slate);
+  --status-draft-bg: #2a2d2f;
+  --status-backordered-text: var(--accent-violet);
+  --status-backordered-bg: #35294a;
+  --status-low-stock-text: var(--accent-amber);
+  --status-low-stock-bg: #43380f;
+  --status-critical-stock-text: var(--color-critical);
+  --status-critical-stock-bg: #4a3010;
+  --status-out-of-stock-text: var(--accent-bronze);
+  --status-out-of-stock-bg: #4a2c14;
+  --status-partially-fulfilled-text: var(--accent-blue);
+  --status-partially-fulfilled-bg: #1c2c4a;
+  --status-shipped-text: var(--accent-cyan);
+  --status-shipped-bg: #103846;
+  --status-delivered-text: var(--accent-mint);
+  --status-delivered-bg: #163c22;
+  --status-cancelled-text: var(--accent-fuchsia);
+  --status-cancelled-bg: #472233;
+  --status-overdue-text: var(--color-danger);
+  --status-overdue-bg: #452023;
+
+  --banner-warning-bg: #412d00;
+  --banner-warning-border: var(--color-warning);
+  --banner-danger-bg: #5f0716;
+  --banner-danger-border: var(--color-danger);
+  --banner-success-bg: #073630;
+  --banner-success-border: var(--color-success);
+
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+
+  /* Deliberately NOT --color-background-card — the sidebar is now a
+     distinct chrome rail, true black, sitting a full step below the
+     page canvas rather than matching the card surface. Common
+     enterprise-dark-theme pattern (VS Code's activity bar, Slack's
+     rail): the frame reads as structurally separate from content. */
+  --sidebar-bg: #000000;
+  --sidebar-text: var(--color-text-primary);
+  --sidebar-text-muted: var(--color-text-muted);
+  /* Two distinct white-overlay intensities on top of --sidebar-bg —
+     hover lighter, active a touch stronger — so the current page's row
+     still reads as visibly different from a row you're just passing
+     the cursor over. */
+  --sidebar-active-bg: color-mix(in srgb, white 7%, transparent);
+  --sidebar-active-text: var(--color-text-primary);
+  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
+  --sidebar-active-icon: var(--sidebar-active-text);
+  --sidebar-rail-bg: #000000;
+
+  color-scheme: dark;
+}
+
+/* Explicit light theme — identical to :root's defaults. Exists so a
+   subtree can force light mode (print pages) and win over an
+   ancestor's [data-theme="dark"]: CSS custom-property resolution
+   takes the nearest declaration in the tree, so relying on :root
+   alone would lose to a dark attribute set higher up. */
+[data-theme="light"] {
+  --color-background-global: #f6f7f9;
+  --color-background-card: #ffffff;
+  --color-surface-tint: #eef0f3;
+  --color-input: #fdfdfd;
+  --color-text-primary: #1c2127;
+  --color-text-secondary: #56606f;
+  --color-text-muted: #6b7684;
+  --color-border: rgba(28, 33, 39, 0.1);
+  --color-border-strong: rgba(28, 33, 39, 0.2);
+  --color-hover: var(--color-surface-tint);
+
+  --color-brand: var(--color-text-primary);
+  --color-brand-hover: color-mix(in srgb, var(--color-brand) 85%, black);
+  --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
+  --color-brand-text: #ffffff;
+
+  --shadow-btn-primary: none;
+  --shadow-btn-secondary: none;
+
+  --color-secondary-fill: var(--color-surface-tint);
+  --color-secondary-border: var(--color-border-strong);
+  --color-secondary-text: var(--color-text-primary);
+  --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
+
+  --color-destructive-fill: #c70a24;
+  --color-destructive-hover: #a30a24;
+  --color-destructive-text: #ffffff;
+
+  --color-warning: #8a6600;
+  --color-critical: #a83c00;
+  --color-danger: #c70a24;
+  --color-success: #047b5d;
+
+  --status-draft-text: var(--accent-slate);
+  --status-draft-bg: #f0f4f9;
+  --status-backordered-text: var(--accent-violet);
+  --status-backordered-bg: #f7ecfe;
+  --status-low-stock-text: var(--accent-amber);
+  --status-low-stock-bg: #ffd289;
+  --status-critical-stock-text: var(--color-critical);
+  --status-critical-stock-bg: #ffe0c2;
+  --status-out-of-stock-text: var(--accent-bronze);
+  --status-out-of-stock-bg: #ffede1;
+  --status-partially-fulfilled-text: var(--accent-blue);
+  --status-partially-fulfilled-bg: #e7f2ff;
+  --status-shipped-text: var(--accent-cyan);
+  --status-shipped-bg: #92e5ff;
+  --status-delivered-text: var(--accent-mint);
+  --status-delivered-bg: #ddf8d8;
+  --status-cancelled-text: var(--accent-fuchsia);
+  --status-cancelled-bg: #ffcbda;
+  --status-overdue-text: var(--color-danger);
+  --status-overdue-bg: #ffecee;
+
+  --banner-warning-bg: #fff1e3;
+  --banner-warning-border: var(--color-warning);
+  --banner-danger-bg: #fee8eb;
+  --banner-danger-border: var(--color-danger);
+  --banner-success-bg: #cdfed4;
+  --banner-success-border: #047b5d;
+
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+
+  --sidebar-bg: var(--color-background-card);
+  --sidebar-text: #1c2127;
+  --sidebar-text-muted: #5f6b7c;
+  --sidebar-active-bg: var(--color-surface-tint);
+  --sidebar-active-text: #1c2127;
+  --sidebar-hover-bg: var(--color-surface-tint);
+  --sidebar-active-icon: var(--sidebar-active-text);
+  --sidebar-rail-bg: var(--color-background-card);
+
+  color-scheme: light;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Thin, understated scrollbar rather than the browser's default chunky
+   one. Applied globally (Firefox's two-value shorthand + WebKit's pseudo-elements)
+   rather than per scroll container, since scrollable areas exist
+   throughout an app and should all read the same way. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: var(--radius-full);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+  background-clip: padding-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  font-size: var(--text-base);
+  line-height: 1.54;
+  background: var(--color-background-global);
+  color: var(--color-text-primary);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1 {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: 24px;
+  letter-spacing: -0.01em;
+}
+
+h2 {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.01em;
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-medium);
+}
+
+p {
+  margin: 0;
+}
+
+/* Inline semantic emphasis (<strong>/<b> used mid-sentence in body
+   copy) deliberately stays regular weight — unrelated to any heading/
+   value hierarchy, which uses the --font-weight-* tokens on purpose.
+   The browser's UA stylesheet bolds these by default regardless of any
+   class applied, so it's the one place a plain CSS rule (not a token)
+   is needed to actually reach them. Keeps the tag's semantic meaning
+   (screen readers still announce emphasis); only the visual weight
+   changes. */
+strong,
+b {
+  font-weight: 400;
+}
+
+a {
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+a:focus-visible {
+  outline: 1.5px dashed var(--color-brand);
+  outline-offset: 4px;
+  border-radius: var(--radius-full);
+}
+
+/* Table-cell identity links (item name, PO number, ...) go semibold on
+   hover instead of the row itself tinting. Weight rather than
+   underline, reserved for hover specifically (not the persistent
+   "you're on this page" signal a nav rail's [aria-current="page"] uses
+   semibold for too), so there's no confusion between a row you're
+   pointing at and one you're actually on. Scoped to table cells only,
+   not every <a> in an app (nav links, card links, etc. keep their own
+   existing hover treatments). */
+td a:hover {
+  font-weight: var(--font-weight-semibold);
+}
+
+label {
+  font-size: var(--text-sm);
+  font-weight: 400;
+}
+
+/* Primary action — highest-contrast neutral fill (--color-brand),
+   paired text color (--color-brand-text). */
+button {
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+  font-size: var(--text-base);
+  font-weight: 400;
+  background: var(--color-brand);
+  color: var(--color-brand-text);
+  box-shadow: var(--shadow-btn-primary);
+  transition:
+    transform 0.05s ease,
+    background 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+button:hover {
+  background: var(--color-brand-hover);
+}
+
+button:active {
+  background: var(--color-brand-active);
+  transform: scale(0.97);
+}
+
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* A full-width toggle button (e.g. a collapsible card's header) spans
+   the whole card width (title left, chevron far right) — the global
+   button:active scale(0.97) above shrinks toward the button's center,
+   which barely moves title text near that center but visibly yanks a
+   far-edge chevron sideways on every click, reading as a "shake".
+   Full-width toggles don't need a pressed-scale cue the way compact
+   pill buttons do. */
+.collapsible-card-toggle:active {
+  transform: none;
+}
+
+button:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
+}
+
+/* Secondary action — white fill with the same layered-inset "3D"
+   bevel as the primary button, rather than a flat border. Use for
+   "Cancel" next to a primary "Save"/"Create" so the two don't compete
+   for the same visual weight.
+
+   Repeats the shape/typography properties from the bare `button {}`
+   rule above (rather than only overriding color/shadow and relying on
+   inheriting the rest) so this still renders correctly on a non-
+   <button> element carrying the class — an <a> styled as a secondary
+   button gets none of the bare `button` selector's box model
+   otherwise, and renders as an unpadded, unshaped sliver of color. */
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+  font-size: var(--text-base);
+  font-weight: 400;
+  background: var(--color-secondary-fill);
+  color: var(--color-secondary-text);
+  box-shadow: var(--shadow-btn-secondary);
+  text-decoration: none;
+}
+
+.btn-secondary:hover {
+  background: var(--color-secondary-hover);
+  opacity: 1;
+}
+
+/* Destructive action — irreversible operations only (delete, void,
+   permanently remove). Not the default for every "Delete" button in
+   an app; opt in per call site where the action truly can't be
+   undone. Same self-contained-shape reasoning as .btn-secondary above. */
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+  font-size: var(--text-base);
+  font-weight: 400;
+  background: var(--color-destructive-fill);
+  /* Bare button{} above defaults every <button> to box-shadow:
+     var(--shadow-btn-primary), a layered bevel built around
+     --color-brand — on a red fill that shows up as a mismatched
+     black/white-ish ring instead of blending in. Flat, no bevel. */
+  box-shadow: none;
+  color: var(--color-destructive-text);
+  text-decoration: none;
+}
+
+.btn-danger:hover {
+  background: var(--color-destructive-hover);
+}
+
+input,
+select,
+textarea {
+  font: inherit;
+  width: 100%;
+  padding: 7px 10px;
+  margin-top: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-input);
+  color: var(--color-text-primary);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* The browser's native select arrow renders at its own baseline/size
+   per-OS (a mismatched-color chevron and off-center text) —
+   appearance:none strips it entirely and this draws a fixed, always-
+   centered replacement instead. line-height:normal plus equal top/
+   bottom padding is what actually centers the selected value; the
+   native arrow's box was throwing that off by consuming space
+   asymmetrically. The open option list itself stays OS-native — no
+   browser lets CSS reach inside it. */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  line-height: normal;
+  padding-right: 32px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23727676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+/* Focus state: just the field's own border switching to brand color —
+   no outline ring outside the field's edge (an outline-offset ring
+   there used to double up as a second, floating rectangle around the
+   input instead of reading as one focused box). */
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--color-brand);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  color: color-mix(in srgb, var(--color-text-muted) 40%, transparent);
+  background: color-mix(in srgb, var(--color-surface-tint) 50%, transparent);
+  cursor: not-allowed;
+}
+
+/* Redraws the custom arrow after the disabled rule above's `background`
+   shorthand clears it (shorthand always wins over the plain select
+   rule's background-image, regardless of source order otherwise). */
+select:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23c4c7c5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+/* Checkboxes/radios are native controls, not text fields — the width:100%
+   above would stretch them full-width, and without an explicit
+   accent-color they render in the browser's own default blue instead
+   of this palette's own neutral --color-brand. */
+input[type="checkbox"],
+input[type="radio"] {
+  width: auto;
+  accent-color: var(--color-brand);
+}
+
+/* Shadow-based elevation, plus a hairline border — the card surface
+   and page canvas are close enough in lightness that shadow alone
+   doesn't read as a distinct edge, so the border carries definition
+   while the shadow carries depth. */
+.card {
+  background: var(--color-background-card);
+  border: 0.5px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 16px;
+}
+
+/* A card whose entire content is a table — no inset padding, so the
+   table's own row/column lines run edge-to-edge to the card's outer
+   border instead of floating inside a padded frame. overflow: hidden
+   clips the table's square corners to the card's rounded ones (without
+   it, a header cell's background or a hovered row can square-corner
+   past the border-radius at the very first/last row). */
+.card-table {
+  padding: 0;
+  overflow: hidden;
+}
+
+/* For a table embedded alongside other content in the same card (a
+   detail page's header/notes text above a line-items table, say) —
+   bleeds the table out to the card's own edges so it still reaches
+   edge-to-edge like .card-table does, without stripping padding from
+   the text around it. Matches the standard 16px .card padding, so
+   this bleed calculation and a card's own padding never drift apart. */
+.table-bleed {
+  width: calc(100% + 32px);
+  margin: 0 -16px;
+}
+
+.login-footer {
+  position: absolute;
+  bottom: 28px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+/* Full-page, single-column shell for every auth screen (Login, Signup,
+   AuthCallback, invite completion, OTP entry, ...) across every app —
+   the wordmark sits above the card, both centered on the page. */
+.auth-page {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 56px;
+  padding: 24px;
+  background: var(--color-background-global);
+}
+
+.auth-wordmark-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-wordmark {
+  height: 28px;
+  width: auto;
+}
+
+/* Light theme (the default — no [data-theme] override needed) shows
+   the dark-text wordmark; dark theme flips to the white-text one. */
+.auth-wordmark-dark {
+  display: none;
+}
+
+:root[data-theme="dark"] .auth-wordmark-light {
+  display: none;
+}
+
+:root[data-theme="dark"] .auth-wordmark-dark {
+  display: block;
+}
+
+.auth-page .login-footer {
+  position: absolute;
+  bottom: 24px;
+}
+
+/* Refined form chrome for auth screens — a small-caps label style and
+   taller, tinted inputs (Linear/Stripe-style), scoped to .login-form
+   rather than touching the app-wide input/label rules every other form
+   relies on. */
+.login-form label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  margin-bottom: 6px;
+}
+
+.login-form input {
+  height: 42px;
+  padding: 0 14px;
+  margin-top: 0;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-tint);
+  /* A visible border regardless of theme — in light mode,
+     --color-surface-tint sits just a couple shades off
+     --color-background-card, so a borderless input was nearly
+     invisible against the card until focused. */
+  border-color: var(--color-border);
+}
+
+.login-form input:focus {
+  background: var(--color-input);
+  border-color: var(--color-border-strong);
+}
+
+/* Every button in the auth forms — not just the submit button — so a
+   plain .btn-secondary (e.g. "Continue with Google"), whose base
+   padding makes it noticeably thinner than the submit button, matches. */
+.login-form button {
+  height: 44px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-md);
+  letter-spacing: 0.01em;
+}
+
+/* Create-form layout wrapper — a create form's outer container. */
+.record-form-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+/* Capped, NOT centered — small by default, the right width for a plain
+   field-only form (Credit Memos, Vendor Payments, most Settings CRUD
+   pages, ...). Flush left, same edge as the page's own <h2> title (a
+   separate sibling outside this box) and the same edge every list page
+   (.reports-layout-content/.settings-layout-content) already starts
+   from — centering via margin:0 auto instead used to drift this box's
+   left edge away from both of those, and away from itself between a
+   wide table and a two-field form, reading as content jumping around
+   from page to page instead of a page that's simply narrower. */
+.record-form-layout > form {
+  flex: 1;
+  min-width: 0;
+  max-width: var(--page-width-small);
+}
+
+/* Structured forms that need more room than a plain field list but
+   aren't a line-item document — a sidebar panel (Customer/Vendor +
+   Notes/Tags) or a longer component list (Builds). Opt in with both
+   classes: className="record-form-layout medium-form-layout". */
+.record-form-layout.medium-form-layout > form {
+  max-width: var(--page-width-medium);
+}
+
+/* Wide-table document forms (Invoices, Purchase Orders, Sales Orders,
+   ...) need more room than --page-width-medium for their line-items
+   table, but a truly unbounded max-width stretches those rows into
+   awkward proportions on an ultra-wide monitor — capped generously
+   instead, still full-bleed on any normal screen. Flush left, same
+   reasoning as .record-form-layout > form above. */
+.wide-form-layout > form {
+  max-width: var(--page-width-large);
+}
+
+.wide-form-layout .party-form-columns {
+  max-width: none;
+  margin: 0;
+}
+
+/* Collapsible accordion sections — a plain chevron that rotates open
+   instead of the browser's own disclosure-triangle marker. */
+.form-section-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-weight: 400;
+  padding: 8px 0;
+  user-select: none;
+  list-style: none;
+}
+
+.form-section-summary::-webkit-details-marker {
+  display: none;
+}
+
+.form-section-chevron {
+  flex-shrink: 0;
+  opacity: 0.55;
+  transition: transform 0.15s ease;
+}
+
+.form-section[open] > .form-section-summary .form-section-chevron {
+  transform: rotate(90deg);
+}
+
+a.card {
+  display: block;
+  /* A card-styled link is a clickable surface, not inline text — it
+     shouldn't inherit link-blue for its whole contents (every stat
+     number/label inside a dashboard tile would otherwise render blue). */
+  color: var(--color-text-primary);
+  text-decoration: none;
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease,
+    border-color 0.15s ease;
+}
+
+a.card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border-strong);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+
+/* ---------------------------------------------------------------- */
+/* Modal (item picker, etc.)                                          */
+/* ---------------------------------------------------------------- */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(26, 26, 26, 0.45);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 60px 16px;
+  z-index: var(--z-modal);
+}
+
+.modal-panel {
+  background: var(--color-background-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  max-width: 640px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-panel-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.modal-panel-header input {
+  flex: 1;
+  margin-top: 0;
+}
+
+.modal-panel-body {
+  overflow-y: auto;
+  padding: 0;
+}
+
+.modal-panel-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}