/* ============================================================
   LoadMark.Tech — Shared Theme Tokens
   One file controls nav + bar color across ALL pages.
   To change the whole site: edit --lm-surface and --lm-bar here.
   ============================================================ */

:root {
  /* ── Main palette ── */
  --lm-bg:        #f0f4f8;
  --lm-surface:   #ffffff;      /* nav bar background */
  --lm-surface2:  #f0f4ff;
  --lm-border:    #c7d4f0;      /* nav border */
  --lm-text:      #0f2040;      /* nav text / wordmark base */
  --lm-muted:     #4a6090;      /* nav link default */

  /* ── Bottom bar ── */
  --lm-bar:       #ffffff;      /* bottom toolbar background */
  --lm-bar-border:#c7d4f0;      /* bottom toolbar top border */
  --lm-bar-icon:  #4a6090;      /* icon / label default color */
  --lm-bar-active:#f59e0b;      /* active button color (amber) */

  /* ── Wordmark accent colors (do not change) ── */
  --lm-wm-load:   #0f2040;
  --lm-wm-mark:   #f59e0b;
  --lm-wm-dot:    #3b82f6;
  --lm-wm-tech:   #22c55e;
}

/* ── NAV BAR (shared across all pages) ── */
#nav, #navbar, nav#navbar {
  background: var(--lm-surface) !important;
  border-bottom: 1px solid var(--lm-border) !important;
  box-shadow: none !important;
}

/* Wordmark */
.wordmark,
.nav-wordmark,
.nav-wordmark-name {
  color: var(--lm-wm-load) !important;
}
.wordmark .mark, .wm-mark { color: var(--lm-wm-mark) !important; }
.wordmark .dot,  .wm-dot  { color: var(--lm-wm-dot)  !important; }
.wordmark .tech, .wm-t    { color: var(--lm-wm-tech) !important; }

/* Nav links */
.nav-link {
  color: var(--lm-muted) !important;
}
.nav-link:hover {
  color: var(--lm-text) !important;
  background: rgba(15,32,64,0.07) !important;
  border-color: rgba(15,32,64,0.12) !important;
}
.nav-link.active {
  color: var(--lm-bar-active) !important;
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.3) !important;
}

/* Hamburger bars */
.nav-hamburger {
  border-color: rgba(15,32,64,0.18) !important;
}
.nav-hamburger span {
  background: var(--lm-muted) !important;
}

/* ── BOTTOM BAR (Logic page) ── */
#bar {
  background: var(--lm-bar) !important;
  border-top: 1.5px solid var(--lm-bar-border) !important;
}
.bb {
  color: var(--lm-bar-icon) !important;
}
.bb.on {
  color: var(--lm-bar-active) !important;
  border-top-color: var(--lm-bar-active) !important;
}
.bb.src-btn {
  color: #22c55e !important;
}
.bb-label {
  color: var(--lm-bar-icon) !important;
  opacity: 0.7;
}
.bb.on .bb-label {
  color: var(--lm-bar-active) !important;
  opacity: 1;
}
.bb.src-btn .bb-label {
  color: #22c55e !important;
}