:root,
:root[data-theme='light'] {
  color-scheme: light;

  --em-navy-950: #0b2035;
  --em-navy-900: #0e2945;
  --em-navy-800: #173b60;
  --em-teal-700: #176f61;
  --em-teal-600: #1d8f7b;
  --em-teal-400: #74ccbb;
  --em-gold-700: #805716;
  --em-gold-500: #b7832e;
  --em-red-700: #a33432;
  --em-green-700: #26734b;

  --em-color-canvas: #f6f6f3;
  --em-color-surface: #fdfdfc;
  --em-color-surface-subtle: #f0f0ed;
  --em-color-surface-raised: #ffffff;
  --em-color-text: #252522;
  --em-color-text-muted: #62625c;
  --em-color-text-subtle: #686862;
  --em-color-border: #deded9;
  --em-color-border-strong: #c6c6c0;
  --em-color-brand: #30302d;
  --em-color-on-brand: #ffffff;
  --em-color-focus: var(--em-teal-700);
  --em-color-link: #145f91;
  --em-color-success: var(--em-green-700);
  --em-color-success-soft: #e3f3e9;
  --em-color-warning: var(--em-gold-700);
  --em-color-warning-soft: #f8efd9;
  --em-color-danger: var(--em-red-700);
  --em-color-danger-soft: #fae9e8;
  --em-color-on-danger: #ffffff;
  --em-color-info: #1b5f91;
  --em-color-info-soft: #e4f1f8;
  /* Orange for a value past its limit (the ERP's legacy warnlited fill), apart from the warning cream. */
  --em-color-attention: #8a3a00;
  --em-color-attention-soft: #ffbd83;
  --em-nav-teal: #176f61;
  --em-nav-teal-soft: #def2ed;
  --em-nav-violet: #6b51a4;
  --em-nav-violet-soft: #eee8f8;
  --em-nav-plum: #a1307a;
  --em-nav-plum-soft: #f5dcee;
  --em-color-overlay: rgb(24 24 22 / 52%);

  /* DataGrid variant="clean" and UsageBar: white card, warm header, hairline rules. */
  --em-grid-surface: #fdfcf7;
  --em-grid-border: #e8e0c4;
  --em-grid-radius: 14px;
  --em-grid-head-bg: #fbf6e6;
  --em-grid-head-fg: #555040;
  --em-grid-rule: #efe8d2;
  --em-grid-text: #1d2433;
  --em-grid-hover: #fdfaf0;
  --em-usage-track: #efe8d2;
  --em-usage-fill: #1b4f8a;
  /* Two-series chart colours (validated for lightness, chroma and colour-blind separation). */
  --em-chart-1: #2a6cb0;
  --em-chart-2: #c07a1a;
  /* Order-status code colours (LinkCode tone, StatusLegend swatch): the ERP's legacy hltN palette,
     kept as users know it. Not sent and partially sent share one red. Sent (3.8:1) and partially
     delivered (2.6:1) are below 4.5:1 on white, so a page that tones a code also puts the status
     into the link's ariaLabel. */
  --em-order-status-not-sent: #cc0000;
  --em-order-status-partially-sent: var(--em-order-status-not-sent);
  --em-order-status-sent: #cc6633;
  --em-order-status-partially-delivered: #00bb00;
  --em-order-status-delivered: #007600;
  --em-order-status-over-delivered: #004533;

  --em-shell-navigation: #efefeb;
  --em-shell-topbar: #fafaf8;
  --em-shell-chrome: #f8f8f5;
  --em-shell-edge: var(--em-color-border);

  --em-product-accent: var(--em-gold-700);
  --em-product-accent-soft: #f5ecd9;
  --em-product-accent-contrast: #ffffff;

  --em-font-sans: 'Instrument Sans Variable', 'Instrument Sans', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --em-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --em-font-size-xs: 0.75rem;
  --em-font-size-sm: 0.8125rem;
  --em-font-size-md: 0.875rem;
  --em-font-size-lg: 1rem;
  --em-font-size-xl: 1.25rem;
  --em-line-height-tight: 1.25;
  --em-line-height-body: 1.5;

  --em-space-1: 0.25rem;
  --em-space-2: 0.5rem;
  --em-space-3: 0.75rem;
  --em-space-4: 1rem;
  --em-space-5: 1.25rem;
  --em-space-6: 1.5rem;
  --em-space-8: 2rem;

  --em-page-width-narrow: 56rem;
  --em-page-width-document: 93.75rem;
  --em-detail-rail-sm: 17.5rem;
  --em-detail-rail-md: 21.25rem;
  --em-detail-rail-lg: 25rem;
  --em-stat-card-column-xs: 7.5rem;
  --em-key-value-pill-column: 10rem;
  --em-key-value-pill-key: 3.25rem;
  --em-stat-card-column-sm: 11rem;
  --em-stat-card-column-md: 14rem;
  --em-stat-card-column-lg: 18rem;

  --em-radius-xs: 0.25rem;
  --em-radius-sm: 0.375rem;
  --em-radius-md: 0.5rem;
  --em-radius-lg: 0.75rem;
  --em-shadow-sm: 0 1px 2px rgb(31 31 28 / 6%);
  --em-shadow-md: 0 12px 32px rgb(31 31 28 / 13%);
  --em-duration-fast: 120ms;
  --em-duration-normal: 180ms;
  --em-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --em-focus-ring: 0 0 0 3px color-mix(in srgb, var(--em-color-focus) 28%, transparent);
}

