:root{
  --brand: #5D9191;
  --brand-rgb: 93, 145, 145;

  --brand-hover: #5D9191;
  --brand-hover-rgb: 93, 145, 145;
	
	--brand2: #C783A6;
  --brand2-rgb: 199, 131, 166;

  --brand2-hover: #A36B88;
  --brand2-hover-rgb: 163, 107, 136;
}

/* ===== Primary (used in menus, headings, accent elements) ===== */
/* IMPORTANT: We do NOT touch --bs-link-color / --bs-link-hover-color,
so that links in posts/dialogs/blogs remain standard */
[data-bs-theme=light] {
  --bs-primary: var(--brand) !important;
  --bs-primary-rgb: var(--brand-rgb) !important;

  /* tabs/pills active */
  --bs-nav-pills-link-active-bg: var(--brand) !important;
}

[data-bs-theme=dark] {
  --bs-primary: var(--brand) !important;
  --bs-primary-rgb: var(--brand-rgb) !important;

  /* tabs/pills active */
  --bs-nav-pills-link-active-bg: var(--brand) !important;
}

[data-bs-theme=auto]{
  --bs-primary: var(--brand) !important;
  --bs-primary-rgb: var(--brand-rgb) !important;
  --bs-nav-pills-link-active-bg: var(--brand) !important;
}

/* ===== Menu (navbar) ===== */
.navbar {
  --bs-navbar-hover-color: var(--brand);
  --bs-navbar-active-color: var(--brand);
}

/* In style.css, there's a selector .navbar[data-bs-theme=dark] with !important, so we'll override it too */
.navbar-dark,
.navbar[data-bs-theme="dark"]{
  --bs-navbar-hover-color: var(--brand) !important;
  --bs-navbar-active-color: var(--brand) !important;
}

/* ===== Navigation/tabs ===== */
.nav{
  --bs-nav-link-hover-color: var(--brand);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand);
}

/* ===== Submenu (dropdown) ===== */
.dropdown-menu {
  --bs-dropdown-link-hover-color: var(--brand) !important;
  --bs-dropdown-link-active-color: var(--brand) !important;
}

/* ===== Clickable headlines (everywhere) =====
   In style.css, the hover for h1>a..h6>a is tied to var(--bs-primary), so primary is sufficient, but we'll fix it just in case */
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover,
.h1 > a:hover, .h2 > a:hover, .h3 > a:hover, .h4 > a:hover, .h5 > a:hover, .h6 > a:hover{
  color: var(--brand) !important;
}

/* ===== Primary buttons (to avoid dependency on --bs-link-hover-color) ===== */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-bg: var(--brand);
}

/* Button-link: we color only the btn-link itself, not all the site links */
.btn-link {
  --bs-btn-color: var(--brand);
  --bs-btn-hover-color: var(--brand-hover);
  --bs-btn-active-color: var(--brand-hover);
}

/* Outline primary */
.btn-outline-primary {
  --bs-btn-color: var(--brand2);
  --bs-btn-border-color: var(--brand2);
  --bs-btn-hover-bg: var(--brand2-hover);
  --bs-btn-hover-border-color: var(--brand2-hover);
  --bs-btn-active-bg: var(--brand2-hover);
  --bs-btn-active-border-color: var(--brand2-hover);
  --bs-btn-disabled-color: var(--brand2);
  --bs-btn-disabled-border-color: var(--brand2);
}

/* Soft primary */
.btn-primary-soft{
  color: var(--brand2);
  background-color: rgba(var(--brand2-rgb), 0.2);
}
.btn-primary-soft:hover,
.btn-primary-soft:focus,
.btn-primary-soft.active{
  color: var(--bs-white);
  background-color: var(--brand2-hover) !important;
  border-color: var(--brand2-hover) !important;
}

/* Icons/other */
.fill-primary{
  fill: var(--brand) !important;
}
.stretched-link {
	color: var(--brand2);
}
.form-control:focus{
  border-color: var(--brand);
}
.text-bg-primary{
  background-color: rgba(var(--brand-rgb), 1) !important;
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.choices.is-focused .choices__inner{
  border-color: var(--brand);
}

[data-bs-theme="dark"] .field-entry{
  background-color: rgba(255,255,255,0.04) !important;
}