/* Shared primitives → semantic roles → component contracts. Loaded first on every page. */
:root {
  --orange-500: #e86917; --orange-700: #b54708; --orange-800: #923a06; --orange-50: #fff3e8;
  --slate-900: #172b4d; --slate-600: #52606d; --slate-200: #d9e0e8; --slate-100: #edf1f5; --slate-50: #f5f7fa; --white: #fff;
  --green-700: #067647; --green-50: #ecfdf3; --amber-800: #93370d; --amber-50: #fffaeb;
  --red-700: #b42318; --red-50: #fef3f2; --blue-700: #175cd3; --blue-50: #eff8ff;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  /* Latin glyphs from Segoe UI on Windows; CJK falls through to PingFang (macOS) or YaHei (Windows). */
  --font-ui: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* Type scale. Nothing in the workspace renders below --text-xs: CJK under 12px is unreadable. */
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px;
  --leading-tight: 1.3; --leading-normal: 1.5;
  --color-brand: var(--orange-500); --color-action: var(--orange-700); --color-action-hover: var(--orange-800); --color-action-soft: var(--orange-50);
  --color-text: var(--slate-900); --color-muted: var(--slate-600); --color-border: var(--slate-200);
  --color-page: var(--slate-50); --color-surface: var(--white);
  --color-success: var(--green-700); --color-success-soft: var(--green-50);
  --color-warning: var(--amber-800); --color-warning-soft: var(--amber-50);
  --color-danger: var(--red-700); --color-danger-soft: var(--red-50);
  --color-info: var(--blue-700); --color-info-soft: var(--blue-50);
  --control-height: 36px; --control-radius: 6px; --panel-radius: 8px; --dialog-radius: 12px;
  --overlay-shadow: 0 8px 24px rgb(16 24 40 / 12%);
  --table-heading-height: 40px; --table-row-height: 48px; --sidebar-width: 216px;
  --ui-orange: var(--color-action); --ui-ink: var(--color-text); --ui-muted: var(--color-muted);
  --ui-line: var(--color-border); --ui-soft: var(--color-action-soft); --ui-rail: var(--sidebar-width);
}

/* Equal-width digits so money, quantity and ID columns line up. */
table, input[type="number"], .metric-value, .stat-value { font-variant-numeric: tabular-nums; }