:root {
    --theme-primary:  #0d6efd;
    --theme-primary-hover: #0b5ed7;
    --theme-primary-rgb: 13, 110, 253;
    --theme-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Override Bootstrap's own primary variables */
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-link-color: var(--theme-primary);
    --bs-link-hover-color: var(--theme-primary-hover);
    --bs-link-color-rgb: var(--theme-primary-rgb);
}

body {
    font-family: var(--theme-font-family);
}

/* Button primary - direct property overrides */
.btn-primary,
.btn-primary.btn-lg {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.btn-primary:hover,
.btn-primary.btn-lg:hover {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary.btn-lg:active,
.btn-primary.btn-lg:focus-visible {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

/* Outline primary */
.btn-outline-primary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus-visible {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

/* Utility classes */
.bg-primary {
    background-color: var(--theme-primary) !important;
}

.text-primary {
    color: var(--theme-primary) !important;
}

/* Navbar and nav-links - all states */
.nav-link,
.navbar .nav-link {
    color: var(--theme-primary) !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--theme-primary-hover) !important;
}

/* Dropdown active state */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--theme-primary) !important;
}

/* Links */
a {
    color: var(--theme-primary);
}

a:hover {
    color: var(--theme-primary-hover);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}