@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Noto+Sans+Bengali:wght@300;400;500;600;700&display=swap');

:root {
  --color-primary: #1E40AF;
  --color-primary-hover: #1E3A8A;
  --color-success: #16A34A;
}

/* Tailwind is loaded via CDN in _Layout for Phase 0.
   In production, replace with built tailwind.css.
   This file holds only custom overrides. */

* { font-family: 'Plus Jakarta Sans','Noto Sans Bengali',system-ui,-apple-system,sans-serif; }

[lang="bn"] { font-family: 'Noto Sans Bengali','Plus Jakarta Sans',sans-serif; line-height: 1.8; }

/* Focus ring for a11y */
*:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Custom scrollbar for sidebar */
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }

/* Skeleton */
.skeleton { @apply animate-pulse bg-slate-200 rounded; }

/* =============================================================
   DARK THEME — class strategy (html.dark)
   Overrides for CDN Tailwind utilities without editing every view.
   Keeps contrast AAA: slate-100 on slate-800, muted on slate-400.
   ============================================================= */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0f172a; }

/* Surfaces */
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .bg-slate-50\/50 { background-color: rgba(30,41,59,0.5) !important; }
html.dark .bg-blue-50 { background-color: rgba(30,64,175,0.15) !important; }
html.dark .bg-amber-50 { background-color: rgba(180,83,9,0.12) !important; }
html.dark .bg-green-50 { background-color: rgba(22,101,52,0.12) !important; }
html.dark .bg-red-50 { background-color: rgba(153,27,27,0.12) !important; }

/* Borders */
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-slate-300 { border-color: #475569 !important; }
html.dark .border-blue-200 { border-color: #1e40af !important; }

/* Text — primary stays readable */
html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #64748b !important; }
html.dark .text-blue-800 { color: #60a5fa !important; }
html.dark .text-blue-900 { color: #93c5fd !important; }

/* Inputs */
html.dark input,
html.dark select,
html.dark textarea { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #475569 !important; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

/* Cards & hover */
html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }

/* Scrollbar dark */
html.dark .sidebar-scroll::-webkit-scrollbar-thumb { background: #475569; }

/* Prose / question stem */
html.dark .prose { color: #e2e8f0 !important; }
html.dark .prose p,
html.dark .prose li { color: #e2e8f0 !important; }

/* Badges — keep hue but lower saturation */
html.dark .bg-blue-50.text-blue-800 { background-color: rgba(37,99,235,0.2) !important; color: #93c5fd !important; }
html.dark .bg-amber-50.text-amber-700 { background-color: rgba(180,83,9,0.15) !important; color: #fcd34d !important; }
html.dark .bg-green-50.text-green-700 { background-color: rgba(22,101,52,0.2) !important; color: #86efac !important; }