:root {
  --bs-primary: #14b8a6;
  --sweepswap-teal: #14b8a6;
  --sweepswap-teal-dark: #0d9488;
}

html { scroll-behavior: smooth; }

/* --- Brand color overrides for Bootstrap 5 button/link --- */
.btn-primary, .btn-primary:hover, .btn-primary:focus { background-color: var(--sweepswap-teal); border-color: var(--sweepswap-teal); }
.btn-primary:hover { background-color: var(--sweepswap-teal-dark); border-color: var(--sweepswap-teal-dark); }
.btn-outline-primary { color: var(--sweepswap-teal); border-color: var(--sweepswap-teal); }
.btn-outline-primary:hover { background-color: var(--sweepswap-teal); border-color: var(--sweepswap-teal); }
.text-primary { color: var(--sweepswap-teal) !important; }
.bg-primary-subtle { background-color: rgba(20, 184, 166, 0.12) !important; }
.link-primary, a.text-primary { color: var(--sweepswap-teal); }
a.text-primary:hover { color: var(--sweepswap-teal-dark); }

/* --- Markdown / docs prose --- */
.prose { line-height: 1.7; }
.prose h2 { margin-top: 2rem; font-weight: 600; }
.prose h3 { margin-top: 1.5rem; font-weight: 600; }
.prose code { background: rgba(20, 184, 166, 0.08); padding: 0.1rem 0.35rem; border-radius: 0.25rem; }
.prose pre { background: var(--bs-body-tertiary-bg); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
.prose blockquote { border-left: 3px solid var(--bs-primary); padding-left: 1rem; color: var(--bs-secondary-color); }

/* --- Module hero banner (KB/Ticket/Status/Changelog/Legal) --- */
.module-hero {
  background:
    radial-gradient(ellipse at top left, rgba(20, 184, 166, 0.08), transparent 55%),
    linear-gradient(180deg, #fafafa 0%, var(--bs-body-bg) 100%);
}
.module-hero__icon { font-size: 1.75rem; line-height: 1; }
.module-hero__title { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.module-hero__description { max-width: 60ch; }
@media (max-width: 575.98px) {
  .module-hero__icon { padding: 0.65rem !important; font-size: 1.35rem; }
}

/* --- Landing hero (only on Home/Index) --- */
.landing-hero {
  background:
    radial-gradient(ellipse at top right, rgba(20, 184, 166, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(13, 148, 136, 0.10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafa 100%);
}
.landing-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; }
.landing-hero .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

/* --- Module card on landing — gentle hover lift --- */
.module-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .06);
  border-color: var(--sweepswap-teal) !important;
}

/* --- Top nav: ensure logo + brand text stay legible on small screens --- */
.brand-link { color: inherit; text-decoration: none; }
.brand-link:hover { color: var(--sweepswap-teal); }

/* --- Language dropdown chip --- */
.lang-toggle {
  border: 1px solid var(--bs-border-color);
  background: transparent;
}
.lang-toggle:hover, .lang-toggle:focus {
  border-color: var(--sweepswap-teal);
  color: var(--sweepswap-teal);
}

/* --- Footer --- */
.site-footer ul { padding-left: 0; margin-bottom: 0; }
.site-footer a { color: var(--bs-body-color); text-decoration: none; }
.site-footer a:hover { color: var(--sweepswap-teal); }
.site-footer .footer-heading {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bs-secondary-color);
}