:root[data-product='tasks'] {
  --em-product-accent: #805716;
  --em-product-accent-soft: #f5ecd9;
  --em-product-accent-contrast: #ffffff;
}

:root[data-product='status'] {
  --em-product-accent: #176f61;
  --em-product-accent-soft: #def2ed;
  --em-product-accent-contrast: #ffffff;
}

:root[data-product='monitoring'] {
  --em-product-accent: #1b5f91;
  --em-product-accent-soft: #e4f1f8;
  --em-product-accent-contrast: #ffffff;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --em-color-canvas: #19191b;
  --em-color-surface: #222225;
  --em-color-surface-subtle: #242427;
  --em-color-surface-raised: #2b2b2e;
  --em-color-text: #e8e8eb;
  --em-color-text-muted: #a4a4ad;
  --em-color-text-subtle: #96969f;
  --em-color-border: #2e2e32;
  --em-color-border-strong: #48484e;
  --em-color-brand: #e8e8eb;
  --em-color-on-brand: #202023;
  --em-color-focus: #83ddcc;
  --em-color-link: #8fc5df;
  --em-color-success: #75d29e;
  --em-color-success-soft: #20332c;
  --em-color-warning: #e3bd70;
  --em-color-warning-soft: #342e23;
  --em-color-danger: #f09a95;
  --em-color-danger-soft: #3a2628;
  --em-color-on-danger: #2b1111;
  --em-color-info: #8fc5df;
  --em-color-info-soft: #24313a;
  --em-color-attention: #ffb27a;
  --em-color-attention-soft: #4a2c14;
  --em-nav-teal: #77ddcd;
  --em-nav-teal-soft: #123a35;
  --em-nav-violet: #c6b4ee;
  --em-nav-violet-soft: #30283f;
  --em-nav-plum: #f0a1d2;
  --em-nav-plum-soft: #3b2433;
  --em-color-overlay: rgb(10 10 9 / 76%);
  --em-grid-surface: var(--em-color-surface-raised);
  --em-grid-border: var(--em-color-border);
  --em-grid-head-bg: var(--em-color-surface-subtle);
  --em-grid-head-fg: var(--em-color-text-muted);
  --em-grid-rule: var(--em-color-border);
  --em-grid-text: var(--em-color-text);
  --em-grid-hover: #303034;
  --em-usage-track: var(--em-color-border-strong);
  --em-usage-fill: var(--em-color-info);
  --em-chart-1: #5b93d6;
  --em-chart-2: #b98028;
  /* Same hues and order (the greens lightest to darkest), light enough to read on dark grids. */
  --em-order-status-not-sent: #ff8a80;
  --em-order-status-sent: #f0a060;
  --em-order-status-partially-delivered: #7ce87c;
  --em-order-status-delivered: #4cc46a;
  --em-order-status-over-delivered: #46b093;
  --em-shell-navigation: #141416;
  --em-shell-topbar: #19191b;
  --em-shell-chrome: #19191b;
  --em-shell-edge: var(--em-color-border);
  --em-shadow-sm: 0 1px 1px rgb(0 0 0 / 20%);
  --em-shadow-md: 0 16px 36px rgb(0 0 0 / 34%);
}

:root[data-theme='dark'][data-product='tasks'] {
  --em-product-accent: #d9b76f;
  --em-product-accent-soft: #342e23;
  --em-product-accent-contrast: #242017;
}

:root[data-theme='dark'][data-product='status'] {
  --em-product-accent: #77ddcd;
  --em-product-accent-soft: #123a35;
  --em-product-accent-contrast: #0b201d;
}

:root[data-theme='dark'][data-product='monitoring'] {
  --em-product-accent: #97c8fc;
  --em-product-accent-soft: #17324f;
  --em-product-accent-contrast: #0a1d33;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --em-duration-fast: 0ms;
    --em-duration-normal: 0ms;
  }
}