:root {
  color-scheme: dark;
  --ar-bg: #0b1520;
  --ar-sidebar: #101c29;
  --ar-header: #0d1826;
  --ar-surface: #141f2a;
  --ar-surface-raised: #1b2a38;
  --ar-surface-hover: #273747;
  --ar-border: #334454;
  /* Product owner, 2026-10-03: the blue accent becomes black in the light theme and white in the dark
     theme (black <-> white, never blue). --ar-on-primary is the text/knob colour sitting on the accent. */
  --ar-primary: #f4f6f8;
  --ar-primary-hover: #d5dbe2;
  --ar-primary-soft: rgba(255, 255, 255, 0.14);
  --ar-on-primary: #0b1520;
  --ar-success: #2fc866;
  --ar-success-bg: #153f2a;
  --ar-warning: #f0b91e;
  --ar-warning-bg: #453b1d;
  --ar-danger: #e34f60;
  --ar-danger-bg: #4a222c;
  --ar-info: #e5e9ee;
  --ar-info-bg: #232d38;
  --ar-text: #f4f6f8;
  --ar-text-muted: #a3adb8;
  --ar-text-subtle: #788693;
  --ar-focus: #ffffff;
  /* The header (--ar-header) is always dark navy in both themes (see :root[data-theme="light"]'s own
     copy of this token below) - a deliberate fixed brand bar, matching the reference screenshot. Its
     own text tokens are therefore fixed light-on-dark too, never swapped by the light theme override,
     so "AutoReady"/the sync status stay legible instead of turning near-invisible dark-on-dark. */
  --ar-header-text: #f4f6f8;
  --ar-header-text-muted: #aab6c4;
  /*
   * KPI-card accent backgrounds (W1 Overview's own reference redesign): a soft tint of the same
   * success/warning/danger/info tones above, used only for the card's own background wash so the
   * big number keeps the full-strength colour and stays readable - never a second, unrelated colour
   * scale. Neutral is the plain surface-raised tone, for a card with no strong verdict attached
   * (e.g. raw inventory/listing counts).
   */
  --ar-kpi-neutral-bg: var(--ar-surface-raised);
  --ar-kpi-info-bg: var(--ar-info-bg);
  --ar-kpi-success-bg: var(--ar-success-bg);
  --ar-kpi-warning-bg: var(--ar-warning-bg);
  --ar-kpi-danger-bg: var(--ar-danger-bg);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ar-bg: #f3f6fa;
  --ar-sidebar: #ffffff;
  --ar-header: #0f2542;
  --ar-surface: #ffffff;
  --ar-surface-raised: #f8fafc;
  --ar-surface-hover: #e8eef5;
  --ar-border: #cbd5e1;
  --ar-primary: #111827;
  --ar-primary-hover: #374151;
  --ar-primary-soft: rgba(17, 24, 39, 0.08);
  --ar-on-primary: #ffffff;
  --ar-success: #168a45;
  --ar-success-bg: #e7f7ed;
  --ar-warning: #9a6700;
  --ar-warning-bg: #fff5d6;
  --ar-danger: #c9364a;
  --ar-danger-bg: #fdecef;
  --ar-info: #111827;
  --ar-info-bg: #eceef2;
  --ar-text: #14202b;
  --ar-text-muted: #526171;
  --ar-text-subtle: #718096;
  --ar-focus: #111827;
  --ar-kpi-neutral-bg: var(--ar-surface-raised);
  --ar-kpi-info-bg: var(--ar-info-bg);
  --ar-kpi-success-bg: var(--ar-success-bg);
  --ar-kpi-warning-bg: var(--ar-warning-bg);
  --ar-kpi-danger-bg: var(--ar-danger-bg);
}