/* GENERATED from tokens.json by build.mjs — do not edit by hand. Cartendi design tokens. Run `node build.mjs` after changing tokens.json. */ :root { --color-primary: #1E4B3A; /* Forest. */ --color-primary-hover: #143327; --color-primary-quiet: #E7EFEA; /* Wash behind a selected or active thing: a set filter pill, the Aggregated column, a highlighted row. */ --color-on-primary: #FFFFFF; --color-secondary: #40473F; /* Text and icon color of secondary buttons. */ --color-tertiary: #1E4B3A; /* Text-only buttons. */ --color-bg: #FBF9F4; /* Page ground, warm sand. */ --color-surface: #FFFFFF; /* Cards, rows, inputs. */ --color-surface-sunken: #F4F1E8; /* Table headers, disabled controls, chips. */ --color-surface-hover: #F7F4EC; --color-text: #16150F; /* Primary text. */ --color-text-secondary: #57534A; /* Meta lines, labels, help. */ --color-text-disabled: #8C8779; /* Disabled labels and placeholders. */ --color-text-on-dark: #F2EFE6; --color-border-subtle: #EDE8DC; /* Decorative table hairline between rows. */ --color-border: #DAD2C0; /* Block and card separation. */ --color-border-strong: #938A74; /* The edge of a control — input, select, chip, filter pill, secondary button. */ --color-error: #B3261E; /* Fixed meaning: it was tried and it did not happen. */ --color-error-bg: #FCEFEE; --color-on-error: #FFFFFF; /* Text on the error color: the 9+ badge and the destructive button. */ --color-warning: #8A5300; /* Fixed meaning: something affects you but nothing is broken. */ --color-warning-bg: #FDF3E2; --color-success: #1B6B34; /* Fixed meaning: done. */ --color-success-bg: #EBF5EE; --color-info: #1B4F8A; /* Fixed meaning: neutral news. */ --color-info-bg: #EBF2FA; --color-focus: #1E4B3A; /* Focus ring. */ --color-customer-green: #22A046; --color-customer-green-ring: #167631; --color-customer-red: #C61D1C; --color-customer-red-ring: #921110; --color-customer-yellow: #F5C500; /* 1.63:1 against white on its own — invisible without its ring, which is why every dot has one. */ --color-customer-yellow-ring: #A28200; --color-customer-blue: #1A73E8; --color-customer-blue-ring: #0C52AD; --color-customer-orange: #F2810F; --color-customer-orange-ring: #B55D05; --color-customer-violet: #7B2FD4; --color-customer-violet-ring: #581C9E; --color-customer-pink: #EF73BA; /* Lightened from the canonical #EA4A9D so it does not collapse into gray for a deuteranope. */ --color-customer-pink-ring: #EB148F; --color-customer-brown: #8B5A2B; --color-customer-brown-ring: #66411D; --color-customer-gray: #8E8E8E; --color-customer-gray-ring: #666666; --color-customer-none-ring: #938A74; /* RF-CUST-13 'transparent' = no color: a hollow ring. */ --color-row-editing-bg: #FDF3E2; /* A row held in edit by the other partner (RF-CRM-08). */ --color-row-deleted-bg: #F7F2EF; /* A saved row marked for delete until Save (RF-CRM-19). */ --color-row-highlight-bg: #E7EFEA; /* 'That item is already in this order' (RF-ORD-06). */ --color-scrim: rgba(22, 21, 15, 0.45); /* The veil behind a dialog. */ --nav-bg: #14261F; /* The bottom menu is dark. */ --nav-fg: #A9B3A9; /* 7.32:1 on the bar. */ --nav-fg-active: #FFFFFF; --nav-active-bg: #2C4A3B; --nav-border: transparent; --nav-height: 64px; /* Seven cells across the 360px floor are 51.4px each; the height is what gets each target past the 44px minimum. */ --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* Every piece of interface text. */ --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Every figure. */ --font-stretch-table: 100%; /* Plex Sans has no width axis; kept as a token so a future face with one can narrow tables here. */ --num-group-tighten: -0.4em; /* Pulls in the thousands separator inside a figure. */ --size-screen-title: 25px; --size-block-title: 15px; --size-body: 16px; /* 16px, not 15: Plex Sans has a low x-height (0.516), and inputs at 16px stop iOS from zooming the page on focus. */ --size-table: 14px; --size-table-head: 12px; --size-label: 12px; --size-help: 13px; --size-chip: 13px; --size-badge: 11px; --size-amount: 16px; --size-amount-total: 18px; --size-amount-result: 21px; --size-button: 16px; --size-touch-min: 44px; /* WCAG 2.2 SC 2.5.8 asks for 24px; 44px is the floor here because the product is used standing, one-handed. */ --size-touch-row: 48px; /* Actions inside a list row, where a mis-tap opens the wrong order. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; /* Titles and amounts. */ --leading-normal: 1.45; /* Body text and table cells. */ --leading-loose: 1.55; /* Help text and messages. */ --tracking-caps: 0.05em; /* Column headers, which are set in capitals. */ --text-screen-title: var(--weight-bold) var(--size-screen-title)/var(--leading-tight) var(--font-ui); /* The title in the fixed top bar of every screen: Orders, Add Order, Summary. */ --text-block-title: var(--weight-bold) var(--size-block-title)/var(--leading-tight) var(--font-ui); /* The heading of a block inside a screen: Customer, Products, Costs. */ --text-body: var(--weight-regular) var(--size-body)/var(--leading-normal) var(--font-ui); /* Running text, list row main lines, field values. */ --text-table-head: var(--weight-bold) var(--size-table-head)/var(--leading-tight) var(--font-ui); /* Column headers, in capitals with tracking.caps. */ --text-table-cell: var(--weight-regular) var(--size-table)/var(--leading-normal) var(--font-ui); /* Text in a data table. */ --text-amount: var(--weight-semibold) var(--size-amount)/var(--leading-tight) var(--font-num); /* Money in a list row or a table cell. */ --text-amount-total: var(--weight-bold) var(--size-amount-total)/var(--leading-tight) var(--font-num); /* Sales Total, Costs Total, subtotal lines of the profit and loss. */ --text-amount-result: var(--weight-bold) var(--size-amount-result)/var(--leading-tight) var(--font-num); /* The Result line of Summary, and nothing else. */ --text-label: var(--weight-semibold) var(--size-label)/var(--leading-tight) var(--font-ui); /* The name above a field: Customer ID, Shipping Address. */ --text-help: var(--weight-regular) var(--size-help)/var(--leading-loose) var(--font-ui); /* Help under a control, meta lines of a row, message bodies. */ --text-button: var(--weight-semibold) var(--size-button)/var(--leading-tight) var(--font-ui); /* Button labels, in Title Case (RF-CRM-25). */ --text-chip: var(--weight-semibold) var(--size-chip)/1 var(--font-ui); /* The order status chip. */ --text-badge: var(--weight-bold) var(--size-badge)/1 var(--font-num); /* The unread count on the bell: 1 to 9, then '9+'. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* The page gutter on a phone. */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --radius-sm: 6px; /* Chips, cell inputs. */ --radius-md: 8px; /* Buttons, inputs, filter pills. */ --radius-lg: 10px; /* Cards and dialogs. */ --radius-pill: 999px; /* The customer dot and the badge only. */ --shadow-card: none; /* No elevation on content: structure is drawn with borders, which survive a phone held in the sun; shadows do not. */ --shadow-menu: none; --shadow-dialog: 0 10px 28px rgba(22, 21, 15, 0.22); /* Only things that float above everything else get a shadow. */ --shadow-toast: 0 5px 18px rgba(22, 21, 15, 0.20); --shadow-sticky-column: 3px 0 6px rgba(0, 0, 0, 0.05); /* On the pinned first column of a table that scrolls sideways: the shadow is what says more columns continue past the edge. */ --shadow-sticky-row: 0 -6px 10px rgba(0, 0, 0, 0.06); /* On a row pinned to the bottom of a table: says the rows above are passing beneath it, not being cut off. */ --border-card: 1px solid var(--color-border); --border-menu-top: none; --focus-width: 2px; --focus-offset: 2px; --control-height: 46px; /* Inputs, selects and buttons. */ --row-list: 58px; /* A list row on a phone: two lines, what and who. */ --row-table: 42px; --row-table-desktop: 36px; --chrome-title: 50px; /* RF-CRM-22 fixes the title, the footer actions and the bottom menu. */ --chrome-actions: 58px; --chrome-stalebar: 68px; /* The stale-list bar (RF-MAIN-07): its button's 44px plus padding. */ --dot-size: 13px; --dot-ring: 1.5px; --duration-instant: 90ms; /* A control changing state. */ --duration-fast: 160ms; /* A toast arriving, a dropdown opening. */ --duration-slow: 240ms; /* A dialog opening. */ --duration-success-dialog: 2000ms; /* RF-CRM-18: the success dialog closes itself after 2s, with the countdown (2) (1) (0) visible. */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --breakpoint-floor: 360px; /* RNF-11: the narrowest width the product is guaranteed at. */ --breakpoint-phone: 480px; /* Two columns of fields start to fit. */ --breakpoint-tablet: 600px; /* Wider gutters. */ --breakpoint-desktop: 900px; /* Tables stop needing to scroll sideways; the Summary shows every column. */ } /* Defined, contrast-checked, NOT shipped in v1. It applies only when an element carries data-theme="dark" — never from the device's prefers-color-scheme, or every partner with a phone in dark mode would get a theme no screen has been designed for. */ [data-theme="dark"] { --color-primary: #86C7A6; --color-primary-hover: #A1D6BA; --color-primary-quiet: #1F3329; --color-on-primary: #0B1A12; --color-secondary: #D7D3C8; --color-tertiary: #86C7A6; --color-bg: #121511; --color-surface: #1A1E18; --color-surface-sunken: #151813; --color-surface-hover: #21261F; --color-text: #ECE9DF; --color-text-secondary: #B3AEA0; --color-text-disabled: #858174; --color-text-on-dark: #ECE9DF; --color-border-subtle: #262B23; --color-border: #343A30; --color-border-strong: #7B8271; --color-error: #F28B82; --color-error-bg: #3A1D1B; --color-on-error: #2A0E0C; --color-warning: #F2B45A; --color-warning-bg: #3A2C14; --color-success: #7CCB91; --color-success-bg: #19301F; --color-info: #8AB4F8; --color-info-bg: #172A40; --color-focus: #86C7A6; --color-customer-green-ring: #4FC06E; --color-customer-red-ring: #E8615F; --color-customer-yellow-ring: #F5C500; --color-customer-blue-ring: #5C9BF0; --color-customer-orange-ring: #F59A45; --color-customer-violet-ring: #A879E8; --color-customer-pink-ring: #F59BCD; --color-customer-brown-ring: #B98655; --color-customer-gray-ring: #ABABAB; --color-customer-none-ring: #7B8271; --color-row-editing-bg: #3A2C14; --color-row-deleted-bg: #2A2220; --color-row-highlight-bg: #1F3329; --color-scrim: rgba(0, 0, 0, 0.60); --nav-bg: #0D100C; --nav-fg: #A9B3A9; --nav-fg-active: #FFFFFF; --nav-active-bg: #22362B; }