:root {
  --wd-header-height: 4rem;
  --wd-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-fg: var(--sx-colorNeutralForeground1, #111827);
  --wd-muted: var(--sx-colorNeutralForeground2, #6b7280);
  --wd-muted-fg: var(--sx-colorNeutralForeground2, #6b7280);
  --wd-fg-muted: var(--wd-muted-fg);
  --wd-muted-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #111827) 4%, transparent);
  --wd-card-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-input-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-page-bg: var(--sx-colorNeutralBackground3, #f5f5f5);
  --wd-border: color-mix(in srgb, var(--sx-colorNeutralStroke1, #d1d5db) 80%, transparent);
  --wd-hover-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #111827) 6%, transparent);
  --wd-hover: var(--wd-hover-bg);
  --wd-popover-shadow: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.14);
  --wd-popover-ring: rgba(0, 0, 0, 0.06);
  --wd-primary: var(--sx-colorBrandBackground1, #3b82f6);
  --wd-primary-fg: var(--sx-colorOnBrand, #ffffff);
  --wd-danger: var(--sx-colorStatusDangerForeground1, #b91c1c);
  --wd-surface-subtle: color-mix(in srgb, var(--sx-colorNeutralForeground1, #111827) 3%, transparent);
}

html[data-theme="dark"] {
  --wd-bg: var(--sx-colorNeutralBackground1, #0b1220);
  --wd-fg: var(--sx-colorNeutralForeground1, #e5e7eb);
  --wd-muted: var(--sx-colorNeutralForeground2, #9ca3af);
  --wd-muted-fg: var(--sx-colorNeutralForeground2, #9ca3af);
  --wd-fg-muted: var(--wd-muted-fg);
  --wd-muted-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #e5e7eb) 5%, transparent);
  --wd-card-bg: var(--sx-colorNeutralBackground1, #0f172a);
  --wd-input-bg: var(--sx-colorNeutralBackground1, #0f172a);
  --wd-page-bg: var(--sx-colorNeutralBackground3, #111827);
  --wd-border: color-mix(in srgb, var(--sx-colorNeutralStroke1, #475569) 55%, transparent);
  --wd-hover-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #e5e7eb) 8%, transparent);
  --wd-hover: var(--wd-hover-bg);
  --wd-popover-shadow: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.55);
  --wd-popover-ring: rgba(255, 255, 255, 0.10);
  --wd-primary: var(--sx-colorBrandBackground1, #3b82f6);
  --wd-primary-fg: var(--sx-colorOnBrand, #ffffff);
  --wd-danger: var(--sx-colorStatusDangerForeground1, #f87171);
  --wd-surface-subtle: color-mix(in srgb, var(--sx-colorNeutralForeground1, #e5e7eb) 4%, transparent);
}

html[data-theme="emerald"] {
  --wd-bg: var(--sx-colorNeutralBackground1, #f0fdf4);
  --wd-fg: var(--sx-colorNeutralForeground1, #064e3b);
  --wd-muted: var(--sx-colorNeutralForeground2, #047857);
  --wd-muted-fg: var(--sx-colorNeutralForeground2, #047857);
  --wd-fg-muted: var(--wd-muted-fg);
  --wd-muted-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #064e3b) 4%, transparent);
  --wd-card-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-input-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-page-bg: var(--sx-colorNeutralBackground3, #ecfdf5);
  --wd-border: color-mix(in srgb, var(--sx-colorNeutralStroke1, #86efac) 55%, transparent);
  --wd-hover-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #064e3b) 8%, transparent);
  --wd-hover: var(--wd-hover-bg);
  --wd-popover-shadow: 0 1.125rem 3.125rem rgba(6, 95, 70, 0.16);
  --wd-popover-ring: rgba(6, 95, 70, 0.10);
  --wd-primary: var(--sx-colorBrandBackground1, #10b981);
  --wd-primary-fg: var(--sx-colorOnBrand, #ffffff);
  --wd-danger: var(--sx-colorStatusDangerForeground1, #b91c1c);
  --wd-surface-subtle: color-mix(in srgb, var(--sx-colorNeutralForeground1, #064e3b) 3%, transparent);
}

body {
  background: var(--wd-bg);
  color: var(--wd-fg);
}

.text-muted {
  color: var(--wd-muted) !important;
}

.card {
  background: var(--wd-card-bg);
  border-color: var(--wd-border);
}

.border-bottom,
.border-top {
  border-color: var(--wd-border) !important;
}