:root {
  --upf-leftbarsettings-width-md: 160px;
  --upf-leftbarsettings-width-sm: 70px;
  --upf-leftbarsettings-condensed-height: 2000px;

  --upf-color-bg: var(--ct-body-bg, #f5f7fb);
  --upf-color-surface: #ffffff;
  --upf-color-surface-muted: #f8fafc;
  --upf-color-border: rgba(148, 163, 184, 0.22);
  --upf-color-border-strong: rgba(100, 116, 139, 0.28);

  --upf-text-primary: #0f172a;
  --upf-text-secondary: #64748b;
  --upf-text-muted: #94a3b8;

  --upf-primary: var(--mud-palette-primary, #3c74d3);
  --upf-primary-soft: rgba(59, 130, 246, 0.10);
  --upf-success-soft: rgba(34, 197, 94, 0.12);
  --upf-danger-soft: rgba(239, 68, 68, 0.12);
  --upf-warning-soft: rgba(245, 158, 11, 0.14);
  --upf-dark:  var(--mud-palette-dark, #313a46);

  --upf-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
  --upf-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.09), 0 1px 4px rgba(15, 23, 42, 0.05);
  --upf-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.07);

  --upf-radius-sm: 8px;
  --upf-radius-md: 12px;
  --upf-radius-lg: 18px;

  --upf-space-1: 4px;
  --upf-space-2: 8px;
  --upf-space-3: 12px;
  --upf-space-4: 16px;
  --upf-space-5: 20px;
  --upf-space-6: 24px;
  --upf-space-7: 32px;

  --upf-dialog-border-width: 6px;
  --upf-card-padding: 1.25rem;
  --upf-grid-cell-padding: 8px;

  --upf-datagrid-header-bg: #313a46;
  --upf-datagrid-header-color: #ffffff;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --upf-color-surface: #2f3640;
  --upf-color-surface-muted: #39404a;
  --upf-datagrid-header-bg: #39404a;
  --upf-datagrid-header-color: #8a969c;
  --upf-color-border: rgba(148, 163, 184, 0.18);
  --upf-color-border-strong: rgba(148, 163, 184, 0.28);
  --upf-text-primary: #e2e8f0;
  --upf-text-secondary: #cbd5e1;
  --upf-text-muted: #94a3b8;
  --upf-shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.35);
  --upf-shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.32);
  --upf-shadow-md: 0 14px 34px rgba(2, 6, 23, 0.42);
}