html {
  font-size: 14px;
}

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

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

body {
  font-family: var(--token-font-family-base);
  background-color: var(--token-color-surface-muted);
  color: var(--token-color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--token-font-family-serif);
  color: var(--token-color-navy);
}

/* Global link colours — override Bootstrap's hardcoded blue */
a {
  color: var(--token-color-primary);
}

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

/* Teal focus ring — replaces Bootstrap blue */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px rgba(3, 127, 141, 0.15);
  outline: none;
}

/* Hide empty validation summary */
.validation-summary-valid {
  display: none !important;
}

/* Form floating placeholders */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--token-color-text-muted);
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Site footer */
.site-footer {
  border-top: 1px solid var(--token-color-border);
  padding: var(--token-space-4) 0;
  font-size: var(--token-font-size-sm);
  color: var(--token-color-text-muted);
  margin-top: var(--token-space-8);
}