/* ================================================
   DataQuest — Light Theme
   Activated by: html[data-theme="light"]
   ================================================ */

html[data-theme="light"] {

  /* Backgrounds */
  --bg-base:   #ffffff;
  --bg-1:      #f8f9fc;
  --bg-2:      #f1f3f8;
  --bg-3:      #e8ecf4;

  /* Borders */
  --b-subtle:  rgba(0,0,0,.07);
  --b-default: rgba(0,0,0,.12);
  --b-strong:  rgba(0,0,0,.22);

  /* Excel accent — stays blue but richer */
  --ex:        #2563eb;
  --ex-bright: #3b82f6;
  --ex-dim:    rgba(37,99,235,.09);
  --ex-glow:   rgba(37,99,235,.18);

  /* SQL accent — stays emerald but richer */
  --sq:        #059669;
  --sq-bright: #10b981;
  --sq-dim:    rgba(5,150,105,.09);
  --sq-glow:   rgba(5,150,105,.18);

  /* Text */
  --t-1:  #0f1117;
  --t-2:  #374162;
  --t-3:  #7c88a8;
  --t-4:  #c0c8dc;

  /* Feedback (slightly deeper for light bg) */
  --ok:    #059669;
  --ok-d:  rgba(5,150,105,.09);
  --err:   #dc2626;
  --err-d: rgba(220,38,38,.09);
  --warn:  #d97706;
  --warn-d:rgba(217,119,6,.09);
}

/* ── Body overrides ── */
html[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--t-1);
}

/* ── Nav ── */
html[data-theme="light"] .nav,
html[data-theme="light"] nav {
  background: rgba(255,255,255,.88);
  border-bottom-color: var(--b-subtle);
}

/* ── Home mesh orbs (lighter for white bg) ── */
html[data-theme="light"] .mesh-orb-1 {
  background: radial-gradient(ellipse, rgba(37,99,235,.10), transparent 70%);
}
html[data-theme="light"] .mesh-orb-2 {
  background: radial-gradient(ellipse, rgba(5,150,105,.07), transparent 70%);
}
html[data-theme="light"] .mesh-orb-3 {
  background: radial-gradient(ellipse, rgba(37,99,235,.04), transparent 70%);
}

/* Grid overlay lighter */
html[data-theme="light"] .grid-overlay {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}

