/* Copied from mt3prototypes/procurement/tokens.css at commit a8ec639 (2026-09-27). Keep in step with the prototype; local changes go in finance.css. */ /* ============================================================================ PULSE PROCUREMENT — TOKENS ---------------------------------------------------------------------------- This file is :root and nothing else. Nothing here draws anything. The brief's D2 ("copy the live Pulse chrome byte-for-byte") was reversed: the prototype is meant to LEAD the app, not mirror it. What is kept deliberately is the CLASS CONTRACT — every .cd-* name in Pulse's nordic.css is re-implemented here at new values, never renamed — so the port is a file swap, not a re-skin, and not one line of markup changes. The second block re-points every token name live Pulse uses at these values. Pasting it over theme.css's :root re-skins all 102 Pulse pages at once. That is HR's trick (pulse-v2.css:74-96, four greys) applied to the whole set. ========================================================================== */ :root { /* ── INK — one cool-neutral ramp, five stops. Five is enough for a UI and few enough that nobody invents a sixth. Deliberately NOT the Tailwind slate ramp Pulse uses: #64748b is visibly blue on a white register and tints every neutral badge lilac. ─────────────────────────────────────────── */ --ink: #14181f; /* values, table cells, h1, money */ --ink-2: #3d4654; /* secondary prose, form labels, subtitles */ --ink-3: #616b7c; /* table headers, meta, kv keys, breadcrumb */ --ink-4: #8a93a3; /* placeholders, eyebrows, disabled label */ --ink-5: #aeb5c2; /* dash(), resting sort arrow */ /* ── SURFACES — four. The page is warmer than the card, so a card reads as a raised plane without a shadow doing the work. ──────────────────────── */ --page: #f6f7f9; --surface: #ffffff; --sunken: #fafbfc; /* thead, sticky first column, inset wells */ --row-hover: #f4f6f9; --row-sel: #eef1fe; --scrim: rgba(12, 16, 24, .44); /* ── LINES — three weights, and they replace every shadow on a static surface. A 20-column table separated by shadows is soup. ───────────── */ --line: #e6e9ee; /* every hairline: card, table row, divider */ --line-2: #d5dae2; /* control borders (input, select, chip) */ --line-3: #b9c0cc; /* control hover */ /* ── ACCENT — exactly one, doing exactly four jobs: links, focus rings, the primary button, and active/selected/sorted. #4338ca is not invented — it is theme.css:35's own --nav-active-fg. So the port is a value swap on --color-primary, not a new hue. 8.4:1 on white, which is link-safe down to 13.5px. ─────────────────────────── */ --accent: #4338ca; --accent-hi: #3730a3; /* hover */ --accent-lo: #312e81; /* active */ --accent-tint: #eef2ff; /* == theme.css --nav-active-bg */ --accent-line: #c7cdfb; --accent-ring: rgba(67, 56, 202, .20); --focus-ring: var(--accent); /* a keyboard focus outline: solid, never the 20% ring (WCAG 2.4.7) */ /* The error ring, and the tint an inline chip sits on inside the violet invented-data strip. Both were literals in three rules before they were named here. */ --bad-ring: rgba(211, 60, 48, .14); --odd-tint: rgba(91, 33, 182, .09); /* ── STATUS — six meanings, not twenty labels. All 24 states across the four machines map into one of these; the LABEL carries the specificity, the TONE carries what it means to me. Violet is the loud fallback for an unmapped status (plus a console.warn), never a design choice. Each tone is a quadruple: fg / bg / line / dot. fg-on-bg >= 7:1. ───── */ --ok-fg: #0a6b4b; --ok-bg: #e8f6f0; --ok-line: #b6e2d0; --ok-dot: #10906a; --info-fg:#0b5488; --info-bg:#e9f2fb; --info-line:#bad7f0; --info-dot:#1f74ba; --prog-fg:#0d5f6b; --prog-bg:#e6f4f6; --prog-line:#b4dee4; --prog-dot:#0f8b9b; --warn-fg:#8a4b06; --warn-bg:#fdf3e3; --warn-line:#f2d7a5; --warn-dot:#c4780b; --bad-fg: #9f1d1d; --bad-bg: #fdecea; --bad-line: #f6c3bd; --bad-dot: #d33c30; --mute-fg:#4b5565; --mute-bg:#f1f3f6; --mute-line:#e0e4ea; --mute-dot:#8a93a3; --odd-fg: #5b21b6; --odd-bg: #f4eefe; --odd-line: #ddd0fa; --odd-dot: #7c3aed; /* ── TYPE — ten steps, every one with a job. Nothing between 16 and 20, and nothing above 30: a procurement screen has no hero. "Big" is spent on the things you DECIDE with — the page title, the one number in the stat strip, the grand total in the rail — and never on the 20-column register, where every pixel of row height costs a row of real work. Base is 14px against Pulse's 13: this module reads bank details and GSTIN checksums before signing an instrument that binds the company. ── */ --t-micro: 11px; /* eyebrow, kv key, badge, chip count, stat label */ --t-label: 12px; /* form label, TABLE HEADER, tab label */ --t-meta: 12.5px; /* subtitle, hint, breadcrumb, activity row */ --t-cell: 13.5px; /* TABLE CELL, dense body, rail body */ --t-body: 14px; /* BASE. body, inputs, buttons, links, findings */ --t-lead: 15px; /* emphasised value: kv value on a detail page */ --t-node: 16px; /* section / card / modal title */ --t-sub: 20px; /* tab-panel title, group banner */ --t-num: 26px; /* stat value, grand total in the rail */ --t-title: 30px; /* PAGE TITLE (h1). One per page. */ --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; /* 600 is the ceiling for text; 700 exists only for numbers that decide something. No 800/900 anywhere — hierarchy is structure, not shouting. */ --lh-tight: 1.15; /* h1 only */ --lh-cell: 1.4; /* table cell — the CJK floor. Do not go below. */ --lh-body: 1.5; --lh-prose: 1.6; /* findings, notes, anything read twice */ --lh-cjk: 1.62; /* [lang="zh"] and any stacked bilingual block */ --tr-title: -.021em; --tr-num: -.01em; --tr-caps: .06em; /* ── SPACE — 4px grid, ten steps. No 2px, no 6px, no 18px. ─────────────── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px; /* ── RADII — five. 12px on surfaces (Pulse's 10 reads mean at this scale), 6px on controls, 5px on badges. Pills survive on ONE thing: the numeric count inside a filter chip. ───────────────────────────────────────── */ --r-badge:5px; --r-ctl:6px; --r-md:8px; --r-surface:12px; --r-modal:16px; --r-pill:999px; /* ── SHADOWS — four, three of them for things that float. A card, a table, a node and a stat strip get NO shadow; they get a hairline. ──────────── */ --shadow-pop: 0 4px 12px -2px rgba(16,22,34,.10), 0 2px 4px -2px rgba(16,22,34,.06); --shadow-modal: 0 24px 60px -12px rgba(16,22,34,.22), 0 8px 20px -8px rgba(16,22,34,.10); --shadow-stick: 0 6px 12px -10px rgba(16,22,34,.40); /* under a sticky bar */ --shadow-col: 6px 0 8px -8px rgba(16,22,34,.28); /* right of a sticky col */ /* Renamed from --sh-* (local change, as the ERP did): --sh- belongs to the shell-theme tokens. The old names stay as aliases until every sheet reads the new ones. */ --sh-pop: var(--shadow-pop); --sh-modal: var(--shadow-modal); --sh-stick: var(--shadow-stick); --sh-col: var(--shadow-col); /* ── Z — one ladder. The chrome half of it is now live Pulse's OWN ladder, value for value (header 500 · dock 900 · sheet overlay 999 · dropdown and sheet 1000 · search pop 1300), because the header markup is now a file swap and a port that changed the stacking would be a port that changed behaviour. Everything that must cover the header — a chip popover, the palette, a modal, a toast — is lifted ABOVE 1300 rather than left at its old value, which would have put a confirm dialog underneath the bar. ── */ --z-stickycol:2; --z-thead:3; --z-rail:20; --z-actionbar:30; /* --z-sidepanel is the DOCKED left panel, and it shares the dock's storey rather than the sheet's on purpose: a Procurement dropdown has to land OVER the panel it duplicates, or hovering the top-nav opens a menu that is half behind the left rail. The SAME element is --z-navpanel while it is the mobile OVERLAY, because there it has to cover the scrim it raised. One element, two jobs, two rungs. */ --z-header:500; --z-dock:900; --z-sidepanel:900; --z-scrim:999; --z-navpanel:1000; --z-searchpop:1300; --z-popover:1400; --z-palette:1500; --z-modal:1600; --z-toast:1700; --z-tooltip:1800; /* ── MOTION — three durations, one curve. Everything else is instant. ──── */ --ease:cubic-bezier(.2,.6,.3,1); --d1:110ms; /* tint / hover */ --d2:180ms; /* popover */ --d3:240ms; /* drawer */ /* ── LAYOUT ───────────────────────────────────────────────────────────── */ /* 60px, not 56: this is live Pulse's --header-height, and every sticky rail in the module offsets from it. --w-side survives the sidebar it was named for — .pr-board-col, .pr-matrix-corner, .pr-sched-sku and .pr-two all read it as "one column of chrome width" and none of them is a navigation. */ --h-header:60px; --w-side:264px; --w-side-rail:60px; --h-dock:52px; --h-dock-pad:58px; --w-rail:340px; --h-actionbar:60px; --w-page:1600px; --w-narrow:1180px; --pad-page:28px; --h-row:44px; --h-row-head:37px; --h-row-bi:60px; --h-ctl:36px; --h-ctl-sm:30px; --h-ctl-lg:40px; /* ── FONTS Latin first, CJK appended to the SAME stack: CSS fallback is per-glyph, so 'Outer Carton / 外箱' gives the Latin to SF Pro or Segoe and 外箱 to the first CJK entry. Reverse the order and the whole string renders in YaHei. system-ui is deliberately NOT first: on a zh-CN Windows install it resolves to Microsoft YaHei, which draws Latin with wide flat sidebearings — every SBPO-2627-028 in the register would render in the wrong face, on a machine belonging to exactly the users this is for. SC only. The suppliers are mainland; TC would need PingFang TC and is out of scope — stated here rather than discovered in a Taiwan invoice. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ============================================================================ THE PORT BLOCK Every token name live Pulse uses, re-pointed at the values above. Two payoffs: markup lifted out of a Pulse page renders in-system here, and the port is literally "replace theme.css's :root with this". If a Pulse token has no home below, that is a gap that has to be justified. ========================================================================== */ :root { --color-primary:#4338ca; --color-primary-dark:var(--accent-hi); --color-primary-light:#6366f1; --color-secondary:#4338ca; --gradient-primary:none; /* the gradient is retired — see DESIGN.md */ --gradient:none; --color-white:#fff; --color-gray-50:var(--sunken); --color-gray-100:var(--mute-bg); --color-gray-200:var(--line); --color-gray-300:var(--line-2); --color-gray-400:var(--ink-5); --color-gray-500:var(--ink-4); --color-gray-600:var(--ink-3); --color-gray-700:var(--ink-2); --color-gray-800:#252c38; --color-gray-900:var(--ink); --nav-active-bg:var(--accent-tint); --nav-active-fg:var(--accent); --nav-active-rail:var(--accent); --color-success:var(--ok-dot); --color-success-light:var(--ok-bg); --color-warning:var(--warn-dot); --color-warning-light:var(--warn-bg); --color-error:var(--bad-dot); --color-error-light:var(--bad-bg); --color-info:var(--info-dot); --color-info-light:var(--info-bg); --bg-page:var(--page); --bg-card:var(--surface); --bg-hover:var(--row-hover); --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3); --text-inverse:#fff; --border-light:var(--line); --border-medium:var(--line-2); --font-family:var(--font); --font-family-mono:var(--mono); --text-xs:var(--t-micro); --text-sm:var(--t-cell); --text-base:var(--t-body); --text-lg:var(--t-node); --text-xl:var(--t-sub); --text-2xl:var(--t-num); --text-3xl:var(--t-title); --font-normal:400; --font-medium:500; --font-semibold:600; --font-bold:700; --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:56px; --radius-sm:var(--r-badge); --radius-md:var(--r-ctl); --radius-lg:var(--r-md); --radius-xl:var(--r-surface); --radius-2xl:var(--r-modal); --radius-full:999px; --shadow-sm:none; --shadow-md:var(--shadow-pop); --shadow-lg:var(--shadow-pop); --shadow-xl:var(--shadow-modal); --transition-fast:var(--d1); --transition-normal:var(--d2); --transition-slow:var(--d3); --header-height:var(--h-header); --page-bg:var(--page); --nordic-header-bg:var(--sunken); --nordic-border:var(--line); --nordic-row-hover:var(--row-hover); --nordic-text-primary:var(--ink); --nordic-text-secondary:var(--ink-3); --nordic-text-muted:var(--ink-4); --nordic-sort-active:var(--accent); --nordic-radius:var(--r-surface); --nordic-radius-sm:var(--r-ctl); }