:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="dark"] body {
  background-color: #0b1220;
  color: #e2e8f0;
}

:root[data-theme="dark"] .bg-grid {
  background-image: radial-gradient(#1e293b 1px, transparent 1px);
}

:root[data-theme="dark"] .bg-white {
  background-color: #0f172a !important;
}

:root[data-theme="dark"] .bg-slate-50 {
  background-color: #111827 !important;
}

:root[data-theme="dark"] .bg-slate-100 {
  background-color: #0b1220 !important;
}

:root[data-theme="dark"] .bg-slate-200 {
  background-color: #1e293b !important;
}

:root[data-theme="dark"] .bg-slate-800 {
  background-color: #0f172a !important;
}

:root[data-theme="dark"] .bg-slate-900 {
  background-color: #020617 !important;
}

:root[data-theme="dark"] .bg-blue-50 {
  background-color: #0b253f !important;
}

:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800 {
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-slate-600 {
  color: #cbd5e1 !important;
}

:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-slate-300 {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .text-blue-600 {
  color: #60a5fa !important;
}

:root[data-theme="dark"] .text-blue-700 {
  color: #93c5fd !important;
}

:root[data-theme="dark"] .border-slate-900,
:root[data-theme="dark"] .border-slate-800 {
  border-color: #334155 !important;
}

:root[data-theme="dark"] .border-slate-700,
:root[data-theme="dark"] .border-slate-600 {
  border-color: #475569 !important;
}

:root[data-theme="dark"] .border-slate-500,
:root[data-theme="dark"] .border-slate-400 {
  border-color: #64748b !important;
}

:root[data-theme="dark"] .border-slate-300,
:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-slate-50 {
  border-color: #1e293b !important;
}

:root[data-theme="dark"] .ba-header-btn {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #e2e8f0;
}

:root[data-theme="dark"] .ba-header-btn:hover {
  color: #60a5fa;
  border-color: #60a5fa;
  box-shadow: 4px 4px 0px #0f172a;
}

:root[data-theme="dark"] .card-retro {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 6px 6px 0px #0f172a;
}

:root[data-theme="dark"] .card-retro:hover {
  border-color: #60a5fa;
  box-shadow: 10px 10px 0px #1e293b;
}

:root[data-theme="dark"] .panel-retro {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 6px 6px 0px #0f172a;
}

:root[data-theme="dark"] .input-retro {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

:root[data-theme="dark"] .input-retro:focus {
  border-color: #60a5fa;
  background: #0f172a;
}

:root[data-theme="dark"] .editor-container {
  background-color: #111827;
}

:root[data-theme="dark"] .paper-sheet {
  background: #0f172a;
  border-color: #e2e8f0;
}

:root[data-theme="dark"] .plain-editor {
  color: #e2e8f0;
}

:root[data-theme="dark"] .menu-panel {
  background: #0f172a;
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --ink: #e2e8f0;
  --panel: #0f172a;
  --accent: #60a5fa;
  --danger: #f87171;
  --grid: #1e293b;
  --border: 2px solid #e2e8f0;
  --shadow: 4px 4px 0px #0f172a;
}

:root[data-theme="dark"] {
  --bg-color: #0b1220;
  --ink-color: #e2e8f0;
  --white: #0f172a;
  --alert: #f97316;
  --border-thick: 4px solid var(--ink-color);
  --hard-shadow: 8px 8px 0px 0px #020617;
}

:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn-outline,
:root[data-theme="dark"] .primary-nav a {
  color: #e2e8f0;
}

:root[data-theme="dark"] .btn {
  background: #0f172a;
}

:root[data-theme="dark"] .btn-outline {
  border-color: #e2e8f0;
}

.btn-compact {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  :root[data-theme="dark"] .paper-sheet {
    background: #ffffff !important;
    border-color: #000000 !important;
  }
}