/* ============================================
   UNIFIED LIGHT THEME
   Single source of truth for all pages
   ============================================ */

html.light-mode {
  color-scheme: light;
}

/* Base Background & Text Colors */
html.light-mode body {
  background: linear-gradient(to bottom right, #f8fafc, #e0e7ff, #f8fafc) !important;
  color: #1e293b !important;
}

/* Navigation */
html.light-mode nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: rgba(226, 232, 240, 0.8) !important;
}

/* Text Colors - Comprehensive */
html.light-mode .text-white,
html.light-mode nav .text-white,
html.light-mode #sidebar .text-white {
  color: #0f172a !important;
}

html.light-mode .text-slate-200,
html.light-mode nav .text-slate-200,
html.light-mode #sidebar .text-slate-200 {
  color: #334155 !important;
}

html.light-mode .text-slate-300,
html.light-mode nav .text-slate-300,
html.light-mode #sidebar .text-slate-300 {
  color: #475569 !important;
}

html.light-mode .text-slate-400,
html.light-mode nav .text-slate-400,
html.light-mode #sidebar .text-slate-400 {
  color: #64748b !important;
}

html.light-mode .text-slate-500 {
  color: #94a3b8 !important;
}

/* Background Colors */
html.light-mode .bg-slate-800\/50,
html.light-mode .bg-slate-800\/40 {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
}

html.light-mode .bg-slate-900\/50,
html.light-mode .bg-slate-900\/30 {
  background: rgba(248, 250, 252, 0.9) !important;
}

html.light-mode .bg-slate-950\/50,
html.light-mode .bg-slate-950\/80 {
  background: rgba(248, 250, 252, 0.9) !important;
}

html.light-mode .bg-slate-800 {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

html.light-mode .bg-slate-700 {
  background: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light-mode .bg-slate-900\/10 {
  background: rgba(241, 245, 249, 0.3) !important;
}

/* Border Colors */
html.light-mode .border-slate-600,
html.light-mode .border-slate-700,
html.light-mode .border-slate-700\/30 {
  border-color: #cbd5e1 !important;
}

html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/50 {
  border-color: #e2e8f0 !important;
}

/* Hover States */
html.light-mode .hover\:bg-slate-800:hover {
  background: #e2e8f0 !important;
}

html.light-mode .hover\:bg-slate-700:hover {
  background: #cbd5e1 !important;
}

html.light-mode .hover\:bg-slate-600:hover {
  background: #94a3b8 !important;
}

html.light-mode .hover\:bg-slate-900:hover {
  background: #f1f5f9 !important;
}

html.light-mode .hover\:border-slate-500:hover {
  border-color: #94a3b8 !important;
}

/* Form Elements */
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder,
html.light-mode .placeholder-slate-500::placeholder {
  color: #94a3b8 !important;
}

html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
  border-color: #3b82f6 !important;
  ring-color: #3b82f6 !important;
}

/* Gradient Adjustments */
html.light-mode .bg-gradient-to-r {
  filter: saturate(1.2);
}

html.light-mode .bg-gradient-to-r.from-blue-600 {
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39);
}

html.light-mode .bg-gradient-to-br.from-slate-800\/50 {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.9)) !important;
}

html.light-mode .bg-gradient-to-br.from-blue-600\/20 {
  background: linear-gradient(to bottom right, rgba(219, 234, 254, 0.9), rgba(233, 213, 255, 0.9)) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* Sidebar (for app.html) */
html.light-mode #sidebar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
}

/* Info Banners */
html.light-mode .bg-amber-500\/10 {
  background: rgba(251, 191, 36, 0.15) !important;
}

html.light-mode .border-amber-500\/30 {
  border-color: rgba(245, 158, 11, 0.4) !important;
}

html.light-mode .text-amber-200 {
  color: #92400e !important;
}

html.light-mode .text-amber-100 {
  color: #78350f !important;
}

/* Code Blocks */
html.light-mode code {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}