/*
 * Motor Trade design tokens - the ONE place the shared values live (UI5, 21.9.2026).
 *
 * Every motor stylesheet written from here on reads these; the earlier
 * component sheets (styles/motor-shell.css --msh-*, styles/motor-sales-ops.css
 * --mui-*, styles/motor-ceo-finance.css --mceo-*) carry the same literal values
 * under their own prefixes and are listed in docs/motor-ui/DESIGN-SYSTEM.md as
 * aliases of these. A role UI module's stylesheet declares its own --<prefix>-*
 * names as var(--mt-*, fallback) and never a new literal colour.
 *
 * Measured off the approved references design/reference/01-market-neutral.png
 * and 02-warehouse-preview.png. ONE accent (teal). No gradients, no emoji.
 */
.motor-theme,
.motor-ui,
.msh-shell {
  /* navy rail */
  --mt-navy: #102a3a;
  --mt-navy-soft: #16344a;
  --mt-navy-line: rgba(255, 255, 255, 0.12);
  --mt-on-navy: #ffffff;
  --mt-on-navy-soft: #c9d5e6;
  --mt-on-navy-muted: #7d8fa4;

  /* the one accent */
  --mt-accent: #00858f;
  --mt-accent-strong: #006e78;
  --mt-accent-soft: #e2f1f2;
  --mt-accent-line: #9fd3d6;
  --mt-accent-bright: #22e8e3;  /* on navy only: active nav, guide ring */

  /* light content */
  --mt-bg: #f8f8f6;
  --mt-surface: #ffffff;
  --mt-inset: #f3f5f7;
  --mt-line: #e3e7ea;
  --mt-line-soft: #eef1f3;
  --mt-line-strong: #d3d9e0;
  --mt-ink: #16202c;
  --mt-ink-soft: #3c4753;
  --mt-ink-muted: #5d6a78;
  --mt-slate: #7d8b9e;

  /* state fills: never a second accent, only a state */
  --mt-green-bg: #dcf3e8;  --mt-green-ink: #0f6b4a;   /* done, ready */
  --mt-blue-bg: #dbeffe;   --mt-blue-ink: #0a4d87;    /* reserved, information */
  --mt-amber-bg: #fff4dd;  --mt-amber-ink: #7a4f10;  --mt-amber-line: #f0d39a; /* waiting on another role */
  --mt-grey-bg: #eef0f3;   --mt-grey-ink: #5a6673;    /* waiting on the other firm, neutral */
  --mt-bad-ink: #a12a22;                             /* a shortfall, a lost customer */

  /* shape */
  --mt-radius: 14px;
  --mt-radius-sm: 10px;
  --mt-radius-xs: 8px;
  --mt-radius-pill: 999px;
  --mt-shadow: 0 1px 2px rgba(16, 26, 40, 0.05);
  --mt-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.34);

  /* space */
  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-5: 22px;
  --mt-space-6: 32px;

  /* type */
  --mt-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mt-font-size: 14px;
  --mt-font-size-sm: 12.5px;
  --mt-font-size-xs: 10.5px;
  --mt-font-size-title: 19px;
  --mt-font-size-figure: 17px;

  /* layout at laptop sizes (1366x768, 1440x900) */
  --mt-sidebar-width: 304px;
  --mt-card-min: 300px;
  --mt-card-max: 372px;
  --mt-photo-max: 320px;   /* 4:3, contain, white - docs/motor-ui/PRODUCT-PHOTO-RULE.md */
  --mt-tap-min: 30px;
}