/*
 * Centralized Dark Mode Styles
 * Uses html[data-mode=dark] selector to automatically apply dark mode styles
 * without needing dark: classes on individual elements
 */

/* ==========================================================================
   Base Elements
   ========================================================================== */

/* Body and main content area */
html[data-mode=dark] body {
  background-color: #111827; /* gray-900 */
  color: #e5e7eb; /* gray-200 */
}

/* Headings */
html[data-mode=dark] h1,
html[data-mode=dark] h2,
html[data-mode=dark] h3,
html[data-mode=dark] h4,
html[data-mode=dark] h5,
html[data-mode=dark] h6 {
  color: #f3f4f6; /* gray-100 */
}

/* Paragraphs and general text */
html[data-mode=dark] p {
  color: #d1d5db; /* gray-300 */
}

/* Links */
html[data-mode=dark] a:not(.btn):not([class*="text-"]) {
  color: #93c5fd; /* blue-300 */
}

html[data-mode=dark] a:not(.btn):not([class*="text-"]):hover {
  color: #bfdbfe; /* blue-200 */
}

/* ==========================================================================
   Background Colors - Convert light backgrounds to dark
   ========================================================================== */

/* White backgrounds */
html[data-mode=dark] .bg-white {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Gray-50 backgrounds */
html[data-mode=dark] .bg-gray-50 {
  background-color: #111827 !important; /* gray-900 */
}

/* Gray-100 backgrounds */
html[data-mode=dark] .bg-gray-100 {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Gray-200 backgrounds */
html[data-mode=dark] .bg-gray-200 {
  background-color: #374151 !important; /* gray-700 */
}

/* Slate backgrounds */
html[data-mode=dark] .bg-slate-50 {
  background-color: #1e293b !important; /* slate-800 */
}

html[data-mode=dark] .bg-slate-100 {
  background-color: #1e293b !important; /* slate-800 */
}

/* ==========================================================================
   Hover Background Colors - Convert light hover backgrounds to dark
   ========================================================================== */

html[data-mode=dark] .hover\:bg-gray-50:hover {
  background-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .hover\:bg-gray-100:hover {
  background-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .hover\:bg-gray-200:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .hover\:bg-gray-300:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .hover\:bg-white:hover {
  background-color: #374151 !important; /* gray-700 */
}

/* ==========================================================================
   Text Colors - Convert dark text to light
   ========================================================================== */

/* Dark gray text */
html[data-mode=dark] .text-gray-900 {
  color: #f9fafb !important; /* gray-50 */
}

html[data-mode=dark] .text-gray-800 {
  color: #f3f4f6 !important; /* gray-100 */
}

html[data-mode=dark] .text-gray-700 {
  color: #e5e7eb !important; /* gray-200 */
}

html[data-mode=dark] .text-gray-600 {
  color: #d1d5db !important; /* gray-300 */
}

html[data-mode=dark] .text-gray-500 {
  color: #9ca3af !important; /* gray-400 */
}

/* Slate text colors */
html[data-mode=dark] .text-slate-900 {
  color: #f8fafc !important; /* slate-50 */
}

html[data-mode=dark] .text-slate-800 {
  color: #f1f5f9 !important; /* slate-100 */
}

html[data-mode=dark] .text-slate-700 {
  color: #e2e8f0 !important; /* slate-200 */
}

html[data-mode=dark] .text-slate-600 {
  color: #cbd5e1 !important; /* slate-300 */
}

html[data-mode=dark] .text-slate-500 {
  color: #94a3b8 !important; /* slate-400 */
}

/* Black text */
html[data-mode=dark] .text-black {
  color: #f9fafb !important; /* gray-50 */
}

/* ==========================================================================
   Border Colors - Convert light borders to dark
   ========================================================================== */

html[data-mode=dark] .border-gray-100 {
  border-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .border-gray-200 {
  border-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .border-gray-300 {
  border-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .border-slate-200 {
  border-color: #475569 !important; /* slate-600 */
}

html[data-mode=dark] .border-slate-300 {
  border-color: #475569 !important; /* slate-600 */
}

/* Divide colors */
html[data-mode=dark] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #4b5563 !important; /* gray-600 */
}

/* ==========================================================================
   Cards
   ========================================================================== */

html[data-mode=dark] .card {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .card-header {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .card-footer {
  border-color: #374151; /* gray-700 */
  background-color: #111827; /* gray-900 */
}

html[data-mode=dark] .card-title {
  color: #e2e8f0; /* slate-200 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

html[data-mode=dark] table {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] thead {
  background-color: #1f2937; /* gray-800 */
}

html[data-mode=dark] thead th {
  color: #d1d5db; /* gray-300 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] tbody tr {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] tbody td {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] tbody tr:hover {
  background-color: #374151; /* gray-700 */
}

/* Striped tables */
html[data-mode=dark] .table-striped tbody tr:nth-child(odd) {
  background-color: #111827; /* gray-900 */
}

html[data-mode=dark] .table-striped tbody tr:nth-child(even) {
  background-color: #1f2937; /* gray-800 */
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Text inputs, textareas, selects */
html[data-mode=dark] input[type="text"],
html[data-mode=dark] input[type="email"],
html[data-mode=dark] input[type="password"],
html[data-mode=dark] input[type="number"],
html[data-mode=dark] input[type="url"],
html[data-mode=dark] input[type="search"],
html[data-mode=dark] input[type="tel"],
html[data-mode=dark] input[type="date"],
html[data-mode=dark] input[type="datetime-local"],
html[data-mode=dark] input[type="time"],
html[data-mode=dark] textarea,
html[data-mode=dark] select {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

html[data-mode=dark] input::placeholder,
html[data-mode=dark] textarea::placeholder {
  color: #9ca3af; /* gray-400 */
}

html[data-mode=dark] input:focus,
html[data-mode=dark] textarea:focus,
html[data-mode=dark] select:focus {
  border-color: #6366f1; /* indigo-500 */
  background-color: #1f2937; /* gray-800 */
}

/* Form classes */
html[data-mode=dark] .form-input,
html[data-mode=dark] .form-textarea,
html[data-mode=dark] .form-select {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

/* Labels */
html[data-mode=dark] label {
  color: #d1d5db; /* gray-300 */
}

/* Checkboxes and radios */
html[data-mode=dark] .form-checkbox,
html[data-mode=dark] .form-radio {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
}

/* ==========================================================================
   Dropdowns and Menus
   ========================================================================== */

html[data-mode=dark] .dropdown-menu,
html[data-mode=dark] [data-fc-type="dropdown"] > div {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .dropdown-item {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] .dropdown-item:hover {
  background-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Modals
   ========================================================================== */

html[data-mode=dark] .modal-content,
html[data-mode=dark] [class*="fc-modal"] {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .modal-header {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .modal-footer {
  border-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Alerts and Notifications
   ========================================================================== */

html[data-mode=dark] .alert {
  border-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Badges
   ========================================================================== */

html[data-mode=dark] .badge-light {
  background-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Lists
   ========================================================================== */

html[data-mode=dark] ul,
html[data-mode=dark] ol {
  color: #d1d5db; /* gray-300 */
}

html[data-mode=dark] li {
  color: inherit;
}

/* List group */
html[data-mode=dark] .list-group-item {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Pagination
   ========================================================================== */

html[data-mode=dark] .pagination a,
html[data-mode=dark] .pagination span {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] .pagination a:hover {
  background-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Code and Pre
   ========================================================================== */

html[data-mode=dark] code {
  background-color: #374151; /* gray-700 */
  color: #f472b6; /* pink-400 */
}

html[data-mode=dark] pre {
  background-color: #111827; /* gray-900 */
  border-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Accordions
   ========================================================================== */

html[data-mode=dark] [data-fc-type="accordion"] {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] [data-fc-type="accordion"] button {
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Tabs
   ========================================================================== */

html[data-mode=dark] .nav-tabs {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .nav-tabs .nav-link {
  color: #9ca3af; /* gray-400 */
}

html[data-mode=dark] .nav-tabs .nav-link.active {
  background-color: #1f2937; /* gray-800 */
  color: #f3f4f6; /* gray-100 */
  border-color: #374151; /* gray-700 */
}

/* Reusable accessible tab strip — add `accessible-tabs` to the role="tablist" element. */
.accessible-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 0.5rem;
}

.accessible-tabs [role="tab"]:not(.active) {
  color: #4b5563; /* gray-600 — ≥4.5:1 on light page background */
}

.accessible-tabs [role="tab"]:not(.active):hover {
  color: #1e40af; /* blue-800 */
}

.accessible-tabs [role="tab"].active {
  background-color: #2563eb !important; /* blue-600 — white text ≥4.5:1 */
  color: #ffffff !important;
}

html[data-mode=dark] .accessible-tabs [role="tab"]:not(.active) {
  color: #d1d5db !important; /* gray-300 — ≥4.5:1 on gray-900 body */
}

html[data-mode=dark] .accessible-tabs [role="tab"]:not(.active):hover {
  color: #f9fafb !important; /* gray-50 */
}

html[data-mode=dark] .accessible-tabs [role="tab"].active {
  background-color: #2563eb !important; /* blue-600 — matches light mode */
  color: #ffffff !important;
}

/* ==========================================================================
   Prose / Rich Text - Invert typography variables for dark mode
   ========================================================================== */

html[data-mode=dark] .prose {
  --tw-prose-body: #d1d5db;        /* gray-300 */
  --tw-prose-headings: #f3f4f6;    /* gray-100 */
  --tw-prose-lead: #9ca3af;        /* gray-400 */
  --tw-prose-links: #93c5fd;       /* blue-300 */
  --tw-prose-bold: #f9fafb;        /* gray-50 */
  --tw-prose-counters: #9ca3af;    /* gray-400 */
  --tw-prose-bullets: #4b5563;     /* gray-600 */
  --tw-prose-hr: #374151;          /* gray-700 */
  --tw-prose-quotes: #f3f4f6;      /* gray-100 */
  --tw-prose-quote-borders: #374151; /* gray-700 */
  --tw-prose-captions: #9ca3af;    /* gray-400 */
  --tw-prose-code: #f9fafb;        /* gray-50 */
  --tw-prose-pre-code: #d1d5db;    /* gray-300 */
  --tw-prose-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-th-borders: #4b5563;  /* gray-600 */
  --tw-prose-td-borders: #374151;  /* gray-700 */
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

html[data-mode=dark] .tooltip {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */

html[data-mode=dark] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-mode=dark] ::-webkit-scrollbar-track {
  background-color: #1f2937; /* gray-800 */
}

html[data-mode=dark] ::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* gray-600 */
  border-radius: 4px;
}

html[data-mode=dark] ::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* gray-500 */
}

/* ==========================================================================
   Shadows - Softer shadows for dark mode
   ========================================================================== */

html[data-mode=dark] .shadow,
html[data-mode=dark] .shadow-sm,
html[data-mode=dark] .shadow-md,
html[data-mode=dark] .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Ring colors
   ========================================================================== */

html[data-mode=dark] .ring-gray-200 {
  --tw-ring-color: #374151; /* gray-700 */
}

html[data-mode=dark] .ring-gray-300 {
  --tw-ring-color: #4b5563; /* gray-600 */
}

/* ==========================================================================
   Specific Component Overrides
   ========================================================================== */

/* Simplebar scrollbar */
html[data-mode=dark] .simplebar-scrollbar::before {
  background-color: #4b5563; /* gray-600 */
}

/* Search inputs */
html[data-mode=dark] [type="search"] {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

/* File inputs */
html[data-mode=dark] input[type="file"] {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] input[type="file"]::file-selector-button {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

/* HR elements */
html[data-mode=dark] hr {
  border-color: #374151; /* gray-700 */
}

/* Blockquotes */
html[data-mode=dark] blockquote {
  border-color: #4b5563; /* gray-600 */
  color: #d1d5db; /* gray-300 */
}

/* Figure captions */
html[data-mode=dark] figcaption {
  color: #9ca3af; /* gray-400 */
}

/* ==========================================================================
   Markdown content
   ========================================================================== */

html[data-mode=dark] .markdown-content {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] .markdown-content h1,
html[data-mode=dark] .markdown-content h2,
html[data-mode=dark] .markdown-content h3,
html[data-mode=dark] .markdown-content h4,
html[data-mode=dark] .markdown-content h5,
html[data-mode=dark] .markdown-content h6 {
  color: #f3f4f6; /* gray-100 */
}

html[data-mode=dark] .markdown-content a {
  color: #93c5fd; /* blue-300 */
}

html[data-mode=dark] .markdown-content code {
  background-color: #374151; /* gray-700 */
  color: #f472b6; /* pink-400 */
}

html[data-mode=dark] .markdown-content pre {
  background-color: #111827; /* gray-900 */
}

html[data-mode=dark] .markdown-content blockquote {
  border-left-color: #6366f1; /* indigo-500 */
  background-color: #1f2937; /* gray-800 */
}

html[data-mode=dark] .markdown-content table th {
  background-color: #374151; /* gray-700 */
}

html[data-mode=dark] .markdown-content table td,
html[data-mode=dark] .markdown-content table th {
  border-color: #4b5563; /* gray-600 */
}

/* ==========================================================================
   Colored Badges/Tags - Better contrast for dark mode
   Light backgrounds (100) get converted to saturated mid-tones (700)
   Dark text (800) gets converted to light text (100-200)
   ========================================================================== */

/* Orange badges */
html[data-mode=dark] .bg-orange-100 {
  background-color: #c05621 !important; /* orange-700 */
}

html[data-mode=dark] .text-orange-800 {
  color: #fffaf0 !important; /* orange-50 */
}

/* Red badges */
html[data-mode=dark] .bg-red-100 {
  background-color: #b91c1c !important; /* red-700 */
}

html[data-mode=dark] .text-red-800 {
  color: #fef2f2 !important; /* red-50 */
}

/* Green badges */
html[data-mode=dark] .bg-green-100 {
  background-color: #047857 !important; /* green-700 */
}

html[data-mode=dark] .text-green-800 {
  color: #ecfdf5 !important; /* green-50 */
}

/* Blue badges */
html[data-mode=dark] .bg-blue-100 {
  background-color: #1d4ed8 !important; /* blue-700 */
}

html[data-mode=dark] .text-blue-800 {
  color: #eff6ff !important; /* blue-50 */
}

/* Yellow badges */
html[data-mode=dark] .bg-yellow-100 {
  background-color: #b45309 !important; /* yellow-700 */
}

html[data-mode=dark] .text-yellow-800 {
  color: #fffbeb !important; /* yellow-50 */
}

/* Bulk credential mint: keep warning readable in dark mode (global text remaps need a dark surface). */
html[data-mode=dark] .bulk-credential-secret-warning {
  background-color: #78350f !important; /* amber-900 */
  border-color: #b45309 !important; /* amber-700 */
}

/* Purple badges */
html[data-mode=dark] .bg-purple-100 {
  background-color: #6d28d9 !important; /* purple-700 */
}

html[data-mode=dark] .text-purple-800 {
  color: #f5f3ff !important; /* purple-50 */
}

/* Indigo badges */
html[data-mode=dark] .bg-indigo-100 {
  background-color: #4338ca !important; /* indigo-700 */
}

html[data-mode=dark] .text-indigo-800 {
  color: #eef2ff !important; /* indigo-50 */
}

/* Pink badges */
html[data-mode=dark] .bg-pink-100 {
  background-color: #be185d !important; /* pink-700 */
}

html[data-mode=dark] .text-pink-800 {
  color: #fdf2f8 !important; /* pink-50 */
}

/* Teal badges */
html[data-mode=dark] .bg-teal-100 {
  background-color: #0f766e !important; /* teal-700 */
}

html[data-mode=dark] .text-teal-800 {
  color: #f0fdfa !important; /* teal-50 */
}

/* Cyan badges */
html[data-mode=dark] .bg-cyan-100 {
  background-color: #0e7490 !important; /* cyan-700 */
}

html[data-mode=dark] .text-cyan-800 {
  color: #ecfeff !important; /* cyan-50 */
}

/* Emerald badges */
html[data-mode=dark] .bg-emerald-100 {
  background-color: #047857 !important; /* emerald-700 */
}

html[data-mode=dark] .text-emerald-800 {
  color: #ecfdf5 !important; /* emerald-50 */
}

/* Lime badges */
html[data-mode=dark] .bg-lime-100 {
  background-color: #4d7c0f !important; /* lime-700 */
}

html[data-mode=dark] .text-lime-800 {
  color: #f7fee7 !important; /* lime-50 */
}

/* Amber badges */
html[data-mode=dark] .bg-amber-100 {
  background-color: #b45309 !important; /* amber-700 */
}

html[data-mode=dark] .text-amber-800 {
  color: #fffbeb !important; /* amber-50 */
}

/* Sky badges */
html[data-mode=dark] .bg-sky-100 {
  background-color: #0369a1 !important; /* sky-700 */
}

html[data-mode=dark] .text-sky-800 {
  color: #f0f9ff !important; /* sky-50 */
}

/* Violet badges */
html[data-mode=dark] .bg-violet-100 {
  background-color: #6d28d9 !important; /* violet-700 */
}

html[data-mode=dark] .text-violet-800 {
  color: #f5f3ff !important; /* violet-50 */
}

/* Fuchsia badges */
html[data-mode=dark] .bg-fuchsia-100 {
  background-color: #a21caf !important; /* fuchsia-700 */
}

html[data-mode=dark] .text-fuchsia-800 {
  color: #fdf4ff !important; /* fuchsia-50 */
}

/* Rose badges */
html[data-mode=dark] .bg-rose-100 {
  background-color: #be123c !important; /* rose-700 */
}

html[data-mode=dark] .text-rose-800 {
  color: #fff1f2 !important; /* rose-50 */
}
/* ==========================================================================
   Responsive Width Utilities - Missing from base Tailwind
   These supplement the pre-compiled Tailwind CSS with responsive widths
   ========================================================================== */

/* Medium breakpoint (≥768px) width utilities */
@media (min-width: 768px) {
  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  /* Flex direction utilities */
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   Extended Colored Text Remaps — levels 600, 700, 900
   Pairs with the existing bg-{color}-100 → 700 / text-{color}-800 → 50 rules.
   Covers alert boxes (bg-X-50 + text-X-700), links (text-X-600), and
   deep-toned text (text-X-900) that would otherwise render dark on dark surfaces.
   ========================================================================== */

/* bg-{color}-50 alert backgrounds → dark mid-tones (paired with text-X-700 below) */
html[data-mode=dark] .bg-red-50    { background-color: #7f1d1d !important; } /* red-900   */
html[data-mode=dark] .bg-green-50  { background-color: #064e3b !important; } /* green-900 */
html[data-mode=dark] .bg-blue-50   { background-color: #1e3a5f !important; } /* blue-900  */
html[data-mode=dark] .bg-yellow-50 { background-color: #78350f !important; } /* amber-900 */
html[data-mode=dark] .bg-amber-50  { background-color: #78350f !important; } /* amber-900 */
html[data-mode=dark] .bg-orange-50 { background-color: #7c2d12 !important; } /* orange-900 */
html[data-mode=dark] .bg-purple-50 { background-color: #4c1d95 !important; } /* purple-900 */
html[data-mode=dark] .bg-indigo-50 { background-color: #312e81 !important; } /* indigo-900 */
html[data-mode=dark] .bg-sky-50    { background-color: #0c4a6e !important; } /* sky-900   */
html[data-mode=dark] .bg-teal-50   { background-color: #134e4a !important; } /* teal-900  */
html[data-mode=dark] .bg-cyan-50   { background-color: #164e63 !important; } /* cyan-900  */
html[data-mode=dark] .bg-emerald-50 { background-color: #064e3b !important; } /* emerald-900 */
html[data-mode=dark] .bg-lime-50   { background-color: #365314 !important; } /* lime-900  */
html[data-mode=dark] .bg-pink-50   { background-color: #831843 !important; } /* pink-900  */
html[data-mode=dark] .bg-rose-50   { background-color: #881337 !important; } /* rose-900  */
html[data-mode=dark] .bg-violet-50 { background-color: #4c1d95 !important; } /* violet-900 */
html[data-mode=dark] .bg-fuchsia-50 { background-color: #701a75 !important; } /* fuchsia-900 */

/* text-{color}-700 → light (paired with bg-X-50 above and existing bg-X-100) */
html[data-mode=dark] .text-red-700    { color: #fecaca !important; } /* red-200    */
html[data-mode=dark] .text-green-700  { color: #bbf7d0 !important; } /* green-200  */
html[data-mode=dark] .text-blue-700   { color: #bfdbfe !important; } /* blue-200   */
html[data-mode=dark] .text-yellow-700 { color: #fef08a !important; } /* yellow-200 */
html[data-mode=dark] .text-amber-700  { color: #fde68a !important; } /* amber-200  */
html[data-mode=dark] .text-orange-700 { color: #fed7aa !important; } /* orange-200 */
html[data-mode=dark] .text-purple-700 { color: #ddd6fe !important; } /* purple-200 */
html[data-mode=dark] .text-indigo-700 { color: #c7d2fe !important; } /* indigo-200 */
html[data-mode=dark] .text-sky-700    { color: #bae6fd !important; } /* sky-200    */
html[data-mode=dark] .text-teal-700   { color: #99f6e4 !important; } /* teal-200   */
html[data-mode=dark] .text-cyan-700   { color: #a5f3fc !important; } /* cyan-200   */
html[data-mode=dark] .text-emerald-700 { color: #a7f3d0 !important; } /* emerald-200 */
html[data-mode=dark] .text-lime-700   { color: #d9f99d !important; } /* lime-200   */
html[data-mode=dark] .text-pink-700   { color: #fbcfe8 !important; } /* pink-200   */
html[data-mode=dark] .text-rose-700   { color: #fecdd3 !important; } /* rose-200   */
html[data-mode=dark] .text-violet-700 { color: #ddd6fe !important; } /* violet-200 */
html[data-mode=dark] .text-fuchsia-700 { color: #f5d0fe !important; } /* fuchsia-200 */

/* text-{color}-600 → light (links, icons, and colored text at 600-level) */
html[data-mode=dark] .text-red-600    { color: #fca5a5 !important; } /* red-300    */
html[data-mode=dark] .text-green-600  { color: #86efac !important; } /* green-300  */
html[data-mode=dark] .text-blue-600   { color: #93c5fd !important; } /* blue-300   */
html[data-mode=dark] .text-yellow-600 { color: #fde047 !important; } /* yellow-300 */
html[data-mode=dark] .text-amber-600  { color: #fcd34d !important; } /* amber-300  */
html[data-mode=dark] .text-orange-600 { color: #fdba74 !important; } /* orange-300 */
html[data-mode=dark] .text-purple-600 { color: #c4b5fd !important; } /* purple-300 */
html[data-mode=dark] .text-indigo-600 { color: #a5b4fc !important; } /* indigo-300 */
html[data-mode=dark] .text-sky-600    { color: #7dd3fc !important; } /* sky-300    */
html[data-mode=dark] .text-teal-600   { color: #5eead4 !important; } /* teal-300   */
html[data-mode=dark] .text-cyan-600   { color: #67e8f9 !important; } /* cyan-300   */
html[data-mode=dark] .text-emerald-600 { color: #6ee7b7 !important; } /* emerald-300 */
html[data-mode=dark] .text-lime-600   { color: #bef264 !important; } /* lime-300   */
html[data-mode=dark] .text-pink-600   { color: #f9a8d4 !important; } /* pink-300   */
html[data-mode=dark] .text-rose-600   { color: #fda4af !important; } /* rose-300   */
html[data-mode=dark] .text-violet-600 { color: #c4b5fd !important; } /* violet-300 */
html[data-mode=dark] .text-fuchsia-600 { color: #f0abfc !important; } /* fuchsia-300 */

/* text-{color}-900 → very light (deep-toned text — e.g. text-blue-900 on bg-blue-50 info boxes) */
html[data-mode=dark] .text-red-900    { color: #fee2e2 !important; } /* red-100    */
html[data-mode=dark] .text-green-900  { color: #dcfce7 !important; } /* green-100  */
html[data-mode=dark] .text-blue-900   { color: #dbeafe !important; } /* blue-100   */
html[data-mode=dark] .text-yellow-900 { color: #fefce8 !important; } /* yellow-100 */
html[data-mode=dark] .text-amber-900  { color: #fffbeb !important; } /* amber-100  */
html[data-mode=dark] .text-orange-900 { color: #fff7ed !important; } /* orange-100 */
html[data-mode=dark] .text-purple-900 { color: #f5f3ff !important; } /* purple-100 */
html[data-mode=dark] .text-indigo-900 { color: #eef2ff !important; } /* indigo-100 */
html[data-mode=dark] .text-sky-900    { color: #e0f2fe !important; } /* sky-100    */
html[data-mode=dark] .text-teal-900   { color: #f0fdfa !important; } /* teal-100   */
html[data-mode=dark] .text-cyan-900   { color: #ecfeff !important; } /* cyan-100   */
html[data-mode=dark] .text-emerald-900 { color: #ecfdf5 !important; } /* emerald-100 */
html[data-mode=dark] .text-lime-900   { color: #f7fee7 !important; } /* lime-100   */
html[data-mode=dark] .text-pink-900   { color: #fdf2f8 !important; } /* pink-100   */
html[data-mode=dark] .text-rose-900   { color: #fff1f2 !important; } /* rose-100   */
html[data-mode=dark] .text-violet-900 { color: #f5f3ff !important; } /* violet-100 */
html[data-mode=dark] .text-fuchsia-900 { color: #fdf4ff !important; } /* fuchsia-100 */

/* text-primary and bg-primary/25 chips on darkened surfaces */
html[data-mode=dark] .text-primary {
  color: #93c5fd !important; /* blue-300 — visible on gray-800 card */
}
html[data-mode=dark] .bg-primary\/25 {
  background-color: rgba(48, 115, 241, 0.15) !important; /* slightly darker alpha */
}