@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-v4.1.woff2') format('woff2');
}

html {
  color-scheme: var(--app-color-scheme, light);
}

body {
  background: var(--app-body-background, var(--bs-body-bg));
  color: var(--app-body-color, var(--bs-body-color));
  font-family: var(--app-body-font-family, var(--bs-font-sans-serif));
  line-height: var(--app-body-line-height, var(--bs-body-line-height));
}

small,
.small {
  line-height: var(--app-line-height-secondary);
}

h1,
.h1 {
  line-height: var(--app-line-height-title);
}

body:not(.auth-page) > header {
  background: var(--app-topbar-shell-bg, transparent);
}

.text-muted,
.text-body-secondary {
  color: var(--app-ink-muted, var(--bs-secondary-color)) !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--app-accent, var(--bs-primary));
  outline-offset: 2px;
}

.btn {
  --bs-btn-border-radius: var(--app-button-radius, var(--app-radius-md, 0.375rem));
  --bs-btn-font-weight: var(--app-button-font-weight, 500);
  transition:
    border-color var(--app-motion-hover) var(--app-motion-easing),
    background-color var(--app-motion-hover) var(--app-motion-easing),
    color var(--app-motion-hover) var(--app-motion-easing),
    box-shadow var(--app-motion-hover) var(--app-motion-easing);
}

.btn-sm {
  --bs-btn-border-radius: var(--app-button-radius-sm, var(--app-radius-sm, 0.25rem));
}

.btn-link {
  text-decoration: none;
}

.btn-primary {
  /* Keep the existing publication branding hooks; Bootstrap owns state selectors. */
  --bs-btn-color: var(--app-btn-primary-color);
  --bs-btn-bg: var(--app-btn-primary-background);
  --bs-btn-border-color: var(--app-btn-primary-border-color);
  --bs-btn-hover-color: var(--app-btn-primary-hover-color);
  --bs-btn-hover-bg: var(--app-btn-primary-hover-background);
  --bs-btn-hover-border-color: var(--app-btn-primary-hover-border-color);
  --bs-btn-active-color: var(--app-btn-primary-active-color);
  --bs-btn-active-bg: var(--app-btn-primary-active-background);
  --bs-btn-active-border-color: var(--app-btn-primary-active-border-color);
  --bs-btn-disabled-bg: var(--app-btn-primary-disabled-background);
  --bs-btn-disabled-border-color: var(--app-btn-primary-disabled-border-color);
  --bs-btn-disabled-color: var(--app-btn-primary-disabled-color);
  --bs-btn-disabled-opacity: var(--app-btn-primary-disabled-opacity);
  --bs-btn-focus-box-shadow: none;
  --bs-btn-active-shadow: none;
}

.btn-outline-secondary {
  --bs-btn-border-color: var(
    --app-btn-outline-secondary-border-color,
    rgba(var(--bs-secondary-rgb), 1)
  );
  --bs-btn-color: var(--app-btn-outline-secondary-color, var(--bs-body-color));
  --bs-btn-hover-bg: var(--app-btn-outline-secondary-hover-background, transparent);
  --bs-btn-hover-border-color: var(--app-btn-outline-secondary-hover-border-color, currentColor);
  --bs-btn-hover-color: var(
    --app-btn-outline-secondary-hover-color,
    var(--app-btn-outline-secondary-color, inherit)
  );
  --bs-btn-focus-box-shadow: var(--app-btn-outline-secondary-hover-box-shadow, none);
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--app-control-bg, var(--bs-body-bg));
  border-color: var(--app-control-border, var(--bs-border-color));
  color: var(--app-control-color, var(--bs-body-color));
}

.form-control::placeholder {
  color: var(--app-control-placeholder-color, var(--bs-secondary-color));
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-control-focus-bg, var(--app-control-bg, var(--bs-body-bg)));
  border-color: var(--app-control-focus-border, var(--bs-primary));
  color: var(--app-control-color, var(--bs-body-color));
  box-shadow: var(--app-control-focus-shadow, 0 0 0 0.2rem var(--bs-focus-ring-color));
}

.form-check-input {
  border-color: var(--app-check-border, var(--app-control-border, var(--bs-border-color)));
}

.form-check-input:focus {
  border-color: var(--app-check-focus-border, var(--app-control-focus-border, var(--bs-primary)));
  box-shadow: var(
    --app-check-focus-shadow,
    var(--app-control-focus-shadow, 0 0 0 0.2rem var(--bs-focus-ring-color))
  );
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--app-check-checked-bg, var(--app-accent, var(--bs-primary)));
  border-color: var(
    --app-check-checked-border,
    var(--app-check-checked-bg, var(--app-accent, var(--bs-primary)))
  );
}

.dropdown-menu {
  --bs-dropdown-bg: var(--app-dropdown-bg, var(--bs-body-bg));
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-border-radius: var(--app-radius-lg, var(--bs-border-radius-lg));
  --bs-dropdown-box-shadow: var(--app-dropdown-shadow, var(--bs-box-shadow));
  --bs-dropdown-link-hover-bg: var(--app-dropdown-hover-bg, var(--bs-tertiary-bg));
  --bs-dropdown-link-active-bg: var(--app-dropdown-active-bg, var(--bs-tertiary-bg));
  --bs-dropdown-link-active-color: var(
    --app-dropdown-active-color,
    var(--app-ink, var(--bs-body-color))
  );
  --bs-dropdown-padding-y: 0.25rem;
  --bs-dropdown-item-padding-x: 0.5rem;
  --bs-dropdown-item-padding-y: 0.5625rem;

  padding: var(--bs-dropdown-padding-y);
  border: var(--app-dropdown-border, var(--bs-border-width) solid var(--bs-border-color));
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  border-radius: var(--app-radius-sm, var(--bs-border-radius-sm));
  line-height: var(--app-line-height-control);
}

.dropdown-divider {
  margin: 0.25rem var(--bs-dropdown-item-padding-x);
}

@media (pointer: coarse) {
  .dropdown-menu {
    --bs-dropdown-item-padding-y: 0.8125rem;
  }

  .dropdown-item {
    min-height: var(--app-touch-target-size);
  }
}

.table {
  --bs-table-border-color: var(--app-card-table-row-border, var(--bs-border-color));
  --bs-table-hover-bg: var(--app-card-table-hover-bg, var(--bs-tertiary-bg));
}

.table-light {
  --bs-table-bg: var(--app-card-table-heading-bg, var(--bs-tertiary-bg));
  --bs-table-border-color: var(--app-card-table-heading-border, var(--bs-border-color));
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .form-control:focus-visible,
  .form-select:focus-visible {
    outline-color: Highlight;
  }
}