/* ============================================================
   Learnopia — Premium Dark Theme
   Tailwind v4 compatible: targets CSS custom properties.
   Palette: layered cool-gray (never pure black), high-contrast
   text, violet-tinted accents, soft shadows.
   ============================================================ */

/* ---------- Foundations ---------- */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0B0E14;
  color: #CBD5E1;
  transition: background-color .25s ease, color .25s ease;
}

/* Theme toggle: swap sun/moon */
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ---------- Surface layers (elevation via lightness) ---------- */
html.dark .bg-white,
html.dark [style*="background-color: white"],
html.dark [style*="background:white"] {
  background-color: #12161F !important;
}

html.dark .bg-\[\#F8F3FD\] {
  background-color: #0B0E14 !important;
}

html.dark .bg-white\/70 { background-color: rgba(18,22,31,.7) !important; }
html.dark .bg-white\/80 { background-color: rgba(18,22,31,.8) !important; }
html.dark .bg-white\/90 { background-color: rgba(18,22,31,.9) !important; }
html.dark .bg-white\/95 { background-color: rgba(18,22,31,.95) !important; }

html.dark .bg-slate-50 { background-color: #161C27 !important; }
html.dark .bg-slate-50\/50 { background-color: rgba(22,28,39,.5) !important; }
html.dark .bg-slate-100 { background-color: #1C2330 !important; }
html.dark .bg-slate-200 { background-color: #262E3D !important; }
html.dark .bg-slate-800 { background-color: #161C27 !important; }
html.dark .bg-slate-900 { background-color: #070A0F !important; }
html.dark .hover\:bg-slate-50:hover { background-color: #1C2330 !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #303948 !important; }
html.dark .focus\:bg-white:focus { background-color: #12161F !important; }

/* ---------- Tinted fills (translucent, color-matched) ---------- */
html.dark .bg-violet-50 { background-color: rgba(124,58,237,.12) !important; }
html.dark .bg-violet-50\/50 { background-color: rgba(124,58,237,.08) !important; }
html.dark .bg-violet-100 { background-color: rgba(124,58,237,.18) !important; }
html.dark .bg-violet-200 { background-color: rgba(124,58,237,.25) !important; }
html.dark .bg-violet-300\/25,
html.dark .bg-violet-300\/30,
html.dark .bg-violet-300\/40 { background-color: rgba(124,58,237,.25) !important; }
html.dark .hover\:bg-violet-50:hover { background-color: rgba(124,58,237,.20) !important; }
html.dark .hover\:bg-violet-100:hover { background-color: rgba(124,58,237,.28) !important; }

html.dark .bg-sky-50 { background-color: rgba(56,189,248,.12) !important; }
html.dark .bg-sky-100 { background-color: rgba(56,189,248,.18) !important; }
html.dark .bg-sky-300\/30,
html.dark .bg-sky-300\/40 { background-color: rgba(56,189,248,.25) !important; }
html.dark .hover\:bg-sky-50:hover { background-color: rgba(56,189,248,.20) !important; }
html.dark .hover\:bg-sky-100:hover { background-color: rgba(56,189,248,.28) !important; }

html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.12) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.18) !important; }
html.dark .bg-emerald-300\/30 { background-color: rgba(16,185,129,.22) !important; }
html.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,.20) !important; }
html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16,185,129,.28) !important; }

html.dark .bg-pink-50 { background-color: rgba(236,72,153,.12) !important; }
html.dark .bg-pink-100 { background-color: rgba(236,72,153,.18) !important; }
html.dark .bg-pink-300\/30,
html.dark .bg-pink-300\/40 { background-color: rgba(236,72,153,.25) !important; }
html.dark .hover\:bg-pink-50:hover { background-color: rgba(236,72,153,.20) !important; }
html.dark .hover\:bg-pink-100:hover { background-color: rgba(236,72,153,.28) !important; }

