/* Engine 2 design tokens. Components in app.css use these and nothing else. */
:root {
  /* type */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --mono: "Cascadia Mono", Consolas, monospace;
  --fs-meta: 12px; --fs-sm: 13px; --fs-body: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 25px; --fs-3xl: 30px; --fs-hero: 46px;
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.5;

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* shape and depth */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05); --shadow-2: 0 6px 16px rgba(16, 24, 40, .09); --shadow-3: 0 16px 40px rgba(16, 24, 40, .16);

  /* surfaces and ink */
  --bg: #f5f6f8; --surface: #fff; --soft: #f8f9fa; --line: #e6e8ec; --line-2: #d3d7de;
  --ink: #161d19; --ink-2: #434c46; --ink-3: #667069;

  /* semantic colour: 700 text and strong, 100 border, 50 fill */
  --green-800: #124f33; --green-700: #17643f; --green-100: #cfe8d9; --green-50: #edf7f1; --green-25: #f5fbf7;
  --blue-700: #1d5a9a; --blue-100: #cfe1f5; --blue-50: #edf4fc;
  --amber-700: #8c5408; --amber-100: #f4e0b8; --amber-50: #fdf6e8;
  --red-700: #b3261e; --red-100: #f7d2ce; --red-50: #fdefed;
  --purple-700: #65499c; --purple-100: #e0d8f2; --purple-50: #f4f0fb;
  --gray-700: #4b5563; --gray-100: #e2e5ea; --gray-50: #f2f4f6;

  /* inventory condition: one colour per mutually exclusive bucket */
  --cond-healthy: #2f9e6e; --cond-avail: #e2654f; --cond-deep: #e0a32e; --cond-nosale: #8d959e; --cond-data: #8b6fc4; --cond-new: #3d84c9; --cond-out: #cbd0d6;

  /* components */
  --card-pad: var(--s5); --btn-h: 38px; --btn-h-sm: 32px; --side-w: 224px; --page-pad: var(--s6); --page-max: 1320px; --icon-tile: 40px;
}