/* Opt in on the document root so teleported overlays inherit the same theme. */
.homelab-theme {
  --home-canvas: #fcfcfc;
  --home-raised: #fff;
  --home-inset: #f0f0f0;
  --home-hover: #e8e8e8;
  --home-ink: #202020;
  --home-secondary: #646464;
  --home-tertiary: #646464;
  --home-muted: #707070;
  --home-edge: rgba(0, 0, 0, 0.1);
  --home-focus: #0d74ce;
  --home-star: #0d74ce;
  --home-star-wash: #e6f4fe;
  --home-action-contrast: #fff;
  --home-action-hover: #0965b5;
  --home-action-active: #07579d;
  --home-control-edge: #ddd;
  --home-danger: #ce2c31;
  --home-danger-wash: #feeceb;
  --home-danger-contrast: #fff;
  --home-success: #18794e;
  --home-warning: #9c6500;
  --home-overlay-shadow: 0 8px 24px #0001;
  --home-font: "Avenir Next", "Avenir", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --home-radius-small: 4px;
  --home-radius-control: 8px;
  --home-space-1: 4px;
  --home-space-2: 8px;
  --home-space-3: 12px;
  --home-space-4: 16px;
  --home-space-5: 20px;
  --home-space-6: 24px;
  background: var(--home-canvas);
  color: var(--home-ink);
  font-family: var(--home-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

.homelab-theme.dark {
  --home-canvas: #111111;
  --home-raised: #191919;
  --home-inset: #111111;
  --home-hover: #2a2a2a;
  --home-ink: #eeeeee;
  --home-secondary: #b4b4b4;
  --home-tertiary: #b4b4b4;
  --home-muted: #909090;
  --home-edge: rgba(255, 255, 255, 0.1);
  --home-focus: #70b8ff;
  --home-star: #70b8ff;
  --home-star-wash: #0d2847;
  --home-action-contrast: #111111;
  --home-action-hover: #8ec8ff;
  --home-action-active: #b1d9ff;
  --home-control-edge: #3a3a3a;
  --home-danger: #ff9592;
  --home-danger-wash: #3b181a;
  --home-danger-contrast: #111111;
  --home-success: #65d6a4;
  --home-warning: #f0c76f;
  color-scheme: dark;
}