html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark {
  color-scheme: dark;

  --sc-bg: #0b1018;
  --sc-bg-elevated: #121923;
  --sc-bg-muted: #19222e;
  --sc-bg-subtle: #0f1620;

  --sc-text: #dce5ef;
  --sc-text-strong: #f8fafc;
  --sc-text-muted: #98a7b8;
  --sc-text-faint: #6f8093;

  --sc-border: #263241;
  --sc-border-strong: #344255;

  --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --sc-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
  --sc-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.42);
}

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

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

html[data-theme="dark"] .text-muted,
body[data-theme="dark"] .text-muted,
html[data-theme="dark"] .small-muted,
body[data-theme="dark"] .small-muted {
  color: var(--sc-text-muted) !important;
}

html[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
body[data-theme="dark"] .bg-light {
  background-color: var(--sc-bg-elevated) !important;
}

html[data-theme="dark"] #usagePreview,
body[data-theme="dark"] #usagePreview {
  background: var(--sc-bg-muted) !important;
  color: var(--sc-text) !important;
  border-color: var(--sc-border-strong) !important;
}

html[data-theme="dark"] #usagePreview strong,
body[data-theme="dark"] #usagePreview strong {
  color: var(--sc-text-strong) !important;
}

html[data-theme="dark"] .border,
body[data-theme="dark"] .border,
html[data-theme="dark"] .border-bottom,
body[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-top,
body[data-theme="dark"] .border-top {
  border-color: var(--sc-border) !important;
}