.hes-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hes-font-family-base);
  font-size: var(--hes-text-body-size);
  font-weight: 700;
  line-height: 1;
  padding: var(--hes-space-3) var(--hes-space-5);
  border-radius: var(--hes-radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hes-button:focus-visible {
  outline: 2px solid var(--hes-color-link);
  outline-offset: 2px;
}

.hes-button[disabled],
.hes-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary - fill only. Text is always navy-900 (Layer 2: the one
   text-on-primary combination that passes AA - 4.91:1 on gold-400).
   Hover moves to gold-500 (the large-text-only shade) purely as a
   deeper hover state, not for text on it. */
.hes-button--primary {
  background: var(--hes-color-primary);
  color: var(--hes-color-text-on-primary);
}
.hes-button--primary:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--hes-color-gold-500);
}

/* Secondary - structural brand color fill. */
.hes-button--secondary {
  background: var(--hes-color-secondary);
  color: var(--hes-color-text-on-secondary);
}
.hes-button--secondary:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--hes-color-navy-800);
}

/* Outline - transparent, for a lower-emphasis action next to a primary.
   Uses --hes-color-link (not --hes-color-secondary) for its resting-state
   text/border since, unlike the fill variants, they sit directly on the
   page background and so need to stay theme-aware - see color-system.css. */
.hes-button--outline {
  background: transparent;
  color: var(--hes-color-link);
  border-color: var(--hes-color-link);
}
.hes-button--outline:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--hes-color-secondary);
  color: var(--hes-color-text-on-secondary);
}