/* ═══════════════════════════════════════════════════════════════════════════════
 * ServiceChannel theme overrides
 *
 * Colors, buttons, typography, backgrounds, dark mode — ALL handled by Sass
 * via _brand-generated.scss (from brand-tokens.yaml). Do NOT add --bs-primary,
 * --bs-btn-bg, or any Bootstrap variable overrides here.
 *
 * This file contains ONLY what Bootstrap's Sass can't generate:
 *   1. Google Fonts import
 *   2. Brand gradient backgrounds (CSS custom properties)
 *   3. Button text-transform / letter-spacing (not Sass variables)
 *   4. Icon/logo inversion on dark backgrounds
 *   5. Navbar button exceptions
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Web fonts — handled by Sass @font-face in theme.scss ── */

/* ── 2. Brand gradients ── */
section.bg-primary {
  background: var(--brand-gradient-hero) !important;
}

/* ── 3. Button text treatment (style guide p32: uppercase, semibold, square) ── */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Outline buttons: thicker border */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-info,
.btn-outline-success,
.btn-outline-light {
  border-width: 2px;
}
/* Navbar buttons: compact, not uppercase */
.navbar .btn {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  white-space: nowrap;
}

/* ── 4. Icon/logo inversion on dark backgrounds (style guide p13, p65) ── */
[data-bs-theme="dark"] .ots-tag__icon,
[data-bs-theme="dark"] .navbar-brand img,
[data-bs-theme="dark"] .ots-invert-on-dark {
  filter: brightness(0) invert(1);
}

/* ── 5. Dark cards: semi-transparent on brand backgrounds ── */
/* ── 6. Dark mode cards: solid dark surface for readability ── */
[data-bs-theme="dark"] .card {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}