/* ===== Global dark mode overrides ===== */
/* These handle elements that aren't easily targeted with Tailwind dark: variants */

/* Lexxy editor CSS variable overrides for dark mode */
html.dark:root {
  --lexxy-color-ink: oklch(90% 0 0);
  --lexxy-color-ink-medium: oklch(70% 0 0);
  --lexxy-color-ink-light: oklch(50% 0 0);
  --lexxy-color-ink-lighter: oklch(30% 0 0);
  --lexxy-color-ink-lightest: oklch(20% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0.006 70);
  --lexxy-color-canvas: oklch(18% 0.008 70);
  --lexxy-color-text: oklch(90% 0 0);
  --lexxy-color-text-subtle: oklch(60% 0 0);
  --lexxy-color-code-bg: oklch(22% 0.010 70);
  --lexxy-color-table-header-bg: oklch(22% 0.010 70);
  --lexxy-color-table-cell-border: oklch(30% 0 0);
}

/* Form inputs with bg-white */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="url"],
.dark input[type="tel"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select {
  background-color: oklch(18% 0.008 70) !important;
  color: oklch(95% 0.008 70) !important;
  border-color: oklch(95% 0.008 70 / 0.2) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: oklch(48% 0.025 70) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: oklch(95% 0.008 70) !important;
}

/* Dropzone dark mode */
.dark .dropzone {
  border-color: oklch(95% 0.008 70 / 0.3);
  background-color: oklch(18% 0.008 70);
  color: oklch(95% 0.008 70);
}

.dark .dropzone .dz-message .dz-button {
  color: oklch(70% 0.025 70);
}

/* Notice / alert banners */
.dark .bg-taupe-200 {
  background-color: oklch(30% 0.015 70) !important;
  color: oklch(90% 0.012 70) !important;
}

/* Cards / surfaces using bg-white or bg-white/50 */
.dark [class*="bg-white"] {
  background-color: oklch(22% 0.010 70) !important;
}

/* Borders referencing taupe-950 in dark mode should lighten */
/* Handled by Tailwind dark: variants mostly, this is fallback */

/* Theme color meta tag — update dynamically */
/* Handled in theme_controller.js */

/* Lightbox — already dark, no changes needed */

/* Action Text rendered content in dark mode */
.dark .trix-content,
.dark action-text-attachment {
  color: oklch(95% 0.008 70);
}

.dark .trix-content a {
  color: oklch(70% 0.025 70);
}