:root{
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --navbar-bg: #f8f9fa;
  --border: rgba(0,0,0,.125);
}

/* tema oscuro */
[data-theme="dark"]{
  --bg: #0d1117;
  --text: #e6edf3;
  --muted: #9aa4ad;
  --navbar-bg: #0b1220;
  --border: rgba(255,255,255,.08);
}

/* tema prueba */
[data-theme="prueba"]{
  --bg: #ffffff;
  --text: #000000;
  --muted: #555555;
  --navbar-bg: #aaaaaa;
  --border: rgba(255,255,255,.08);
}

[data-theme="solar"]{
  --bg: #fff7e6;
  --text: #3b2f2f;
  --muted: #8a6b4a;
  --navbar-bg: #ffdca8;
  --border: rgba(59,47,47,.12);
}

/* tema alto contraste */
[data-theme="high-contrast"]{
  --bg: #000000;
  --text: #ffffff;
  --muted: #cccc00;
  --navbar-bg: #111111;
  --border: rgba(255,255,255,.2);
}


/* usar variables */
body{
  background: var(--bg);
  color: var(--text);
}
.navbar{
  background: var(--navbar-bg) !important;
  border-color: var(--border) !important;
}
.text-muted{ color: var(--muted) !important; }