/* Generated from tokens/tokens.json by scripts/build-tokens.mjs. Do not edit. */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Material Icons Outlined";
  src: url("../fonts/material-icons-outlined.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Material Icons";
  src: url("../fonts/material-icons.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Brand */
  --brand-navy-blue: #0b213d;
  --brand-navy-light: #355c8c;
  --brand-black: #000000;
  --brand-vibrant-blue: #2a78ea;
  --brand-blue-light: #89b9ff;
  --brand-blue-dark: #0344a2;
  --brand-ice-blue: #f2f4fe;
  --brand-white: #ffffff;
  --brand-dock-sand: #f8f7f2;
  --brand-sand-dark: #d7d4c5;
  --brand-freight-orange: #f4863d;
  --brand-orange-light: #ffbc8f;
  --brand-orange-dark: #ca5507;
  --brand-action-green: #e6ff77;
  --brand-green-light: #f3ffc0;
  --brand-green-lightest: #fcffef;
  --brand-green-dark: #aac72a;
  /* Ink */
  --ink-default: var(--brand-navy-blue);
  --ink-inverse: var(--brand-white);
  --ink-action: var(--brand-navy-blue);
  --ink-secondary: #5a6b85;
  --ink-weak: #9aa5bc;
  --ink-disabled: #c3c6d4;
  --ink-positive: #0a8a35;
  --ink-warning: var(--brand-orange-dark);
  --ink-error: #c7150b;
  --ink-accent-hover: var(--brand-vibrant-blue);
  --ink-accent-pressed: var(--brand-blue-dark);
  /* Background */
  --bg-default: var(--brand-white);
  --bg-weak: var(--brand-ice-blue);
  --bg-mild: #e5edfc;
  --bg-gray: #e7e7e7;
  --bg-gray-weak: #f8f8f8;
  --bg-disabled: #eef0f1;
  --bg-inverse: var(--brand-navy-blue);
  --bg-positive: #0a8a35;
  --bg-positive-weak: #e6f9ec;
  --bg-warning: var(--brand-freight-orange);
  --bg-warning-weak: #fff1e0;
  --bg-error: #c7150b;
  --bg-error-weak: #fce8e6;
  /* Line */
  --line-border-standard: #e1e5ec;
  --line-border-blank: var(--brand-white);
  --line-border-strong: var(--brand-navy-blue);
  --line-border-positive: var(--bg-positive);
  --line-border-warning: var(--brand-freight-orange);
  --line-border-error: var(--bg-error);
  /* Status */
  --status-neutral: var(--brand-navy-light);
  --status-neutral-weak: var(--brand-dock-sand);
  --status-origin: var(--brand-vibrant-blue);
  --status-origin-weak: var(--brand-ice-blue);
  --status-transit: var(--brand-blue-dark);
  --status-transit-weak: #e9f1ff;
  --status-arrived: var(--brand-navy-blue);
  --status-arrived-weak: #e1ecff;
  --status-attention: var(--brand-orange-dark);
  --status-attention-weak: #ffefe2;
  --status-done: var(--brand-green-dark);
  --status-done-weak: var(--brand-green-light);
  --status-returned: var(--brand-freight-orange);
  --status-returned-weak: #ffe9d8;
  --status-cancelled: var(--bg-error);
  --status-cancelled-weak: var(--bg-error-weak);
  /* Container status */
  --container-booking-confirmation: var(--status-neutral);
  --container-booking-confirmation-weak: var(--status-neutral-weak);
  --container-container-created: var(--status-neutral);
  --container-container-created-weak: var(--status-neutral-weak);
  --container-in-route-origin: var(--status-origin);
  --container-in-route-origin-weak: var(--status-origin-weak);
  --container-in-transit: var(--status-transit);
  --container-in-transit-weak: var(--status-transit-weak);
  --container-arrived-at-port: var(--status-arrived);
  --container-arrived-at-port-weak: var(--status-arrived-weak);
  --container-customs: var(--status-attention);
  --container-customs-weak: var(--status-attention-weak);
  --container-in-route-destination: var(--status-transit);
  --container-in-route-destination-weak: var(--status-transit-weak);
  --container-received: var(--status-done);
  --container-received-weak: var(--status-done-weak);
  --container-returned: var(--status-returned);
  --container-returned-weak: var(--status-returned-weak);
  --container-cancelled: var(--status-cancelled);
  --container-cancelled-weak: var(--status-cancelled-weak);
  /* Order status */
  --order-confirmed: var(--status-neutral);
  --order-confirmed-weak: var(--status-neutral-weak);
  --order-issued: var(--status-origin);
  --order-issued-weak: var(--status-origin-weak);
  --order-in-progress: var(--status-transit);
  --order-in-progress-weak: var(--status-transit-weak);
  --order-received: var(--status-done);
  --order-received-weak: var(--status-done-weak);
  --order-on-hold: var(--status-attention);
  --order-on-hold-weak: var(--status-attention-weak);
  --order-in-route-to-dc: var(--status-transit);
  --order-in-route-to-dc-weak: var(--status-transit-weak);
  --order-arrived-to-dc: var(--status-arrived);
  --order-arrived-to-dc-weak: var(--status-arrived-weak);
  /* gradient */
  --gradient-01: linear-gradient(116deg, #f2f4fe 0%, #2a78ea 49%, #0344a2 68%, #0b213d 100%);
  --gradient-02: linear-gradient(261deg, #f2f4fe 0%, #2a78ea 100%);
  --gradient-03: linear-gradient(261deg, #f4863d 0%, #2a78ea 36%, #0b213d 100%);
  --gradient-04: linear-gradient(90deg, #2a78ea 0%, #0b213d 100%);
  --gradient-05: linear-gradient(261deg, #2a78ea 0%, #e6ff77 100%);
  /* shadow */
  --elevation-001: 0 10px 32px -10px rgb(183 183 183 / 0.3);
  --elevation-002: 0 6px 38px -6px rgb(41 95 185 / 0.1);
  --elevation-003: 0 10px 24px -10px rgb(15 27 77 / 0.2);
  --elevation-004: 0 6px 38px -6px rgb(41 95 185 / 0.4);
  /* spacing */
  --space-none: 0;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-xxl: 64px;
  /* radius */
  --radius-none: 0;
  --radius-xss: 4px;
  --radius-xs: 8px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* layout */
  --layout-nav-width: 240px;
  --layout-max-width: 1600px;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, monospace;
  --font-icon: "Material Icons Outlined";
  --font-icon-filled: "Material Icons";
}

.nv {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-default);
  -webkit-font-smoothing: antialiased;
}
/* No focus rings on Sirius components, by decision (docs/principles.md). Only elements with an nv- class: product
   markup that is not Sirius keeps the native focus. Zero specificity, so a consumer rule always wins. */
:where([class^="nv-"], [class*=" nv-"]):where(:focus, :focus-visible) { outline: none; }

.nv-display-lg {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
}

.nv-display-sm {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
}

.nv-h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
}

.nv-h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}

.nv-h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.nv-body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
}

.nv-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
}

.nv-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
}

.nv-label {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
}

.nv-regular { font-weight: 400; }
.nv-semibold { font-weight: 600; }
.nv-bold { font-weight: 700; }
/* Numbers, dates, codes and metrics: Martian Mono Light, SemiBold when combined with .nv-semibold. */
.nv-num { font-family: var(--font-mono); font-weight: 300; font-variant-numeric: tabular-nums; }
.nv-num.nv-semibold, .nv-num.nv-bold { font-weight: 600; }