:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-contrast: #ffffff;
  --primary-dark: #1d4ed8;
  --danger: #ef4444;
  --success: #16a34a;

  --preview-bg: #f8fafc;
  --preview-text: #111827;
  --preview-muted: #6b7280;
  --preview-border: #e5e7eb;

  --background: var(--bg);
}

* {
  box-sizing: border-box;
}

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

.card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.card-muted {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-contrast);
  border: 1px solid var(--primary-dark);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

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

.preview-block {
  background: var(--preview-bg);
  color: var(--preview-text);
  border: 1px solid var(--preview-border);
  border-radius: 12px;
  padding: 12px;
}

.preview-frame {
  border: 1px dashed var(--preview-border);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.preview-block,
.preview-block * {
  color: var(--preview-text);
}

.preview-block .text-muted,
.preview-block .muted {
  color: var(--preview-muted) !important;
}

.preview-block .pill {
  background: var(--surface);
  border-color: var(--preview-border);
  color: var(--preview-text);
}

.preview-block input,
.preview-block textarea,
.preview-block select {
  background: var(--surface);
  color: var(--preview-text);
  border-color: var(--preview-border);
}

pre,
code {
  background: var(--surface-2);
  color: var(--text);
}

.bg-black,
.bg-dark,
.bg-gray-900,
.bg-slate-900,
.bg-neutral-900 {
  background: #ffffff !important;
  color: var(--text) !important;
}

.bg-black .text-white,
.bg-dark .text-white,
.bg-gray-900 .text-white,
.bg-slate-900 .text-white,
.bg-neutral-900 .text-white {
  color: var(--text) !important;
}

.dark,
[data-theme="dark"],
body.dark {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.dark .card,
[data-theme="dark"] .card,
body.dark .card,
.dark .panel,
[data-theme="dark"] .panel,
body.dark .panel,
.dark header,
[data-theme="dark"] header,
body.dark header,
.dark nav,
[data-theme="dark"] nav,
body.dark nav,
.dark main,
[data-theme="dark"] main,
body.dark main,
.dark footer,
[data-theme="dark"] footer,
body.dark footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[style*="background:#000"],
[style*="background: #000"],
[style*="background-color:#000"],
[style*="background-color: #000"],
[style*="background:#111"],
[style*="background: #111"],
[style*="background-color:#111"],
[style*="background-color: #111"],
[style*="background:#0f172a"],
[style*="background: #0f172a"],
[style*="background-color:#0f172a"],
[style*="background-color: #0f172a"],
[style*="background:#0b1220"],
[style*="background: #0b1220"],
[style*="background-color:#0b1220"],
[style*="background-color: #0b1220"],
[style*="background:rgb(0,0,0)"],
[style*="background: rgb(0,0,0)"],
[style*="background-color:rgb(0,0,0)"],
[style*="background-color: rgb(0,0,0)"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}