/* ===== EXOQUIZ THEME — CSS VARIABLES ===== */

:root {
  /* Brand colors (unchanged across themes) */
  --exoGold: #d4af37;
  --exoBlue: #2453ff;
  --exoInk: #0a1428;
  --exoIvory: #f7f7f7;

  /* Semantic tokens — light mode */
  --bg:           #ffffff;
  --bg2:          #f7f7f7;
  --bg3:          #f0f0f0;
  --bg4:          #e8e8e8;
  --text:         #0a1428;
  --text2:        rgba(10,20,40,.7);
  --text3:        rgba(10,20,40,.5);
  --border:       rgba(0,0,0,.12);
  --border2:      rgba(0,0,0,.06);
  --border3:      rgba(0,0,0,.04);
  --shadow-sm:    rgba(0,0,0,.06);
  --shadow-md:    rgba(0,0,0,.10);
  --shadow-lg:    rgba(0,0,0,.18);
  --navbar-bg:    rgba(255,255,255,.88);
  --card-bg:      #ffffff;
  --input-bg:     #ffffff;
  --overlay-bg:   rgba(0,0,0,.55);
  --sidebar-bg:   #ffffff;
  --badge-bg:     #fff9ef;
  --badge-ok-bg:  #eaf2ff;
  --badge-ok-txt: #175cd3;
  --badge-ok-bdr: #cfe0ff;
  --ivory-bg:     #f9f9f9;
}

html.dark {
  /* Semantic tokens — dark mode */
  --bg:           #111827;
  --bg2:          #1a2233;
  --bg3:          #1f2937;
  --bg4:          #2d3748;
  --text:         #e8edf5;
  --text2:        rgba(232,237,245,.7);
  --text3:        rgba(232,237,245,.45);
  --border:       rgba(255,255,255,.12);
  --border2:      rgba(255,255,255,.07);
  --border3:      rgba(255,255,255,.04);
  --shadow-sm:    rgba(0,0,0,.25);
  --shadow-md:    rgba(0,0,0,.35);
  --shadow-lg:    rgba(0,0,0,.55);
  --navbar-bg:    rgba(17,24,39,.92);
  --card-bg:      #1f2937;
  --input-bg:     #2d3748;
  --overlay-bg:   rgba(0,0,0,.75);
  --sidebar-bg:   #1a2233;
  --badge-bg:     rgba(212,175,55,.12);
  --badge-ok-bg:  rgba(36,83,255,.12);
  --badge-ok-txt: #93b4ff;
  --badge-ok-bdr: rgba(36,83,255,.3);
  --ivory-bg:     #1a2233;
}

/* ===== GLOBAL DARK OVERRIDES ===== */

html.dark body {
  background-color: var(--bg);
  color: var(--text);
}

/* ─── Tailwind utility class overrides ─── */
html.dark .bg-white  { background-color: var(--card-bg) !important; }
html.dark .bg-gray-50,
html.dark .bg-gray-100 { background-color: var(--bg2) !important; }
html.dark .bg-gray-200 { background-color: var(--bg3) !important; }

html.dark .text-gray-900,
html.dark .text-gray-800 { color: var(--text) !important; }
html.dark .text-gray-700,
html.dark .text-gray-600 { color: var(--text2) !important; }
html.dark .text-gray-500,
html.dark .text-gray-400 { color: var(--text3) !important; }

html.dark .border-gray-100,
html.dark .border-gray-200 { border-color: var(--border2) !important; }
html.dark .border-gray-300 { border-color: var(--border) !important; }

html.dark .divide-gray-100 > * + * { border-color: var(--border2) !important; }
html.dark .divide-gray-200 > * + * { border-color: var(--border) !important; }

/* Tailwind exo tokens */
html.dark .bg-exoIvory,
html.dark .from-exoIvory { background-color: var(--bg2) !important; }
html.dark .to-white { background-color: var(--bg) !important; }
html.dark .bg-gradient-to-b.from-exoIvory.to-white { background: linear-gradient(to bottom, var(--bg2), var(--bg)) !important; }
html.dark .text-exoInk { color: var(--text) !important; }

/* Inputs & forms */
html.dark input,
html.dark textarea,
html.dark select {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--text3) !important; }

/* Links */
html.dark a.text-exoInk\/70 { color: var(--text2) !important; }

/* ─── shadow-soft Tailwind plugin ─── */
html.dark .shadow-soft { box-shadow: 0 4px 16px var(--shadow-md) !important; }

/* ─── Borders with opacity ─── */
html.dark .border-exoInk\/10 { border-color: var(--border2) !important; }
html.dark .border-exoInk\/15 { border-color: var(--border) !important; }
html.dark .border-exoInk\/20 { border-color: var(--border) !important; }

/* ─── Hover backgrounds ─── */
html.dark .hover\:bg-exoIvory:hover { background-color: var(--bg3) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: var(--bg3) !important; }
html.dark .hover\:bg-gray-50:hover  { background-color: var(--bg2) !important; }

/* ─── Exo.css component overrides ─── */
html.dark .card {
  background: var(--card-bg);
  border-color: var(--border2);
  box-shadow: 0 4px 16px var(--shadow-sm);
}
html.dark .card:hover {
  box-shadow: 0 10px 24px var(--shadow-md);
}

html.dark header.navbar {
  background: var(--navbar-bg);
  border-bottom-color: var(--border2);
}

html.dark header.navbar nav a {
  color: #111;
}
html.dark header.navbar nav a.active {
  background-color: #111;
  color: #fff;
  border-color: #111;
}

html.dark .sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--border2);
}
html.dark .sidebar nav a {
  border-color: var(--border2);
  color: var(--text);
}
html.dark .sidebar nav a:hover {
  background: var(--bg3);
}

html.dark .badge {
  background: var(--badge-bg);
  border-color: var(--border);
  color: var(--text);
}
html.dark .badge.ok {
  background: var(--badge-ok-bg);
  color: var(--badge-ok-txt);
  border-color: var(--badge-ok-bdr);
}

html.dark .overlay {
  background: var(--overlay-bg);
}
html.dark .modal-card {
  background: var(--card-bg);
  border-color: var(--border2);
}

/* ─── Dark mode toggle button ─── */
#darkToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 10px var(--shadow-md);
  transition: background .2s, box-shadow .2s, transform .15s;
  line-height: 1;
}
#darkToggle:hover {
  box-shadow: 0 4px 18px var(--shadow-lg);
  transform: scale(1.1);
}