body {
  background-color: var(--scada-body-bg);
  color: var(--scada-body-color);
  --bs-primary: var(--scada-primary);
  --bs-primary-rgb: 13, 110, 253;
  --bs-pagination-color: var(--scada-body-color);
  --bs-pagination-bg: var(--scada-surface-bg);
  --bs-pagination-border-color: var(--scada-border-color);
  --bs-pagination-hover-color: var(--scada-primary);
  --bs-pagination-hover-bg: var(--scada-surface-muted);
  --bs-pagination-hover-border-color: var(--scada-border-color);
  --bs-pagination-focus-color: var(--scada-primary);
  --bs-pagination-focus-bg: var(--scada-surface-muted);
  --bs-pagination-focus-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--scada-primary) 20%, transparent);
  --bs-pagination-active-color: var(--scada-primary-contrast);
  --bs-pagination-active-bg: var(--scada-primary);
  --bs-pagination-active-border-color: var(--scada-primary);
  --bs-pagination-disabled-color: var(--scada-nav-subtle-fg);
  --bs-pagination-disabled-bg: var(--scada-surface-muted);
  --bs-pagination-disabled-border-color: var(--scada-border-color);
}

.pagination {
  --bs-pagination-color: var(--scada-body-color);
  --bs-pagination-bg: var(--scada-surface-bg);
  --bs-pagination-border-color: var(--scada-border-color);
  --bs-pagination-hover-color: var(--scada-primary);
  --bs-pagination-hover-bg: var(--scada-surface-muted);
  --bs-pagination-hover-border-color: var(--scada-border-color);
  --bs-pagination-focus-color: var(--scada-primary);
  --bs-pagination-focus-bg: var(--scada-surface-muted);
  --bs-pagination-focus-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--scada-primary) 20%, transparent);
  --bs-pagination-active-color: var(--scada-primary-contrast);
  --bs-pagination-active-bg: var(--scada-primary);
  --bs-pagination-active-border-color: var(--scada-primary);
  --bs-pagination-disabled-color: var(--scada-nav-subtle-fg);
  --bs-pagination-disabled-bg: var(--scada-surface-muted);
  --bs-pagination-disabled-border-color: var(--scada-border-color);
}

body[data-bs-theme="dark"] {
  --scada-body-bg: #0f172a;
  --scada-body-color: #e2e8f0;
  --scada-surface-bg: #111827;
  --scada-surface-muted: #1f2937;
  --scada-border-color: #334155;
  --scada-primary: #3b82f6;
  --scada-primary-contrast: #ffffff;
  --scada-sidebar-bg: #111827;
  --scada-sidebar-color: #e2e8f0;
  --scada-topbar-bg: #111827;
  --scada-topbar-color: #f8fafc;
  --scada-chrome-hover-bg: #1f2937;
  --scada-chrome-hover-fg: #38bdf8;
  --scada-nav-selected-bg: #3b82f6;
  --scada-nav-selected-fg: #ffffff;
  --scada-nav-subtle-fg: #94a3b8;
  --scada-tabstrip-bg: #0f172a;
  --scada-tab-inactive-fg: #94a3b8;
  --scada-tab-active-fg: #f8fafc;
  --scada-tab-hover-fg: #38bdf8;
  --scada-tree-icon-filter: brightness(0) saturate(100%) invert(1);
  --scada-tree-icon-opacity: 0.32;
  --bs-primary: var(--scada-primary);
  --bs-primary-rgb: 59, 130, 246;
}

body.theme-customer-blue {
  --scada-primary: #1d4ed8;
  --scada-primary-contrast: #ffffff;
  --scada-chrome-hover-fg: #1d4ed8;
  --scada-nav-selected-bg: #1d4ed8;
  --scada-nav-selected-fg: #ffffff;
  --scada-tab-hover-fg: #1d4ed8;
  --bs-primary: var(--scada-primary);
  --bs-primary-rgb: 29, 78, 216;
}

body.theme-customer-green {
  --scada-primary: #15803d;
  --scada-primary-contrast: #ffffff;
  --scada-chrome-hover-fg: #15803d;
  --scada-nav-selected-bg: #15803d;
  --scada-nav-selected-fg: #ffffff;
  --scada-tab-hover-fg: #15803d;
  --bs-primary: var(--scada-primary);
  --bs-primary-rgb: 21, 128, 61;
}

body.theme-customer-gray {
  --scada-primary: #4b5563;
  --scada-primary-contrast: #ffffff;
  --scada-chrome-hover-fg: #4b5563;
  --scada-nav-selected-bg: #4b5563;
  --scada-nav-selected-fg: #ffffff;
  --scada-tab-hover-fg: #4b5563;
  --bs-primary: var(--scada-primary);
  --bs-primary-rgb: 75, 85, 99;
}