:root {
  color-scheme: light;
}

/* Dark mode
   Tailwind v4 maps utilities to CSS variables (e.g. --color-gray-50),
   so swapping the grayscale palette gets broad coverage without rewriting templates. */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Invert the gray scale for dark UI */
  --color-gray-50: #0b1220;
  --color-gray-100: #0f172a;
  --color-gray-200: #1f2937;
  --color-gray-300: #334155;
  --color-gray-400: #475569;
  --color-gray-500: #64748b;
  --color-gray-600: #94a3b8;
  --color-gray-700: #cbd5e1;
  --color-gray-800: #e2e8f0;
  --color-gray-900: #f8fafc;
}

/* Fix hard-coded Tailwind colors that don't use variables */
html[data-theme="dark"] .bg-white {
  background-color: var(--color-gray-100);
}

/* Subtle borders and rings on dark surfaces */
html[data-theme="dark"] .border-gray-200 {
  border-color: var(--color-gray-200);
}

html[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

/* Markdown dark-mode overrides */
html[data-theme="dark"] .markdown-content :not(pre) > code {
  background-color: rgba(148, 163, 184, 0.18);
  color: #fb7185;
}

html[data-theme="dark"] .markdown-content pre {
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
  border: 0;
}

html[data-theme="dark"] .markdown-content pre.code-output {
  background-color: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.22);
}

html[data-theme="dark"] .markdown-content pre code.hljs {
  background-color: transparent;
  color: var(--color-gray-900);
}

html[data-theme="dark"] .markdown-content [data-callout] {
  color: var(--color-gray-900) !important;
}

html[data-theme="dark"] .markdown-content [data-callout="note"] {
  background-color: rgba(56, 189, 248, 0.08) !important;
  border-left-color: #38bdf8 !important;
}

html[data-theme="dark"] .markdown-content [data-callout="tip"] {
  background-color: rgba(52, 211, 153, 0.08) !important;
  border-left-color: #34d399 !important;
}

html[data-theme="dark"] .markdown-content [data-callout="warning"] {
  background-color: rgba(251, 191, 36, 0.10) !important;
  border-left-color: #fbbf24 !important;
}

/* Quiz modal + answers */
html[data-theme="dark"] #quiz-modal .bg-white {
  background-color: var(--color-gray-50);
}

html[data-theme="dark"] #quiz-modal .answer-option {
  border-color: var(--color-gray-300) !important;
  background-color: var(--color-gray-100) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] #quiz-modal .answer-option:hover {
  border-color: #60a5fa !important; /* blue-400 */
  background-color: rgba(96, 165, 250, 0.12) !important;
}

html[data-theme="dark"] #quiz-modal .answer-option.selected {
  border-color: #60a5fa !important; /* blue-400 */
  background-color: rgba(96, 165, 250, 0.14) !important;
}

html[data-theme="dark"] #quiz-modal input[type="radio"] {
  background-color: transparent;
  border-color: var(--color-gray-400);
  accent-color: #60a5fa;
}