/* Bootstrap 5 theme override — maps Bootstrap's CSS variables to the
   ProcessLens design tokens declared in /styles.css. This is the file a
   consuming project links AFTER bootstrap.min.css and styles.css. */

body {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-body-size);
  --bs-body-line-height: var(--text-body-leading);
  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-border-color: var(--color-divider);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 15, 110, 86;
}

h1, .h1 { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
h2, .h2 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); }
h3, .h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); }

/* Buttons */
.btn { border-radius: var(--radius-md); font-size: var(--text-button-size); font-weight: var(--text-button-weight); padding: 0.625rem 1.25rem; }
.btn-amber { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
.btn-amber:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }
.btn-outline-teal { background: transparent; border: 1.5px solid var(--color-primary-light); color: var(--color-primary); }
.btn-outline-teal:hover { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn-on-dark { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-text-on-dark); }
.btn-on-dark:hover { background: var(--teal-700); border-color: var(--teal-700); }

/* Surfaces */
.card { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: none; }
.card.elevated { box-shadow: var(--shadow-md); }

.badge-eyebrow { display: inline-flex; font-size: var(--text-eyebrow-size); font-weight: var(--text-eyebrow-weight); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; }
.badge-teal { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.badge-amber { background: var(--color-accent-light); color: var(--amber-800); }

/* Navbar / footer, dark teal surfaces */
.navbar-pl { background: var(--color-primary-dark); }
.navbar-pl .nav-link { color: var(--color-text-on-dark); opacity: .8; }
.navbar-pl .nav-link.active, .navbar-pl .nav-link:hover { color: #fff; opacity: 1; }

.footer-pl { background: var(--color-primary-dark); color: var(--color-text-on-dark); }
.footer-pl a { color: var(--color-text-on-dark); opacity: .82; text-decoration: none; }
.footer-pl a:hover { opacity: 1; }
.footer-pl .col-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }

/* Tables — semantic, per brief (never CSS-grid pricing tables) */
.table-pricing caption { caption-side: top; text-align: left; font-size: 0.8125rem; color: var(--color-text-secondary); }
.table-pricing th, .table-pricing td { vertical-align: middle; }
.table-pricing .col-recommended { background: var(--color-primary-tint); }

/* Forms */
.form-control, .form-select { border-radius: var(--radius-md); border: 1.5px solid var(--color-divider); font-size: 0.9375rem; }
.form-control:focus, .form-select:focus { border-color: var(--color-primary-light); box-shadow: var(--shadow-focus); }

/* Accordion (FAQ) */
.accordion-item { border: 1px solid var(--color-divider); border-radius: var(--radius-lg) !important; overflow: hidden; margin-bottom: var(--space-3); }
.accordion-button { font-weight: 500; }
.accordion-button:not(.collapsed) { background: var(--color-surface); color: var(--color-text-primary); box-shadow: none; }
.accordion-button:focus { box-shadow: var(--shadow-focus); }

.stat-amber { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--amber-800); }

section.py-section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
@media (max-width: 767px) {
  section.py-section { padding-top: var(--section-padding-y-mobile); padding-bottom: var(--section-padding-y-mobile); }
}

dfn { font-style: normal; border-bottom: 1px dotted var(--color-divider); cursor: help; }