/*
 * HPL base styles: typography, buttons, forms, links.
 * Loaded after Bootstrap and the legacy custom.min.css, so these rules win.
 * Uses only variables from tokens.css.
 */

/* Typography */
body {
  font-family: var(--hpl-font);
  font-weight: var(--hpl-weight-light);
  color: var(--hpl-text);
  background-color: var(--hpl-white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hpl-font);
  color: var(--hpl-dark);
  line-height: 1.1;
}

/* Site style: big titles are uppercase and heavy, smaller ones light */
h1, .h1, h2, .h2 {
  font-weight: var(--hpl-weight-heavy);
  text-transform: uppercase;
}

h3, .h3, h4, .h4 {
  font-weight: var(--hpl-weight-bold);
}

h5, .h5, h6, .h6 {
  font-weight: var(--hpl-weight-semibold);
}

strong, b {
  font-weight: var(--hpl-weight-semibold);
}

.text-muted,
.text-secondary {
  color: var(--hpl-muted) !important;
}

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

.bg-primary {
  background-color: var(--hpl-red) !important;
}

.bg-dark {
  background-color: var(--hpl-dark) !important;
}

/* Links */
a {
  color: var(--hpl-red);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--hpl-red-dark);
}

/* Buttons: pill shape like the site and plugin */
.btn {
  --bs-btn-font-family: var(--hpl-font);
  --bs-btn-font-weight: var(--hpl-weight-regular);
  --bs-btn-padding-x: 30px;
  --bs-btn-padding-y: 10px;
  --bs-btn-border-radius: var(--hpl-radius-pill);
  --bs-btn-focus-box-shadow: var(--hpl-focus-ring);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-lg {
  --bs-btn-padding-x: 35px;
  --bs-btn-padding-y: 15px;
  --bs-btn-font-size: 1rem;
}

.btn-sm {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 6px;
}

.btn-primary {
  --bs-btn-color: var(--hpl-white);
  --bs-btn-bg: var(--hpl-red);
  --bs-btn-border-color: var(--hpl-red);
  --bs-btn-hover-color: var(--hpl-white);
  --bs-btn-hover-bg: var(--hpl-red-dark);
  --bs-btn-hover-border-color: var(--hpl-red-dark);
  --bs-btn-active-color: var(--hpl-white);
  --bs-btn-active-bg: var(--hpl-red-dark);
  --bs-btn-active-border-color: var(--hpl-red-dark);
  --bs-btn-disabled-color: var(--hpl-white);
  --bs-btn-disabled-bg: var(--hpl-red);
  --bs-btn-disabled-border-color: var(--hpl-red);
}

.btn-dark {
  --bs-btn-color: var(--hpl-white);
  --bs-btn-bg: var(--hpl-dark);
  --bs-btn-border-color: var(--hpl-dark);
  --bs-btn-hover-color: var(--hpl-white);
  --bs-btn-hover-bg: var(--hpl-black);
  --bs-btn-hover-border-color: var(--hpl-black);
  --bs-btn-active-bg: var(--hpl-black);
  --bs-btn-active-border-color: var(--hpl-black);
}

.btn-outline-primary {
  --bs-btn-color: var(--hpl-red);
  --bs-btn-border-color: var(--hpl-red);
  --bs-btn-hover-color: var(--hpl-white);
  --bs-btn-hover-bg: var(--hpl-red);
  --bs-btn-hover-border-color: var(--hpl-red);
  --bs-btn-active-color: var(--hpl-white);
  --bs-btn-active-bg: var(--hpl-red-dark);
  --bs-btn-active-border-color: var(--hpl-red-dark);
}

.btn-light {
  --bs-btn-color: var(--hpl-dark);
  --bs-btn-bg: var(--hpl-grey-200);
  --bs-btn-border-color: var(--hpl-border);
  --bs-btn-hover-bg: var(--hpl-grey-300);
  --bs-btn-hover-border-color: var(--hpl-grey-300);
}

/* Forms: rounded fields with a red focus ring, like the plugin */
.form-control,
.form-select {
  font-family: var(--hpl-font);
  font-weight: var(--hpl-weight-regular);
  color: var(--hpl-text);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  padding: 12px 14px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hpl-red);
  box-shadow: var(--hpl-focus-ring);
}

.form-label {
  font-weight: var(--hpl-weight-semibold);
  color: var(--hpl-dark);
}

.form-check-input:checked {
  background-color: var(--hpl-red);
  border-color: var(--hpl-red);
}

.form-check-input:focus {
  border-color: var(--hpl-red);
  box-shadow: var(--hpl-focus-ring);
}

/* Bootstrap components that should carry the brand */
.nav-pills {
  --bs-nav-pills-border-radius: var(--hpl-radius-pill);
  --bs-nav-pills-link-active-bg: var(--hpl-red);
}

.pagination {
  --bs-pagination-color: var(--hpl-dark);
  --bs-pagination-hover-color: var(--hpl-red);
  --bs-pagination-focus-box-shadow: var(--hpl-focus-ring);
  --bs-pagination-active-bg: var(--hpl-red);
  --bs-pagination-active-border-color: var(--hpl-red);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--hpl-red);
  border-radius: var(--hpl-radius);
}

.modal-content {
  border: 0;
  border-radius: 18px;
}

.badge.bg-primary {
  background-color: var(--hpl-red) !important;
}