/* Cartonwise portal tokens. Figma XaopLjjJ7OhNf4GqXSLRvl, cover v0.64, 28 September 2026.
   Generated by build.py from source/. Do not edit by hand: change Figma, re-export source/, run python3 build.py.
   Primitives (--v7-*, --cw-*) are never used in a component; components use the role tokens below them. */

:root {
  color-scheme: light;

  /* Primitives */
  --v7-gray-0: #ffffff;
  --v7-gray-10: #f4f4f4;
  --v7-gray-10-hover: #e8e8e8;
  --v7-gray-20: #e0e0e0;
  --v7-gray-30: #c6c6c6;
  --v7-gray-40: #a8a8a8;
  --v7-gray-50: #8d8d8d;
  --v7-gray-60: #6f6f6f;
  --v7-gray-70: #525252;
  --v7-gray-80: #393939;
  --v7-gray-90: #262626;
  --v7-gray-95: #1e1e1e;
  --v7-gray-100: #161616;
  --v7-gray-black: #000000;
  --cw-blue-10: #f0f6ff;
  --cw-blue-20: #d9eaff;
  --cw-blue-30: #b2d4ff;
  --cw-blue-40: #7fb7fd;
  --cw-blue-50: #3f93f4;
  --cw-blue-60: #066fd1;
  --cw-blue-70: #114d8c;
  --cw-blue-80: #0e3969;
  --cw-blue-90: #0a294c;
  --cw-blue-100: #061a32;
  --v7-green-10: #defbe6;
  --v7-green-20: #a7f0ba;
  --v7-green-40: #42be65;
  --v7-green-50: #24a148;
  --v7-green-60: #198038;
  --v7-green-70: #0e6027;
  --v7-green-90: #022d0d;
  --v7-red-10: #fff1f1;
  --v7-red-20: #ffd7d9;
  --v7-red-40: #ff8389;
  --v7-red-50: #fa4d56;
  --v7-red-60: #da1e28;
  --v7-red-70: #a2191f;
  --v7-red-90: #520408;
  --v7-amber-10: #fff5eb;
  --v7-amber-20: #ffe5ca;
  --v7-amber-30: #fecb94;
  --v7-amber-40: #fea83b;
  --v7-amber-50: #e1901f;
  --v7-amber-60: #b07015;
  --v7-amber-70: #885716;
  --v7-amber-80: #623f14;
  --v7-amber-90: #3c2407;
  --v7-alpha-ink-5: #1616160d;
  --v7-alpha-ink-10: #1616161a;
  --v7-alpha-ink-48: #1616167a;
  --v7-alpha-black-8: #00000014;
  --v7-alpha-black-64: #000000a3;
  --v7-alpha-white-6: #ffffff0f;
  --v7-alpha-white-12: #ffffff1f;
  --v7-alpha-white-16: #ffffff29;
  --cw-alpha-blue40-16: #7fb7fd29;
  --v7-alpha-transparent: #ffffff00;
  --v7-brand-cartonwise-blue: #066fd1;

  /* Colour roles, v7 / Color, Light (the portal has no dark mode) */
  --color-bg-canvas: var(--v7-gray-10);  /* The grey work area under the page bar; cards sit on it */
  --color-bg-surface: var(--v7-gray-0);  /* Cards, the side nav, the page bar, dialogs, fields */
  --color-bg-surface-secondary: var(--v7-gray-10);  /* List table header band, every second report row, the sign-in picture panel */
  --color-bg-surface-tertiary: var(--v7-gray-10-hover);  /* Report table header band and group heads */
  --color-bg-inverse: var(--v7-gray-100);  /* Toast */
  --color-bg-scrim: var(--v7-alpha-ink-48);  /* Behind a dialog */
  --color-state-hover: var(--v7-alpha-ink-5);  /* Hover overlay on rows, nav items, ghost buttons */
  --color-state-pressed: var(--v7-alpha-ink-10);  /* Pressed overlay */
  --color-state-selected: var(--cw-blue-10);  /* Current nav item, selected tile, selected row */
  --color-state-transparent: var(--v7-alpha-transparent);
  --color-border-subtle: var(--v7-gray-20);  /* Row dividers, the rule under the page bar, report lanes in the body */
  --color-border-default: var(--v7-gray-30);  /* Header band rule, report lanes in the header and at group edges */
  --color-border-strong: var(--v7-gray-50);  /* Field and filter control borders, Secondary and Outline button edges, checkbox and radio rings, 3.32:1 */
  --color-border-selected: var(--cw-blue-60);  /* Selected ring on radios and radio tiles, checked boxes, the current step */
  --color-border-focus: var(--cw-blue-60);  /* Focus ring, 2 px outside a 2 px bg/surface gap; 5.00:1 on white, 4.54:1 on the canvas */
  --color-border-hairline: var(--v7-alpha-black-8);  /* Card and menu edge, drawn inside */
  --color-border-on-inverse: var(--v7-gray-80);
  --color-text-primary: var(--v7-gray-100);  /* All data and body text */
  --color-text-secondary: var(--v7-gray-70);  /* Labels, meta lines, hints; 7.81:1 on white */
  --color-text-tertiary: var(--v7-gray-60);  /* Zeros and dashes in tables, notes, eyebrows; 5.02:1 on white */
  --color-text-disabled: var(--v7-gray-40);  /* Disabled controls only */
  --color-text-on-inverse: var(--v7-gray-0);  /* Text on the toast and on filled buttons */
  --color-text-link: var(--cw-blue-70);  /* Links and text actions; 8.52:1 on white, 6.96:1 on the header band */
  --color-text-success: var(--v7-green-70);
  --color-text-warning: var(--v7-amber-70);  /* A flagged value beside its warning icon */
  --color-text-danger: var(--v7-red-70);  /* Destructive text actions and field errors only */
  --color-text-on-danger: var(--v7-gray-0);  /* Label on a danger button */
  --color-text-link-on-inverse: var(--cw-blue-40);  /* Undo on the toast */
  --color-icon-primary: var(--v7-gray-100);
  --color-icon-secondary: var(--v7-gray-60);  /* Row icons, field icons, nav icons */
  --color-icon-on-inverse: var(--v7-gray-0);
  --color-icon-link: var(--cw-blue-70);  /* Icons inside links and text actions */
  --color-icon-disabled: var(--v7-gray-40);
  --color-action-primary: var(--cw-blue-60);  /* Primary button fill, the Cartonwise brand; white label 5.00:1; one per view */
  --color-action-primary-hover: var(--cw-blue-70);
  --color-action-primary-pressed: var(--cw-blue-80);
  --color-action-disabled: var(--v7-gray-20);
  --color-action-danger: var(--v7-red-60);  /* Danger button fill */
  --color-action-brand: var(--cw-blue-60);  /* Checked checkbox, selected radio dot, complete step, count badge */
  --color-action-toggle-off: var(--v7-gray-50);
  --color-action-danger-pressed: var(--v7-red-70);
  --color-status-ready: var(--v7-green-60);  /* Ready dot; 5.02:1 on white */
  --color-status-working: var(--cw-blue-60);  /* Working dot */
  --color-status-attention: var(--v7-amber-60);  /* Needs attention dot and warning icons; 4.06:1 on white */
  --color-status-stopped: var(--v7-red-60);  /* Stopped dot and error icons */
  --color-status-offline: var(--v7-gray-60);  /* Offline and neutral dot */
  --color-wash-success: var(--v7-green-10);  /* Success notice and Ready pill */
  --color-wash-warning: var(--v7-amber-10);  /* Warning notice and Attention pill */
  --color-wash-danger: var(--v7-red-10);  /* Danger notice, flagged report rows */
  --color-wash-info: var(--cw-blue-10);  /* Info notice and Working pill */
  --color-data-track: var(--v7-gray-20);  /* Bar track */
  --color-data-fill: var(--cw-blue-60);  /* Bar fill; 3.79:1 against the track */
  --color-effect-shadow: var(--v7-alpha-black-8);

  /* Spacing, radius and sizes, v7 / Layout, Desktop mode */
  --spacing-01: 2px;
  --spacing-02: 4px;
  --spacing-03: 8px;
  --spacing-04: 12px;
  --spacing-05: 16px;
  --spacing-06: 24px;
  --spacing-07: 32px;
  --spacing-08: 40px;
  --spacing-09: 48px;
  --spacing-10: 64px;
  --spacing-11: 80px;
  --spacing-12: 96px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --size-target-min: 36px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-hero: 56px;
  --size-icon: 24px;
  --size-icon-sm: 20px;
  --size-rail: 64px;
  --size-header: 56px;
  --size-panel: 400px;
  --size-side-nav: 240px;
  --size-table-row: 40px;

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --type-display: 600 40px/48px var(--font-sans);
  --type-display-tracking: -0.4px;
  --type-title-l: 600 28px/36px var(--font-sans);
  --type-title-l-tracking: -0.14px;
  --type-title-m: 600 22px/28px var(--font-sans);
  --type-title-m-tracking: -0.1px;
  --type-title-s: 600 18px/24px var(--font-sans);
  --type-title-s-tracking: 0px;
  --type-body-l: 400 18px/28px var(--font-sans);
  --type-body-l-tracking: 0px;
  --type-body: 400 16px/24px var(--font-sans);
  --type-body-tracking: 0px;
  --type-body-strong: 500 16px/24px var(--font-sans);
  --type-body-strong-tracking: 0px;
  --type-body-s: 400 14px/20px var(--font-sans);
  --type-body-s-tracking: 0px;
  --type-body-s-strong: 500 14px/20px var(--font-sans);
  --type-body-s-strong-tracking: 0px;
  --type-label: 500 16px/20px var(--font-sans);
  --type-label-tracking: 0px;
  --type-label-s: 500 14px/18px var(--font-sans);
  --type-label-s-tracking: 0px;
  --type-caption: 400 13px/18px var(--font-sans);
  --type-caption-tracking: 0px;
  --type-caption-strong: 500 13px/18px var(--font-sans);
  --type-caption-strong-tracking: 0px;
  --type-eyebrow: 600 13px/16px var(--font-sans);
  --type-eyebrow-tracking: 0.52px;
  --type-price-l: 600 32px/40px var(--font-sans);
  --type-price-l-tracking: -0.32px;
  --type-price-m: 600 18px/24px var(--font-sans);
  --type-price-m-tracking: 0px;
  --type-mono-l: 500 28px/36px var(--font-mono);
  --type-mono-l-tracking: 0px;
  --type-mono-title: 500 22px/28px var(--font-mono);
  --type-mono-title-tracking: 0px;
  --type-mono-m: 400 16px/24px var(--font-mono);
  --type-mono-m-tracking: 0px;
  --type-mono-m-strong: 500 16px/24px var(--font-mono);
  --type-mono-m-strong-tracking: 0px;
  --type-mono-s: 400 14px/20px var(--font-mono);
  --type-mono-s-tracking: 0px;
  --type-mono-s-strong: 500 14px/20px var(--font-mono);
  --type-mono-s-strong-tracking: 0px;
  --type-mono-xs: 400 13px/18px var(--font-mono);
  --type-mono-xs-tracking: 0px;
  --type-mono-xs-strong: 500 13px/18px var(--font-mono);
  --type-mono-xs-strong-tracking: 0px;

  /* Depth */
  --shadow-elevation-1: 0px 1px 2px 0px #0000000f, 0px 2px 8px -2px #0000000d;
  --shadow-elevation-2: 0px 2px 6px 0px #0000000f, 0px 12px 28px -8px #0000002e;
  --shadow-elevation-3: 0px 4px 12px 0px #00000014, 0px 28px 64px -16px #00000052;
  --shadow-focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-border-focus);

  /* Motion, from v7 (Figma has none) */
  --duration-state: 110ms;
  --duration-enter: 240ms;
  --duration-exit: 150ms;
  --ease-state: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-enter: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
}

