/* Dyslexic font — OpenDyslexic via CDN */
@import url('https://fonts.cdnfonts.com/css/opendyslexic');

body.dys-font,
body.dys-font * {
  font-family: 'OpenDyslexic', sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.15em;
  line-height: 1.8;
}

/* UX Polish — Focus states */
*:focus-visible {
  outline: 3px solid rgba(0, 51, 153, 0.5);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar in mobile preview (iOS-like behavior) */
.mobile-scroll-hidden::-webkit-scrollbar {
  display: none;
}
.mobile-scroll-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── CSS Variables for theme palette ─── */
:root {
  --color-primary: 0 51 153;
  --color-primary-hex: #003399;
  --color-primary-light: 239 246 255;
  --color-primary-hover: 10 30 110;
}

/* ─── Dark mode ─── */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}
html.dark .bg-white {
  background-color: #1e293b !important;
}
html.dark .bg-\[\#F8FAFC\],
html.dark .bg-slate-50,
html.dark .bg-slate-50\/50 {
  background-color: #0f172a !important;
}
html.dark .text-slate-800 {
  color: #f1f5f9 !important;
}
html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}
html.dark .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark .text-slate-400 {
  color: #64748b !important;
}
html.dark .border-slate-100,
html.dark .border-slate-50 {
  border-color: #334155 !important;
}
html.dark .border-slate-200 {
  border-color: #475569 !important;
}
html.dark .shadow-soft {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
html.dark .shadow-floating {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}
html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}
html.dark input,
html.dark textarea,
html.dark select {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #475569 !important;
}
html.dark .bg-blue-50,
html.dark .bg-sky-50,
html.dark .bg-emerald-50,
html.dark .bg-amber-50,
html.dark .bg-red-50,
html.dark .bg-purple-50,
html.dark .bg-teal-50,
html.dark .bg-green-50 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark .bg-slate-100 {
  background-color: #334155 !important;
}