html.dark .bg-amber-50 { background-color: rgba(245,158,11,.12) !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,.18) !important; }
html.dark .bg-amber-300\/25,
html.dark .bg-amber-300\/30,
html.dark .bg-amber-300\/40 { background-color: rgba(245,158,11,.22) !important; }
html.dark .hover\:bg-amber-50:hover { background-color: rgba(245,158,11,.20) !important; }
html.dark .hover\:bg-amber-100:hover { background-color: rgba(245,158,11,.28) !important; }

html.dark .bg-orange-50 { background-color: rgba(249,115,22,.12) !important; }
html.dark .bg-orange-100 { background-color: rgba(249,115,22,.18) !important; }
html.dark .bg-orange-300\/30,
html.dark .bg-orange-300\/40 { background-color: rgba(249,115,22,.25) !important; }
html.dark .hover\:bg-orange-50:hover { background-color: rgba(249,115,22,.20) !important; }
html.dark .hover\:bg-orange-100:hover { background-color: rgba(249,115,22,.28) !important; }

html.dark .bg-rose-50 { background-color: rgba(244,63,94,.12) !important; }
html.dark .bg-rose-100 { background-color: rgba(244,63,94,.18) !important; }
html.dark .hover\:bg-rose-50:hover { background-color: rgba(244,63,94,.20) !important; }
html.dark .hover\:bg-rose-100:hover { background-color: rgba(244,63,94,.28) !important; }

html.dark .bg-red-100 { background-color: rgba(239,68,68,.18) !important; }
html.dark .hover\:bg-red-100:hover { background-color: rgba(239,68,68,.28) !important; }

html.dark .bg-indigo-50 { background-color: rgba(99,102,241,.12) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.18) !important; }
html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.20) !important; }
html.dark .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,.28) !important; }

html.dark .bg-teal-50 { background-color: rgba(13,148,136,.12) !important; }
html.dark .bg-teal-100 { background-color: rgba(13,148,136,.18) !important; }
html.dark .hover\:bg-teal-50:hover { background-color: rgba(13,148,136,.20) !important; }
html.dark .hover\:bg-teal-100:hover { background-color: rgba(13,148,136,.28) !important; }

html.dark .bg-lime-50 { background-color: rgba(132,204,22,.12) !important; }
html.dark .hover\:bg-lime-50:hover { background-color: rgba(132,204,22,.20) !important; }

html.dark .bg-cyan-50 { background-color: rgba(6,182,212,.12) !important; }
html.dark .hover\:bg-cyan-50:hover { background-color: rgba(6,182,212,.20) !important; }

html.dark .bg-green-100 { background-color: rgba(34,197,94,.18) !important; }
html.dark .hover\:bg-green-100:hover { background-color: rgba(34,197,94,.28) !important; }

html.dark .bg-purple-100 { background-color: rgba(168,85,247,.18) !important; }
html.dark .hover\:bg-purple-100:hover { background-color: rgba(168,85,247,.28) !important; }

html.dark .bg-blue-100 { background-color: rgba(59,130,246,.18) !important; }
html.dark .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,.28) !important; }

html.dark .bg-yellow-50 { background-color: rgba(234,179,8,.12) !important; }
html.dark .hover\:bg-yellow-50:hover { background-color: rgba(234,179,8,.20) !important; }