/* ── Home nav specific ── */
html[data-theme="light"] .nav-logo-name { color: #0f1117; }
html[data-theme="light"] .nav-logo-dot  { color: #2563eb; }

html[data-theme="light"] .nav-xp {
  color: #059669;
  background: rgba(5,150,105,.08);
  border-color: rgba(5,150,105,.2);
}
html[data-theme="light"] .nav-xp-dot { background: #059669; }

html[data-theme="light"] .nav-link {
  color: rgba(0,0,0,.45);
  border-color: rgba(0,0,0,.1);
}
html[data-theme="light"] .nav-link:hover { color: rgba(0,0,0,.8); border-color: rgba(0,0,0,.2); }

/* ── Hero ── */
html[data-theme="light"] .hero-label {
  color: rgba(0,0,0,.45);
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.09);
}
html[data-theme="light"] .hero-label-dot {
  background: linear-gradient(135deg, #2563eb, #059669);
}
html[data-theme="light"] .hero-title { color: #0f1117; }
html[data-theme="light"] .hero-sub   { color: rgba(15,17,23,.5); }

html[data-theme="light"] .hero-stats {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
html[data-theme="light"] .hero-stat { border-right-color: rgba(0,0,0,.07); }
html[data-theme="light"] .hero-stat-val { color: #0f1117; }
html[data-theme="light"] .hero-stat-lbl { color: rgba(0,0,0,.38); }

/* ── Module cards ── */
html[data-theme="light"] .mod-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.09);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
html[data-theme="light"] .mod-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 0 0 1px var(--mc-accent) inset;
}
html[data-theme="light"] .mc-title  { color: #0f1117; }
html[data-theme="light"] .mc-desc   { color: rgba(15,17,23,.48); }
html[data-theme="light"] .mc-stats  { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
html[data-theme="light"] .mc-stat   { border-right-color: rgba(0,0,0,.06); }
html[data-theme="light"] .mc-stat-lbl { color: rgba(0,0,0,.32); }
html[data-theme="light"] .mc-topic  {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.4);
}

/* ── Sidebar ── */
html[data-theme="light"] .sidebar {
  background: var(--bg-1);
  border-right-color: var(--b-subtle);
}
html[data-theme="light"] .sb-info       { border-bottom-color: var(--b-subtle); }
html[data-theme="light"] .sb-info-label { color: var(--t-3); }
html[data-theme="light"] .sb-info-name  { color: var(--t-1); }
html[data-theme="light"] .sb-prog-track { background: var(--b-subtle); }
html[data-theme="light"] .sb-prog-label { color: var(--t-3); }
html[data-theme="light"] .sb-group-title { color: var(--t-3); }
html[data-theme="light"] .sb-group-count {
  background: var(--bg-2); color: var(--t-3); border-color: var(--b-subtle);
}
html[data-theme="light"] .sb-sep         { background: var(--b-subtle); }
html[data-theme="light"] .sb-item:hover  { background: rgba(0,0,0,.025); }
html[data-theme="light"] .sb-num         { color: var(--t-4); }
html[data-theme="light"] .sb-name        { color: var(--t-2); }
html[data-theme="light"] .sb-item.active .sb-name { color: var(--t-1); }

/* ── Challenge content ── */
html[data-theme="light"] .done-banner  { background: var(--ok-d); border-color: rgba(5,150,105,.2); }
html[data-theme="light"] .ch-breadcrumb { color: var(--t-3); }
html[data-theme="light"] .ch-title     { color: var(--t-1); }
html[data-theme="light"] .ch-desc {
  background: var(--bg-1);
  border-color: var(--b-subtle);
  color: var(--t-2);
}
html[data-theme="light"] .panel {
  background: var(--bg-1);
  border-color: var(--b-subtle);
}
html[data-theme="light"] .panel:hover  { border-color: var(--b-default); }
html[data-theme="light"] .panel-head   { border-bottom-color: var(--b-subtle); color: var(--t-3); }
html[data-theme="light"] .dt th { background: var(--bg-2); color: var(--t-3); border-bottom-color: var(--b-subtle); }
html[data-theme="light"] .dt td { border-bottom-color: var(--b-subtle); color: var(--t-1); }
html[data-theme="light"] .dt tr:hover td { background: rgba(0,0,0,.02); }
html[data-theme="light"] .dt-more  { color: var(--t-3) !important; }
html[data-theme="light"] .ref      { background: var(--bg-2); border-color: var(--b-subtle); }
html[data-theme="light"] .ref-lbl  { color: var(--t-3); }
html[data-theme="light"] .refs-note { color: var(--t-3); }

/* ── Answer box ── */
html[data-theme="light"] .answer-wrap { background: var(--bg-1); border-color: var(--b-subtle); }
html[data-theme="light"] .answer-bar  { background: var(--bg-2); border-bottom-color: var(--b-subtle); }
html[data-theme="light"] .answer-input { color: var(--t-1); }
html[data-theme="light"] .answer-input::placeholder { color: var(--t-4); }
html[data-theme="light"] .answer-input:read-only { color: var(--t-3); }
html[data-theme="light"] .answer-count { color: var(--t-4); }
html[data-theme="light"] .answer-actions { border: none; }
html[data-theme="light"] .btn-ghost {
  color: var(--t-2); border-color: var(--b-subtle);
}
html[data-theme="light"] .btn-ghost:hover:not(:disabled) { color: var(--t-1); border-color: var(--b-default); }
html[data-theme="light"] .btn-hint {
  border-color: var(--b-subtle); color: var(--t-3);
}
html[data-theme="light"] .feedback  { border-top-color: var(--b-subtle); }
html[data-theme="light"] .fb-success { background: linear-gradient(90deg, var(--ok-d), transparent); }
html[data-theme="light"] .fb-error   { background: linear-gradient(90deg, var(--err-d), transparent); }
html[data-theme="light"] .fb-msg    { color: var(--t-3); }
html[data-theme="light"] .hint-list { border-top-color: var(--b-subtle); }
html[data-theme="light"] .expected  { border-top-color: var(--b-subtle); color: var(--t-3); }
html[data-theme="light"] .hint-list { border-top-color: var(--b-subtle); }

/* ── Nav module page ── */
html[data-theme="light"] .hdr,
html[data-theme="light"] .nav.nav {
  background: rgba(255,255,255,.9);
  border-bottom-color: var(--b-subtle);
}
html[data-theme="light"] .nav-score {
  color: var(--cc, var(--ex));
}
html[data-theme="light"] .nav-btn {
  color: var(--t-3); border-color: var(--b-subtle);
}
html[data-theme="light"] .nav-btn:hover { color: var(--t-1); border-color: var(--b-default); }
html[data-theme="light"] .nav-module { color: var(--t-3); }
html[data-theme="light"] .nav-divider { background: var(--b-subtle); }
html[data-theme="light"] .nav-logo-name { color: var(--t-1); }

/* ── Progress bar ── */
html[data-theme="light"] .prog { background: var(--b-subtle); }

/* ── Footer ── */
html[data-theme="light"] .page-footer { border-top-color: var(--b-subtle); }
html[data-theme="light"] .footer-left  { color: var(--t-3); }
html[data-theme="light"] .footer-right { color: var(--t-4); }
html[data-theme="light"] footer { border-top-color: rgba(0,0,0,.07); color: rgba(0,0,0,.3); }
html[data-theme="light"] footer a { color: rgba(0,0,0,.45); }
html[data-theme="light"] footer a:hover { color: rgba(0,0,0,.7); }

/* ── Module bg overrides ── */
html[data-theme="light"] body::before {
  opacity: .5;
}

/* ── Responsive: stats 2x2 borders no light theme ── */
@media (max-width: 860px) {
  html[data-theme="light"] .hero-stat {
    border-bottom-color: rgba(0,0,0,.07) !important;
  }
  html[data-theme="light"] .hero-stat:nth-child(odd) {
    border-right-color: rgba(0,0,0,.07) !important;
  }
}