/* ============================================================================ SARP DESIGN TOKENS The single source of colour, type, spacing and elevation for every SARP product (POS, HRMC, ECommerce, MIS). Two layers, and the distinction matters: 1. PRIMITIVES (--sarp-n-*, --sarp-brand-*, --sarp-ok-* ...) Raw values. A ramp. Components must NEVER reference these directly. 2. SEMANTICS (--sarp-surface, --sarp-action, --sarp-text-muted ...) What a thing is FOR. Components reference only these. A product changes its identity by remapping semantics, not by inventing new hex codes. That is what keeps four separate applications looking related. Rule: no hex literal belongs in any file other than this one. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1 · PRIMITIVES --------------------------------------------------------------------- */ /* Neutral ramp - warm-biased, one family. Warm because the brand is orange; a cool grey next to orange reads dirty. */ --sarp-n-0: #FFFFFF; --sarp-n-25: #FAF9F7; --sarp-n-50: #F6F5F3; --sarp-n-100: #F0EEEA; --sarp-n-200: #E4E2DE; --sarp-n-300: #D8D5D0; --sarp-n-400: #B4AFA7; --sarp-n-500: #626E73; --sarp-n-600: #4E5D63; --sarp-n-700: #33424A; --sarp-n-800: #243036; --sarp-n-850: #1F2A2E; --sarp-n-900: #1C2529; /* Brand - the only saturated orange in the product. #A34A00 passes 4.5:1 on white, which #E3810D (the old value) did not. */ --sarp-brand-tint: #FFF4EA; --sarp-brand-tint-2: #FFE6D1; --sarp-brand-edge: #FFB15F; --sarp-brand: #A34A00; --sarp-brand-on-tint: #8A3E00; --sarp-brand-hover: #863D00; --sarp-brand-pressed: #6D3100; /* Semantic status - separate from action colour, never used on buttons. */ --sarp-ok: #1F5B33; --sarp-ok-tint: #EAF3ED; --sarp-ok-border: #BCD9C7; --sarp-warn: #7A4B08; --sarp-warn-tint: #FDF1DC; --sarp-warn-border: #E8D0A2; --sarp-warn-mark: #B8791B; --sarp-danger: #9B2318; --sarp-danger-tint: #FBEDEB; --sarp-danger-border: #E5C9C5; --sarp-info: #1B4E6B; --sarp-info-tint: #E9F1F5; --sarp-info-border: #C2D7E2; /* --------------------------------------------------------------------- 2 · SEMANTICS - the only names components may use --------------------------------------------------------------------- */ /* Surfaces */ --sarp-page: var(--sarp-n-50); --sarp-surface: var(--sarp-n-0); --sarp-surface-sunk: var(--sarp-n-25); --sarp-surface-alt: var(--sarp-n-100); --sarp-surface-dark: var(--sarp-n-850); /* Text */ --sarp-text: var(--sarp-n-900); --sarp-text-strong: var(--sarp-n-900); --sarp-text-body: var(--sarp-n-700); --sarp-text-muted: var(--sarp-n-600); --sarp-text-faint: var(--sarp-n-500); --sarp-text-on-dark: var(--sarp-n-0); /* Lines */ --sarp-border: var(--sarp-n-200); --sarp-border-strong: var(--sarp-n-300); --sarp-border-input: var(--sarp-n-300); --sarp-divider: var(--sarp-n-100); /* Action - remap these three to re-skin a whole product */ --sarp-action: var(--sarp-brand); --sarp-action-hover: var(--sarp-brand-hover); --sarp-action-pressed: var(--sarp-brand-pressed); --sarp-action-text: var(--sarp-n-0); --sarp-action-tint: var(--sarp-brand-tint); --sarp-action-on-tint: var(--sarp-brand-on-tint); --sarp-action-edge: var(--sarp-brand-edge); /* Chrome - header, nav, mega menu */ --sarp-chrome: var(--sarp-brand); --sarp-chrome-hover: var(--sarp-brand-hover); --sarp-chrome-text: var(--sarp-n-0); --sarp-chrome-faint: var(--sarp-brand-tint-2); /* Data grid */ --sarp-grid-head: var(--sarp-n-600); --sarp-grid-head-text: var(--sarp-n-0); --sarp-grid-row-alt: var(--sarp-n-25); --sarp-grid-row-hover: var(--sarp-n-50); --sarp-grid-row-select: var(--sarp-brand-tint); /* --------------------------------------------------------------------- 3 · TYPE - Inter, one family, weights 400/500/600/700 only. No 800 or 900: nothing in an admin UI needs that much weight, and it is what makes the current screens read as shouty. --------------------------------------------------------------------- */ --sarp-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --sarp-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace; /* Scale rebuilt to web-standard sizes. The previous scale topped out at 12.5px body / 11.5px data, roughly two steps below what a browser renders by default, and read as cramped on anything larger than a phone. 16px is the web baseline; an operational UI can sit one step under at 14px without straining, and a counter screen viewed at arm's length needs at least that. Nothing here is below 12px. */ --sarp-fs-page-title: 22px; /* h1 - page name */ --sarp-fs-section: 15px; /* h2 - card / section heading, nav parent */ --sarp-fs-metric: 26px; /* stat tile number */ --sarp-fs-body: 14px; /* default UI text, buttons, nav */ --sarp-fs-label: 12.5px; /* form label */ --sarp-fs-data: 13px; /* grid cell */ --sarp-fs-caption: 12px; /* hint, secondary line */ --sarp-fs-eyebrow: 11px; /* uppercase kicker */ /* One transition speed for the whole system: fast enough for a till, slow enough to read as intentional. */ --sarp-motion: 140ms ease; /* uppercase kicker */ --sarp-fw-regular: 400; --sarp-fw-medium: 500; --sarp-fw-semi: 600; --sarp-fw-bold: 700; --sarp-ls-eyebrow: .09em; --sarp-ls-title: -.018em; --sarp-lh: 1.55; /* Control height follows the type. 32px was sized for 12.5px text; at 14px it crowds, and a tablet till wants a bigger touch target. */ --sarp-control-h: 38px; --sarp-control-h-sm: 32px; /* --------------------------------------------------------------------- 4 · RADIUS --------------------------------------------------------------------- */ --sarp-r-control: 5px; /* buttons, inputs, pills, icon buttons */ --sarp-r-surface: 7px; /* cards, tiles, grids, dialogs */ --sarp-r-pill: 20px; /* status chips only */ /* --------------------------------------------------------------------- 5 · ELEVATION - all three tint from one hue (#1C2529). Mixed shadow hues are why surfaces at the same height currently do not look like they are at the same height. --------------------------------------------------------------------- */ --sarp-e1: 0 1px 2px rgba(28, 37, 41, .06); --sarp-e2: 0 4px 12px rgba(28, 37, 41, .09); --sarp-e3: 0 16px 40px rgba(28, 37, 41, .16); /* --------------------------------------------------------------------- 6 · SPACING - one 4px step. No 7px, 9px, 11px, 13px. --------------------------------------------------------------------- */ --sarp-s1: 4px; --sarp-s2: 8px; --sarp-s3: 12px; --sarp-s4: 16px; --sarp-s5: 24px; --sarp-s6: 32px; /* --------------------------------------------------------------------- 7 · FOCUS - the same halo on every focusable thing, always visible. --------------------------------------------------------------------- */ --sarp-focus-ring: 0 0 0 3px var(--sarp-brand-tint-2); /* --------------------------------------------------------------------- 8 · SHELL METRICS - pages position sticky elements against these rather than hard-coding an offset that breaks when the header changes. --------------------------------------------------------------------- */ --sarp-topbar-h: 56px; --sarp-content-max: 1720px; }