/* ==========================================================================
   Dark Monochrome Override — RLC Protocol Course (Tailwind v4)
   ========================================================================== */

/* Override Tailwind v4 CSS custom color properties to monochrome */
:root, :host {
  --color-sky-50: #1c1c1c !important;
  --color-sky-100: #222222 !important;
  --color-sky-200: #2a2a2a !important;
  --color-sky-400: #aaaaaa !important;
  --color-sky-500: #ffffff !important;
  --color-sky-600: #e0e0e0 !important;

  --color-indigo-50: #1c1c1c !important;
  --color-indigo-500: #ffffff !important;
  --color-indigo-600: #e0e0e0 !important;

  --color-slate-50: #111111 !important;
  --color-slate-100: #161616 !important;
  --color-slate-200: #2a2a2a !important;
  --color-slate-400: #888888 !important;
  --color-slate-500: #aaaaaa !important;
  --color-slate-600: #cccccc !important;
  --color-slate-700: #e0e0e0 !important;
  --color-slate-800: #f0f0f0 !important;
  --color-slate-900: #0a0a0a !important;

  --color-gray-50: #111111 !important;
  --color-gray-100: #161616 !important;
  --color-gray-200: #2a2a2a !important;
  --color-gray-300: #333333 !important;
  --color-gray-400: #888888 !important;
  --color-gray-500: #aaaaaa !important;
  --color-gray-700: #e0e0e0 !important;
  --color-gray-800: #0a0a0a !important;
  --color-gray-900: #f5f5f5 !important;

  --color-white: #ffffff !important;
  --color-black: #ffffff !important;
}

/* Body override */
body {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
}

/* bg-white → dark card */
.bg-white {
  background-color: #161616 !important;
}

/* bg-black stays dark */
.bg-black {
  background-color: #0a0a0a !important;
}

/* text-white stays white */
.text-white {
  color: #ffffff !important;
}

/* text-black → white on dark */
.text-black {
  color: #f5f5f5 !important;
}

/* border-black → subtle border */
.border-black,
.hover\:border-black:hover,
.focus\:border-black:focus {
  border-color: #333333 !important;
}

/* bg-white/20 → subtle white overlay */
.bg-white\/20 {
  background-color: rgba(255,255,255,0.08) !important;
}

/* Gradient overrides */
.from-white {
  --tw-gradient-from: #1c1c1c !important;
}

.from-slate-800 {
  --tw-gradient-from: #0a0a0a !important;
}

.from-slate-50 {
  --tw-gradient-from: #111111 !important;
}

.from-sky-500 {
  --tw-gradient-from: #ffffff !important;
}

.from-sky-600 {
  --tw-gradient-from: #e0e0e0 !important;
}

.to-slate-50 {
  --tw-gradient-to: #111111 !important;
}

.to-slate-100 {
  --tw-gradient-to: #161616 !important;
}

.to-slate-900 {
  --tw-gradient-to: #0a0a0a !important;
}

.to-indigo-500 {
  --tw-gradient-to: #888888 !important;
}

.to-indigo-600 {
  --tw-gradient-to: #aaaaaa !important;
}

/* Hover states */
.hover\:bg-gray-800:hover {
  background-color: #222222 !important;
}

.hover\:from-sky-50:hover {
  --tw-gradient-from: #1c1c1c !important;
}

.hover\:from-slate-100:hover {
  --tw-gradient-from: #1c1c1c !important;
}

.hover\:to-indigo-50:hover {
  --tw-gradient-to: #222222 !important;
}

.hover\:text-gray-900:hover {
  color: #f5f5f5 !important;
}

/* Divide color */
.divide-gray-700 > :not(:last-child) {
  border-color: #2a2a2a !important;
}

/* Scrollbar dark theme */
::-webkit-scrollbar-track {
  background: #111111 !important;
}

::-webkit-scrollbar-thumb {
  background: #333333 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555 !important;
}

/* Shadow adjustments for dark bg */
.shadow, .shadow-sm, .shadow-md, .shadow-lg {
  --tw-shadow-color: rgba(0,0,0,0.4) !important;
}

/* bg-transparent text fix - ensure text is readable */
.bg-transparent {
  color: #f5f5f5 !important;
}

/* Fix gradient text (bg-clip-text + text-transparent) to use monochrome gradient */
.bg-clip-text.text-transparent {
  background-image: linear-gradient(135deg, #ffffff 0%, #888888 100%) !important;
}

/* Line-through text */
.line-through {
  text-decoration-color: #666666 !important;
}

/* Table styling */
table {
  border-color: #2a2a2a !important;
}

th {
  background: #1c1c1c !important;
  border-color: #2a2a2a !important;
  color: #f5f5f5 !important;
}

td {
  border-color: #2a2a2a !important;
  color: #cccccc !important;
}