/* Variables for light theme (default) */
:root {
  --db-topbar-bg: #ffffff;
  --db-topbar-border: #e2e8f0;
  --db-back-color: #475569;
  --db-tag-color: var(--accent, #6366f1);
  --db-tag-bg: color-mix(in srgb, var(--accent, #6366f1) 10%, white);
  --db-tag-border: color-mix(in srgb, var(--accent, #6366f1) 25%, white);
  --db-title-color: #0f172a;
  --db-reload-color: #475569;
  --db-body-bg: #f1f5f9;
  --db-skeleton-bar-bg-1: #e2e8f0;
  --db-skeleton-bar-bg-2: #f1f5f9;
  --db-error-color: #64748b;
  --db-error-icon-color: #f59e0b;
  --db-error-title-color: #0f172a;
  --db-error-btn-bg: #fff;
  --db-error-btn-border: #e2e8f0;
  --db-error-btn-color: #0f172a;
  --db-topbar-h: 56px;
}

/* Dark theme overrides */
::deep body.dark {
  --db-topbar-bg: #1e293b;
  --db-topbar-border: #334155;
  --db-back-color: #cbd5e1;
  --db-tag-color: var(--accent, #6366f1);
  --db-tag-bg: color-mix(in srgb, var(--accent, #6366f1) 10%, #1e293b);
  --db-tag-border: color-mix(in srgb, var(--accent, #6366f1) 25%, #1e293b);
  --db-title-color: #f1f5f9;
  --db-reload-color: #cbd5e1;
  --db-body-bg: #0f172a;
  --db-skeleton-bar-bg-1: #334155;
  --db-skeleton-bar-bg-2: #1e293b;
  --db-error-color: #94a3b8;
  --db-error-icon-color: #f59e0b;
  --db-error-title-color: #f1f5f9;
  --db-error-btn-bg: #1f2937;
  --db-error-btn-border: #334155;
  --db-error-btn-color: #f1f5f9;
}