/*
 * Maps Signal Banker tokens onto Bootstrap 5.3 CSS variables. Only variables and component-level custom properties
 * are overridden here; Bootstrap's own files are never modified. No !important is used.
 */

:root {
  --bs-body-font-family: var(--sb-font-family);
  --bs-body-font-size: var(--sb-font-size-base);
  --bs-body-line-height: var(--sb-line-height-base);
  --bs-body-color: var(--sb-ink);
  --bs-body-color-rgb: var(--sb-ink-rgb);
  --bs-body-bg: var(--sb-surface);
  --bs-emphasis-color: var(--sb-ink);
  --bs-heading-color: var(--sb-ink);
  --bs-secondary-color: var(--sb-muted);
  --bs-tertiary-bg: var(--sb-surface-soft);

  --bs-primary: var(--sb-brand);
  --bs-primary-rgb: var(--sb-brand-rgb);
  --bs-primary-text-emphasis: var(--sb-brand-hover);
  --bs-primary-bg-subtle: var(--sb-brand-soft);
  --bs-primary-border-subtle: var(--sb-brand);

  --bs-link-color: var(--sb-ink);
  --bs-link-color-rgb: var(--sb-ink-rgb);
  --bs-link-hover-color: var(--sb-brand-hover);
  --bs-link-hover-color-rgb: 0, 111, 68;

  --bs-border-color: var(--sb-border);
  --bs-border-radius: var(--sb-radius);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--sb-radius-lg);

  --bs-focus-ring-color: var(--sb-focus-ring-color);
  --bs-form-invalid-color: var(--sb-danger);
  --bs-form-invalid-border-color: var(--sb-danger);
  --bs-form-valid-border-color: var(--sb-brand);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--sb-ink);
}

h2, .h2 {
  font-size: var(--sb-h2-size);
  font-weight: var(--sb-h2-weight);
  letter-spacing: -0.015em;
}

/* Buttons: every state is mapped, not only the base color. */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-border-radius: var(--sb-radius);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--sb-focus-ring-color);
  min-height: var(--sb-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sb-brand-strong);
  --bs-btn-border-color: var(--sb-brand-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sb-brand-hover);
  --bs-btn-hover-border-color: var(--sb-brand-hover);
  --bs-btn-focus-shadow-rgb: var(--sb-brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sb-brand-active);
  --bs-btn-active-border-color: var(--sb-brand-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sb-brand-strong);
  --bs-btn-disabled-border-color: var(--sb-brand-strong);
}

.btn-outline-primary {
  --bs-btn-color: var(--sb-brand-hover);
  --bs-btn-border-color: var(--sb-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sb-brand-hover);
  --bs-btn-hover-border-color: var(--sb-brand-hover);
  --bs-btn-focus-shadow-rgb: var(--sb-brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sb-brand-active);
  --bs-btn-active-border-color: var(--sb-brand-active);
  --bs-btn-disabled-color: var(--sb-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--sb-border);
}

.btn-outline-secondary {
  --bs-btn-color: var(--sb-muted);
  --bs-btn-border-color: var(--sb-border);
  --bs-btn-disabled-color: var(--sb-muted);
  --bs-btn-disabled-bg: var(--sb-surface-soft);
  --bs-btn-disabled-border-color: var(--sb-border);
  --bs-btn-disabled-opacity: 1;
}

/* Forms */
.form-label {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.form-control {
  min-height: var(--sb-control-height);
  border-color: var(--sb-border);
  border-radius: var(--sb-radius);
  color: var(--sb-ink);
}

.form-control::placeholder {
  color: var(--sb-muted); /* 6.2:1 on white */
  opacity: 1;
}

.form-control:focus {
  border-color: var(--sb-brand);
  box-shadow: 0 0 0 0.25rem var(--sb-focus-ring-color);
}

.invalid-feedback {
  font-size: var(--sb-small-size);
  font-weight: 500;
}

.alert-danger {
  --bs-alert-color: var(--sb-danger);
  --bs-alert-bg: var(--sb-danger-soft);
  --bs-alert-border-color: #f5c2bd;
}

/* Navbar */
.navbar {
  --bs-navbar-color: var(--sb-ink);
  --bs-navbar-hover-color: var(--sb-brand-hover);
  --bs-navbar-active-color: var(--sb-ink);
  --bs-navbar-brand-color: var(--sb-ink);
  --bs-navbar-brand-hover-color: var(--sb-ink);
  --bs-navbar-toggler-border-color: var(--sb-border);
  --bs-navbar-toggler-border-radius: var(--sb-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-nav-link-padding-x: 0.75rem;
}

/* Cards */
.card {
  --bs-card-border-color: var(--sb-border);
  --bs-card-border-radius: var(--sb-radius);
  --bs-card-bg: var(--sb-surface);
  --bs-card-color: var(--sb-ink);
}

/* Container: cap at ~1140px instead of Bootstrap's 1320px xxl width. */
@media (min-width: 1400px) {
  .container {
    max-width: var(--sb-container-max);
  }
}