body {
  font-family: var(--ds-font-sans);
  color: var(--ds-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-header h1,
.page-header h2,
.page-header h3,
.auth-card-title {
  font-family: var(--ds-font-display);
  color: var(--ds-color-brand-900);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(var(--ds-font-size-600), 4vw, var(--ds-font-size-700));
}

h2 {
  font-size: clamp(var(--ds-font-size-500), 3vw, var(--ds-font-size-600));
}

.page-header p,
.text-muted,
.form-text,
small {
  color: var(--ds-color-text-muted) !important;
}

a {
  transition: color var(--ds-transition-fast), opacity var(--ds-transition-fast);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ds-color-accent-500) 35%, transparent) !important;
}

.form-control,
.form-select,
textarea {
  min-height: 2.55rem;
  border-color: color-mix(in srgb, var(--ds-color-border) 88%, white);
  border-radius: var(--ds-radius-md);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast), background-color var(--ds-transition-fast);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--ds-color-brand-700) 40%, white);
}

.form-label {
  font-size: var(--ds-font-size-200);
  font-weight: 700;
  color: var(--ds-color-brand-900);
  margin-bottom: 0.35rem;
}

.alert {
  border-radius: var(--ds-radius-md);
  border-width: 1px;
}

.table th {
  font-size: var(--ds-font-size-100);
  letter-spacing: 0.05em;
}