/* ---------- Borders ---------- */
html.dark .border-slate-100 { border-color: #1E2430 !important; }
html.dark .border-slate-200 { border-color: #272E3B !important; }
html.dark .border-slate-200\/70 { border-color: rgba(39,46,59,.7) !important; }
html.dark .border-slate-300 { border-color: #323B4C !important; }
html.dark .hover\:border-slate-300:hover { border-color: #3D4759 !important; }
html.dark .border-\[\#F8F3FD\] { border-color: #12161F !important; }

html.dark .border-violet-50 { border-color: rgba(124,58,237,.22) !important; }
html.dark .border-violet-100 { border-color: rgba(124,58,237,.32) !important; }
html.dark .border-violet-200 { border-color: rgba(124,58,237,.44) !important; }
html.dark .border-violet-300 { border-color: rgba(124,58,237,.56) !important; }
html.dark .hover\:border-violet-200:hover { border-color: rgba(124,58,237,.50) !important; }
html.dark .hover\:border-violet-300:hover { border-color: rgba(124,58,237,.66) !important; }

html.dark .border-sky-50 { border-color: rgba(56,189,248,.22) !important; }
html.dark .border-sky-100 { border-color: rgba(56,189,248,.32) !important; }
html.dark .border-sky-200 { border-color: rgba(56,189,248,.44) !important; }
html.dark .border-sky-300 { border-color: rgba(56,189,248,.56) !important; }
html.dark .hover\:border-sky-200:hover { border-color: rgba(56,189,248,.50) !important; }
html.dark .hover\:border-sky-300:hover { border-color: rgba(56,189,248,.66) !important; }

html.dark .border-emerald-50 { border-color: rgba(16,185,129,.22) !important; }
html.dark .border-emerald-100 { border-color: rgba(16,185,129,.32) !important; }
html.dark .border-emerald-200 { border-color: rgba(16,185,129,.44) !important; }
html.dark .border-emerald-300 { border-color: rgba(16,185,129,.56) !important; }
html.dark .hover\:border-emerald-200:hover { border-color: rgba(16,185,129,.50) !important; }
html.dark .hover\:border-emerald-300:hover { border-color: rgba(16,185,129,.66) !important; }

html.dark .border-pink-50 { border-color: rgba(236,72,153,.22) !important; }
html.dark .border-pink-100 { border-color: rgba(236,72,153,.32) !important; }
html.dark .border-pink-200 { border-color: rgba(236,72,153,.44) !important; }
html.dark .border-pink-300 { border-color: rgba(236,72,153,.56) !important; }
html.dark .hover\:border-pink-200:hover { border-color: rgba(236,72,153,.50) !important; }
html.dark .hover\:border-pink-300:hover { border-color: rgba(236,72,153,.66) !important; }

html.dark .border-amber-50 { border-color: rgba(245,158,11,.22) !important; }
html.dark .border-amber-100 { border-color: rgba(245,158,11,.32) !important; }
html.dark .border-amber-200 { border-color: rgba(245,158,11,.44) !important; }
html.dark .border-amber-300 { border-color: rgba(245,158,11,.56) !important; }
html.dark .hover\:border-amber-200:hover { border-color: rgba(245,158,11,.50) !important; }
html.dark .hover\:border-amber-300:hover { border-color: rgba(245,158,11,.66) !important; }

html.dark .border-orange-50 { border-color: rgba(249,115,22,.22) !important; }
html.dark .border-orange-100 { border-color: rgba(249,115,22,.32) !important; }
html.dark .border-orange-200 { border-color: rgba(249,115,22,.44) !important; }
html.dark .border-orange-300 { border-color: rgba(249,115,22,.56) !important; }
html.dark .hover\:border-orange-200:hover { border-color: rgba(249,115,22,.50) !important; }
html.dark .hover\:border-orange-300:hover { border-color: rgba(249,115,22,.66) !important; }

html.dark .border-rose-50 { border-color: rgba(244,63,94,.22) !important; }
html.dark .border-rose-100 { border-color: rgba(244,63,94,.32) !important; }
html.dark .border-rose-200 { border-color: rgba(244,63,94,.44) !important; }
html.dark .border-rose-300 { border-color: rgba(244,63,94,.56) !important; }
html.dark .hover\:border-rose-200:hover { border-color: rgba(244,63,94,.50) !important; }
html.dark .hover\:border-rose-300:hover { border-color: rgba(244,63,94,.66) !important; }

html.dark .border-red-100 { border-color: rgba(239,68,68,.32) !important; }
html.dark .border-red-200 { border-color: rgba(239,68,68,.44) !important; }
html.dark .border-red-300 { border-color: rgba(239,68,68,.56) !important; }
html.dark .hover\:border-red-200:hover { border-color: rgba(239,68,68,.50) !important; }
html.dark .hover\:border-red-300:hover { border-color: rgba(239,68,68,.66) !important; }

html.dark .border-indigo-100 { border-color: rgba(99,102,241,.32) !important; }
html.dark .border-indigo-200 { border-color: rgba(99,102,241,.44) !important; }
html.dark .border-indigo-300 { border-color: rgba(99,102,241,.56) !important; }
html.dark .hover\:border-indigo-200:hover { border-color: rgba(99,102,241,.50) !important; }
html.dark .hover\:border-indigo-300:hover { border-color: rgba(99,102,241,.66) !important; }

html.dark .border-teal-100 { border-color: rgba(13,148,136,.32) !important; }
html.dark .border-teal-200 { border-color: rgba(13,148,136,.44) !important; }
html.dark .border-teal-300 { border-color: rgba(13,148,136,.56) !important; }
html.dark .hover\:border-teal-200:hover { border-color: rgba(13,148,136,.50) !important; }
html.dark .hover\:border-teal-300:hover { border-color: rgba(13,148,136,.66) !important; }

html.dark .border-lime-100 { border-color: rgba(132,204,22,.32) !important; }
html.dark .border-lime-200 { border-color: rgba(132,204,22,.44) !important; }
html.dark .border-lime-300 { border-color: rgba(132,204,22,.56) !important; }
html.dark .hover\:border-lime-200:hover { border-color: rgba(132,204,22,.50) !important; }
html.dark .hover\:border-lime-300:hover { border-color: rgba(132,204,22,.66) !important; }

html.dark .border-cyan-100 { border-color: rgba(6,182,212,.32) !important; }
html.dark .border-cyan-200 { border-color: rgba(6,182,212,.44) !important; }
html.dark .border-cyan-300 { border-color: rgba(6,182,212,.56) !important; }
html.dark .hover\:border-cyan-200:hover { border-color: rgba(6,182,212,.50) !important; }
html.dark .hover\:border-cyan-300:hover { border-color: rgba(6,182,212,.66) !important; }

html.dark .border-green-100 { border-color: rgba(34,197,94,.32) !important; }
html.dark .border-green-200 { border-color: rgba(34,197,94,.44) !important; }
html.dark .border-green-300 { border-color: rgba(34,197,94,.56) !important; }
html.dark .hover\:border-green-200:hover { border-color: rgba(34,197,94,.50) !important; }
html.dark .hover\:border-green-300:hover { border-color: rgba(34,197,94,.66) !important; }

html.dark .border-blue-100 { border-color: rgba(59,130,246,.32) !important; }
html.dark .border-blue-200 { border-color: rgba(59,130,246,.44) !important; }
html.dark .border-blue-300 { border-color: rgba(59,130,246,.56) !important; }
html.dark .hover\:border-blue-200:hover { border-color: rgba(59,130,246,.50) !important; }
html.dark .hover\:border-blue-300:hover { border-color: rgba(59,130,246,.66) !important; }

html.dark .border-purple-100 { border-color: rgba(168,85,247,.32) !important; }
html.dark .border-purple-200 { border-color: rgba(168,85,247,.44) !important; }
html.dark .border-purple-300 { border-color: rgba(168,85,247,.56) !important; }
html.dark .hover\:border-purple-200:hover { border-color: rgba(168,85,247,.50) !important; }
html.dark .hover\:border-purple-300:hover { border-color: rgba(168,85,247,.66) !important; }

/* ---------- Text hierarchy (clear primary / secondary / muted) ---------- */
html.dark .text-slate-900 { color: #F7F8FA !important; }
html.dark .text-slate-800 { color: #EDEFF2 !important; }
html.dark .text-slate-700 { color: #D1D5DB !important; }
html.dark .text-slate-600 { color: #B0B8C4 !important; }
html.dark .text-slate-500 { color: #8A919D !important; }
html.dark .text-slate-400 { color: #6E7683 !important; }
html.dark .text-slate-400\/80 { color: rgba(110,118,131,.8) !important; }
html.dark .text-slate-400\/90 { color: rgba(110,118,131,.9) !important; }
html.dark .text-slate-300 { color: #64748B !important; }
html.dark .hover\:text-slate-600:hover { color: #D1D5DB !important; }
html.dark .hover\:text-slate-300:hover { color: #EDEFF2 !important; }

/* Brand accents — legible on dark */
html.dark .text-violet-600 { color: #A78BFA !important; }
html.dark .text-violet-700 { color: #C4B5FD !important; }
html.dark .text-violet-800 { color: #DDD6FE !important; }
html.dark .hover\:text-violet-600:hover { color: #C4B5FD !important; }
html.dark .hover\:text-violet-700:hover { color: #DDD6FE !important; }
html.dark .hover\:text-violet-800:hover { color: #EDE9FE !important; }
html.dark .text-sky-600 { color: #38BDF8 !important; }
html.dark .text-sky-700 { color: #7DD3FC !important; }
html.dark .hover\:text-sky-700:hover { color: #BAE6FD !important; }
html.dark .text-emerald-600 { color: #34D399 !important; }
html.dark .text-emerald-700 { color: #6EE7B7 !important; }
html.dark .text-emerald-800 { color: #A7F3D0 !important; }
html.dark .hover\:text-emerald-700:hover { color: #A7F3D0 !important; }
html.dark .hover\:text-emerald-800:hover { color: #D1FAE5 !important; }
html.dark .text-pink-600 { color: #F472B6 !important; }
html.dark .text-pink-700 { color: #F9A8D4 !important; }
html.dark .hover\:text-pink-700:hover { color: #FBCFE8 !important; }
html.dark .text-amber-600 { color: #FBBF24 !important; }
html.dark .text-amber-700 { color: #FCD34D !important; }
html.dark .text-amber-900 { color: #FDE68A !important; }
html.dark .text-orange-600 { color: #FB923C !important; }
html.dark .text-orange-700 { color: #FDBA74 !important; }
html.dark .text-rose-600 { color: #FB7185 !important; }
html.dark .text-rose-700 { color: #FDA4AF !important; }
html.dark .hover\:text-rose-700:hover { color: #FECDD3 !important; }
html.dark .text-red-600 { color: #F87171 !important; }
html.dark .text-rose-500 { color: #FB7185 !important; }
html.dark .text-indigo-600 { color: #818CF8 !important; }
html.dark .text-indigo-700 { color: #A5B4FC !important; }
html.dark .text-purple-600 { color: #C084FC !important; }
html.dark .text-cyan-600 { color: #22D3EE !important; }
html.dark .text-cyan-700 { color: #67E8F9 !important; }
html.dark .text-teal-600 { color: #2DD4BF !important; }
html.dark .text-lime-600 { color: #A3E635 !important; }
html.dark .text-green-600 { color: #4ADE80 !important; }
html.dark .text-blue-600 { color: #60A5FA !important; }

/* ---------- Gradient section tints ---------- */
html.dark .from-violet-50 { --tw-gradient-from: rgba(124,58,237,.14) !important; }
html.dark .from-violet-100 { --tw-gradient-from: rgba(124,58,237,.20) !important; }
html.dark .from-sky-50 { --tw-gradient-from: rgba(56,189,248,.14) !important; }
html.dark .from-sky-100 { --tw-gradient-from: rgba(56,189,248,.20) !important; }
html.dark .from-emerald-50 { --tw-gradient-from: rgba(16,185,129,.14) !important; }
html.dark .from-emerald-100 { --tw-gradient-from: rgba(16,185,129,.20) !important; }
html.dark .from-amber-50 { --tw-gradient-from: rgba(245,158,11,.14) !important; }
html.dark .from-amber-100 { --tw-gradient-from: rgba(245,158,11,.20) !important; }
html.dark .from-orange-50 { --tw-gradient-from: rgba(249,115,22,.14) !important; }
html.dark .from-orange-100 { --tw-gradient-from: rgba(249,115,22,.20) !important; }
html.dark .from-pink-50 { --tw-gradient-from: rgba(236,72,153,.14) !important; }
html.dark .from-pink-100 { --tw-gradient-from: rgba(236,72,153,.20) !important; }
html.dark .from-rose-50 { --tw-gradient-from: rgba(244,63,94,.14) !important; }
html.dark .from-rose-100 { --tw-gradient-from: rgba(244,63,94,.20) !important; }
html.dark .via-amber-50 { --tw-gradient-via: rgba(245,158,11,.07) !important; }
html.dark .via-rose-50,
html.dark .via-rose-50\/60 { --tw-gradient-via: rgba(251,113,133,.07) !important; }
html.dark .via-lime-50 { --tw-gradient-via: rgba(132,204,22,.07) !important; }
html.dark .via-orange-50 { --tw-gradient-via: rgba(249,115,22,.07) !important; }
html.dark .via-sky-50 { --tw-gradient-via: rgba(56,189,248,.07) !important; }
html.dark .via-teal-50 { --tw-gradient-via: rgba(13,148,136,.07) !important; }
html.dark .via-violet-50 { --tw-gradient-via: rgba(124,58,237,.07) !important; }
html.dark .to-orange-50 { --tw-gradient-to: rgba(249,115,22,.14) !important; }
html.dark .to-orange-100 { --tw-gradient-to: rgba(249,115,22,.20) !important; }
html.dark .to-blue-100 { --tw-gradient-to: rgba(59,130,246,.20) !important; }
html.dark .to-rose-100 { --tw-gradient-to: rgba(251,113,133,.20) !important; }
html.dark .to-teal-100 { --tw-gradient-to: rgba(13,148,136,.20) !important; }
html.dark .to-white,
html.dark .to-\[\#F8F3FD\] { --tw-gradient-to: #0B0E14 !important; }

/* ---------- Shadows ---------- */
html.dark .shadow-soft,
html.dark .shadow-card,
html.dark .shadow-panel,
html.dark .shadow-cardhover,
html.dark .shadow-bubble {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 32px -12px rgba(0,0,0,.55) !important;
}
html.dark .shadow-sm {
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px -2px rgba(0,0,0,.45) !important;
}
html.dark .shadow-lg {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px -14px rgba(0,0,0,.6) !important;
}
html.dark .shadow-2xl {
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 28px 64px -16px rgba(0,0,0,.7) !important;
}
html.dark .card-lift:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -16px rgba(0,0,0,.7) !important;
}
html.dark .stat-card:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 44px -16px rgba(0,0,0,.7) !important;
}

/* ---------- Header / nav ---------- */
html.dark header {
  background-color: rgba(11,14,20,.88) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Wave dividers */
html.dark .text-\[\#F8F3FD\] { color: #0B0E14 !important; }

/* ---------- Theme toggle ---------- */
html.dark .theme-toggle {
  background-color: rgba(255,255,255,.08) !important;
  color: #B0B8C4 !important;
}
html.dark .theme-toggle:hover {
  background-color: rgba(255,255,255,.14) !important;
  color: #F7F8FA !important;
}
html.dark .theme-toggle:active { transform: scale(.9); }

/* ---------- Inputs & focus ---------- */
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #8B7CFF !important;
  box-shadow: 0 0 0 3px rgba(139,124,255,.25) !important;
}
html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark [tabindex]:focus-visible {
  outline: 2px solid rgba(139,124,255,.70);
  outline-offset: 2px;
}

/* ---------- Selection & scrollbar ---------- */
html.dark ::selection { background: rgba(139,124,255,.35); color: #FFFFFF; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-thumb { background: #262E3D; border-radius: 9999px; border: 2px solid #0B0E14; }
html.dark ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Mobile menu dark fixes ---------- */
html.dark .peer-checked ~ .fixed .bg-white {
  background-color: #0F1219 !important;
}

/* ============================================================
   Light mode refinements
   ============================================================ */
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
html:not(.dark) a:focus-visible,
html:not(.dark) button:focus-visible,
html:not(.dark) [tabindex]:focus-visible {
  outline: 2px solid rgba(124,58,237,.55);
  outline-offset: 2px;
}