/* One class per Figma text style: v7/<name> is .cw-type-<name>. Mono styles carry tabular figures. */
.cw-type-display { font: var(--type-display); letter-spacing: var(--type-display-tracking); }
.cw-type-title-l { font: var(--type-title-l); letter-spacing: var(--type-title-l-tracking); }
.cw-type-title-m { font: var(--type-title-m); letter-spacing: var(--type-title-m-tracking); }
.cw-type-title-s { font: var(--type-title-s); letter-spacing: var(--type-title-s-tracking); }
.cw-type-body-l { font: var(--type-body-l); letter-spacing: var(--type-body-l-tracking); }
.cw-type-body { font: var(--type-body); letter-spacing: var(--type-body-tracking); }
.cw-type-body-strong { font: var(--type-body-strong); letter-spacing: var(--type-body-strong-tracking); }
.cw-type-body-s { font: var(--type-body-s); letter-spacing: var(--type-body-s-tracking); }
.cw-type-body-s-strong { font: var(--type-body-s-strong); letter-spacing: var(--type-body-s-strong-tracking); }
.cw-type-label { font: var(--type-label); letter-spacing: var(--type-label-tracking); }
.cw-type-label-s { font: var(--type-label-s); letter-spacing: var(--type-label-s-tracking); }
.cw-type-caption { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); }
.cw-type-caption-strong { font: var(--type-caption-strong); letter-spacing: var(--type-caption-strong-tracking); }
.cw-type-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; }
.cw-type-price-l { font: var(--type-price-l); letter-spacing: var(--type-price-l-tracking); }
.cw-type-price-m { font: var(--type-price-m); letter-spacing: var(--type-price-m-tracking); }
.cw-type-mono-l { font: var(--type-mono-l); letter-spacing: var(--type-mono-l-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-title { font: var(--type-mono-title); letter-spacing: var(--type-mono-title-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-m { font: var(--type-mono-m); letter-spacing: var(--type-mono-m-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-m-strong { font: var(--type-mono-m-strong); letter-spacing: var(--type-mono-m-strong-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-s { font: var(--type-mono-s); letter-spacing: var(--type-mono-s-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-s-strong { font: var(--type-mono-s-strong); letter-spacing: var(--type-mono-s-strong-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-xs { font: var(--type-mono-xs); letter-spacing: var(--type-mono-xs-tracking); font-variant-numeric: tabular-nums; }
.cw-type-mono-xs-strong { font: var(--type-mono-xs-strong); letter-spacing: var(--type-mono-xs-strong-tracking); font-variant-numeric: tabular-nums; }