/* =========================================================
   BoxBg.Net — Light / Dark / Auto (system) themes
   Theme is applied via <html data-theme="light|dark">
   ========================================================= */

/* ---------- Light theme (default) ---------- */
:root {
  --bg: #ffffff;
  --text: #5a5a5a;

  --navbar-bg: #f8f8f8;
  --navbar-border: #e7e7e7;
  --navbar-text: #777777;
  --navbar-hover-bg: #e7e7e7;
  --navbar-active-bg: #e7e7e7;
  --navbar-hover-text: #333333;
  --brand-color: #333333;

  --jumbotron-bg: #e6e6e6;
  --jumbotron-text: #5a5a5a;

  --link: #114A9F;
  --link-hover: #E60E00;

  --well-bg: #f5f5f5;
  --well-border: #e3e3e3;

  --hr: #e5e5e5;
  --row-hover: rgba(235, 235, 235, 0.80);
  --btt-bg: rgba(235, 235, 235, 0.80);
  --btt-bg-hover: rgba(135, 135, 135, 0.50);
  --btt-text: #000000;
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  --bg: #121212;
  --text: #d4d4d4;

  --navbar-bg: #1c1c1e;
  --navbar-border: #2c2c2e;
  --navbar-text: #c7c7cc;
  --navbar-hover-bg: #2c2c2e;
  --navbar-active-bg: #3a3a3c;
  --navbar-hover-text: #ffffff;
  --brand-color: #ffffff;

  --jumbotron-bg: #1a1a1c;
  --jumbotron-text: #e5e5e5;

  --link: #7ab8ff;
  --link-hover: #ff8a65;

  --well-bg: #1c1c1e;
  --well-border: #2c2c2e;

  --hr: #2c2c2e;
  --row-hover: rgba(44, 44, 46, 0.80);
  --btt-bg: rgba(28, 28, 30, 0.90);
  --btt-bg-hover: rgba(74, 74, 76, 0.90);
  --btt-text: #e5e5e5;

  color-scheme: dark;
}

/* ---------- Apply theme to elements ---------- */
body {
  background-color: var(--bg);
}

/* Navbar */
.navbar-default {
  background-color: var(--navbar-bg);
  border-color: var(--navbar-border);
}
.navbar-default .navbar-brand {
  color: var(--brand-color);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: var(--navbar-hover-text);
}
.navbar-default .navbar-nav > li > a {
  color: var(--navbar-text);
  font-size: 18px;
  font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--navbar-hover-text);
  background-color: var(--navbar-hover-bg);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--navbar-hover-text);
  background-color: var(--navbar-active-bg);
}
.navbar-default .navbar-toggle {
  border-color: var(--navbar-border);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--navbar-hover-bg);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--navbar-hover-text);
}

/* Jumbotron */
.jumbotron {
  background-color: var(--jumbotron-bg);
  color: var(--jumbotron-text);
}
.jumbotron a {
  color: var(--link);
}
.jumbotron a:hover,
.jumbotron a:focus {
  color: var(--link-hover);
}

/* Links */
.nav-pills > li > a {
  color: var(--link);
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
  color: var(--link-hover);
}

/* Wells, dividers */
.well {
  background-color: var(--well-bg);
  border-color: var(--well-border);
}
hr {
  border-color: var(--hr);
}

/* Contact form lives on an external light-themed page —
   invert it so it matches the dark theme */
html[data-theme="dark"] iframe.contact-frame {
  filter: invert(0.92) hue-rotate(180deg);
}

/* Theme toggle button in the navbar */
button.theme-toggle {
  display: inline-block;
  margin: 0;
  padding: 15px;
  border: 0;
  background: transparent;
  color: var(--navbar-text);
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
button.theme-toggle:hover,
button.theme-toggle:focus {
  color: var(--navbar-hover-text);
  background-color: var(--navbar-hover-bg);
}
button.theme-toggle:active {
  background-color: var(--navbar-hover-bg);
}

/* Smooth theme transition */
body,
.navbar-default,
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
button.theme-toggle,
.jumbotron,
.well,
hr,
a {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}