:root {
  --wd-header-height: 4rem;
  --wd-bg: #ffffff;
  --wd-fg: #111827;
  --wd-muted: #6b7280;
  --wd-muted-bg: rgba(0, 0, 0, 0.04);
  --wd-card-bg: #ffffff;
  --wd-border: rgba(17, 24, 39, 0.12);
  --wd-hover-bg: rgba(0, 0, 0, 0.06);
  --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: #22c55e;
  --wd-primary-fg: #ffffff;
}

html[data-theme="dark"] {
  --wd-bg: #0b1220;
  --wd-fg: #e5e7eb;
  --wd-muted: #9ca3af;
  --wd-muted-bg: rgba(255, 255, 255, 0.05);
  --wd-card-bg: #0f172a;
  --wd-border: rgba(229, 231, 235, 0.14);
  --wd-hover-bg: rgba(255, 255, 255, 0.08);
  --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: #10b981;
  --wd-primary-fg: #ffffff;
}

html[data-theme="emerald"] {
  --wd-bg: #f0fdf4;
  --wd-fg: #064e3b;
  --wd-muted: #047857;
  --wd-muted-bg: rgba(6, 95, 70, 0.04);
  --wd-card-bg: #ffffff;
  --wd-border: rgba(6, 95, 70, 0.18);
  --wd-hover-bg: rgba(6, 95, 70, 0.08);
  --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: #10b981;
  --wd-primary-fg: #ffffff;
}

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;
}