/* ═══════════════════════════════════════════════════════════════════════ * tokens.css — RECRUITING-DESIGN-LANGUAGE-ALIGNMENT-V1 (2026-05-27). * * Canonical un-prefixed design tokens. Sourced from the UI Pack * Dispatch 2 pre-ratified seed values. These define the generic- * named tokens (--color-primary, --space-1, etc.) used by the new * components.css and any future surface that opts into the un- * prefixed design system. * * Relationship to admin-dashboard/styles/emr-design-system.css: * That file (3582 LoC) defines the comprehensive --emr-* prefixed * tokens + .emr-* prefixed component classes. It remains the SSoT * for brand colors. This file's tokens that overlap (color-primary, * color-text, etc.) are aliased to the emr-* token where it exists, * so editing the emr-* value updates both prefixes. * * Where no overlap exists (space scale, generic shadow scale, generic * text-size scale), this file introduces the pack's seed values * directly. * * Load order in dashboard.html: * tokens.css ← FIRST (defines --color-*, --space-*, etc.) * components.css ← SECOND (consumes the tokens) * emr-design-system.css ← THIRD (defines --emr-* + .emr-* classes; * its declarations of --emr-* WILL win even * when this sheet aliases via var()) * * Banked follow-on dispatches may migrate other surfaces from .emr-* * to un-prefixed canonical classes; this file is the foundation. * ═════════════════════════════════════════════════════════════════════ */ :root { /* ── Color palette — aliased to --emr-* where overlap exists ───────── */ --color-primary: var(--emr-gold, #F5A800); --color-primary-hover: var(--emr-gold-hover, #DC9700); --color-primary-tint: var(--emr-gold-tint, rgba(245, 168, 0, 0.08)); --color-success: var(--emr-status-green, #16A34A); --color-success-bg: var(--emr-status-green-bg, #DCFCE7); --color-warning: var(--emr-status-yellow, #D97706); --color-warning-bg: var(--emr-status-yellow-bg, #FEF3C7); --color-danger: var(--emr-status-red, #DC2626); --color-danger-bg: var(--emr-status-red-bg, #FEE2E2); --color-info: var(--emr-status-blue, #2563EB); --color-info-bg: var(--emr-status-blue-bg, #DBEAFE); --color-muted: var(--emr-text-subtle, #6B7280); --color-muted-bg: var(--emr-bg-subtle, #EEF0F3); --color-surface: var(--emr-bg, #FFFFFF); --color-surface-2: var(--emr-bg-muted, #F7F8FA); --color-surface-3: var(--emr-bg-subtle, #EEF0F3); --color-text: var(--emr-text, #111827); --color-text-muted: var(--emr-text-muted, #4B5563); --color-text-subtle: var(--emr-text-subtle, #6B7280); --color-border: var(--emr-border, #E5E7EB); --color-border-strong: var(--emr-border-strong, #D1D5DB); /* ── Typography ────────────────────────────────────────────────────── */ --font-sans: var(--emr-font-sans, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); --font-mono: var(--emr-font-mono, 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace); --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px; /* ── Semantic type hierarchy — SIZE carries the hierarchy, not weight ── Three reusable steps for dense data grids (Orders, etc.). The intent is that bold (>=600) becomes RARE: only genuine exception highlights (e.g. an Overdue flag) earn it. Everything else differentiates by SIZE + muting, at regular (400) or medium (500) weight. --text-minor sub-lines / meta / 2nd-line text → MUTED + regular --text-base (reuse, 13px) default cell text → regular (400) --text-emphasis the ONE primary datum per cell → medium (500) */ --text-minor: 11px; /* companion weight: --weight-normal (400), muted color */ --text-emphasis: 14px; /* companion weight: --weight-medium (500), full color */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing scale — 4px base, pack seeds (NEW; no emr-* overlap) ──── */ --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; /* ── Border radius — aliased to --emr-radius-* where overlap ───────── */ --radius-sm: var(--emr-radius-sm, 6px); --radius-md: var(--emr-radius, 10px); --radius-lg: var(--emr-radius-lg, 12px); --radius-pill: var(--emr-radius-pill, 999px); /* ── Shadows — pack seeds (light theme default) ────────────────────── */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 1px rgba(17, 24, 39, 0.03); --shadow-md: 0 4px 6px -2px rgba(17, 24, 39, 0.05), 0 2px 4px -1px rgba(17, 24, 39, 0.04); --shadow-lg: 0 10px 24px -3px rgba(17, 24, 39, 0.10), 0 4px 8px -2px rgba(17, 24, 39, 0.06); /* ── Motion ────────────────────────────────────────────────────────── */ --transition-fast: var(--emr-tx, 150ms ease); --transition-slow: var(--emr-tx-slow, 220ms ease); /* ═══ Q-UI-READABILITY-V1 Wave 1 — three INDEPENDENT semantic color scales (2026-06-21). One physical green used to encode three unrelated meanings (load STATUS · market SIGNAL · FINANCIAL net). Split here so each axis is retunable on its own and so `moving` ≠ `completed` by color ALONE (the headline bug: both were green). Values are drawn from the existing palette — this NAMES + SEPARATES them, it does not invent new brand colors. Light values below; dark overrides in the matching html[data-theme="dark"] block further down. Pills (status + signal) and sign-colored money are the ONLY consumers. ═══ */ /* ── (1) STATUS — load / order / manifest lifecycle ───────────────────── Rule (aligned to the stop-progress bar, manifestList.js:294): green is RESERVED for terminal `completed`/`delivered`; everything in-flight is NON-green. `moving` is AMBER (in-transit = in-progress, matching the stop-progress bar's amber=in-progress rule), distinct from the green of `completed`. planning takes the cool blue (new/ pending). amber↔blue: moving=active, planning=queued. */ --status-planning: #2563EB; /* blue — planning / pending / pre-assignment */ --status-planning-bg: rgba(37, 99, 235, .14); --status-assigned: #7C3AED; /* violet — assigned / dispatched / queued (not moving) */ --status-assigned-bg: rgba(124, 58, 237, .14); --status-moving: #D97706; /* amber — moving / in-transit (in-progress; matches stop-progress bar) */ --status-moving-bg: rgba(217, 119, 6, .14); --status-completed: #16A34A; /* green — completed / delivered (terminal success ONLY) */ --status-completed-bg: rgba(22, 163, 74, .14); --status-cancelled: #6B7280; /* gray — cancelled / tonu / void */ --status-cancelled-bg: rgba(107, 114, 128, .14); /* Subtle full-row WASH variants (≤8% — replaces saturated row tints). */ --status-moving-wash: rgba(217, 119, 6, .07); --status-completed-wash: rgba(22, 163, 74, .07); /* Back-compat aliases for names already referenced by existing pill CSS. */ --status-in-transit: var(--status-moving); --status-delivered: var(--status-completed); --status-problem: var(--fin-negative); /* ── (2) SIGNAL — TMV / market signal (take / counter / reject) ───────── Its OWN namespace — must NOT reuse the status palette. `take` is teal (not status-green) so a signal never reads as a status. */ --signal-take: #0F766E; /* teal — take / accept */ --signal-take-bg: rgba(15, 118, 110, .14); --signal-counter: #B45309; /* amber — counter / negotiate */ --signal-counter-bg: rgba(180, 83, 9, .14); --signal-reject: #BE123C; /* rose — reject / pass / avoid */ --signal-reject-bg: rgba(190, 18, 60, .12); --signal-hold: #4338CA; /* indigo — hold / review */ --signal-hold-bg: rgba(67, 56, 202, .14); --signal-neutral: #6B7280; /* gray — n/a */ --signal-neutral-bg: rgba(107, 114, 128, .12); /* ── (3) FINANCIAL — money colored by SIGN of net / margin ────────────── Independent of status + signal. Money-green is a touch deeper than the status green to reinforce that they are different axes. */ --fin-positive: #15803D; /* green — positive net / margin */ --fin-positive-bg: rgba(21, 128, 61, .12); --fin-positive-wash: rgba(21, 128, 61, .06); --fin-negative: #DC2626; /* red — negative net / margin */ --fin-negative-bg: rgba(220, 38, 38, .12); --fin-negative-wash: rgba(220, 38, 38, .08); --fin-neutral: #6B7280; /* gray — flat / zero */ --fin-neutral-bg: rgba(107, 114, 128, .10); } /* ═══ Q-UI-READABILITY-V1 Wave 1 — DARK overrides ═══════════════════════════ The dashboard body originated dark; on a #0D0D0D surface the saturated light foregrounds lose contrast, so brighten the pill foregrounds (the bg tints are already low-alpha translucent and read fine). Mirrors the existing html[data-theme="dark"] pattern in dashboard.html / emr-design- system.css. No other sheet defines these tokens, so these values win. */ html[data-theme="dark"] { --status-planning: #60A5FA; --status-assigned: #A78BFA; --status-moving: #FBBF24; --status-completed: #4ADE80; --status-cancelled: #9CA3AF; --signal-take: #2DD4BF; --signal-counter: #FBBF24; --signal-reject: #FB7185; --signal-hold: #818CF8; --signal-neutral: #9CA3AF; --fin-positive: #4ADE80; --fin-negative: #F87171; --fin-neutral: #9CA3AF; } /* ── Utilities ────────────────────────────────────────────────────────── Tabular (mono-width) numerals for money + IDs so digits line up column- to-column in dense grids. Reusable anywhere; apply alongside the size tokens above. */ .emr-tnum { font-variant-numeric: tabular-nums; }