/* Bootstrap 5.3 bridge. Load after bootstrap.min.css and tokens.css.
   Bootstrap bakes colour into per-component CSS variables at compile time,
   so setting --bs-primary alone does not recolour a button; this file
   points the handful of Bootstrap components EASAL uses (buttons, form
   controls, links, headings, focus ring) at the EASAL tokens. Never add a
   raw colour here: everything routes through var(--e-*).
   Source: EASAL handover pack v2 (Claude Design), 2026-10-07; superseded
   the 2026-09-22 canvas. */
:root {
  --bs-body-font-family: var(--e-font-family);
  --bs-body-font-size: var(--e-font-size);
  --bs-body-line-height: var(--e-line-height);
  --bs-body-color: var(--e-ink);
  --bs-body-bg: var(--e-bg);
  --bs-secondary-color: var(--e-ink-muted);
  --bs-border-color: var(--e-line);
  --bs-border-radius: var(--e-radius-sm);
  --bs-border-radius-lg: var(--e-radius);
  --bs-primary: var(--e-primary);
  --bs-primary-rgb: var(--e-primary-rgb);
  --bs-link-color: var(--e-primary);
  --bs-link-hover-color: var(--e-primary-hover);
  --bs-focus-ring-color: var(--e-focus-ring);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;
  --bs-success: var(--e-success);
  --bs-warning: var(--e-warning);
  --bs-danger: var(--e-danger);
  --bs-info: var(--e-info);
  --bs-heading-color: var(--e-ink);
}
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--e-font-family-heading);
  font-weight: var(--e-heading-weight);
}
.btn { --bs-btn-font-weight: 700; min-height: var(--e-touch-min); }
.btn-primary {
  --bs-btn-bg: var(--e-primary);
  --bs-btn-border-color: var(--e-primary);
  --bs-btn-hover-bg: var(--e-primary-hover);
  --bs-btn-hover-border-color: var(--e-primary-hover);
  --bs-btn-active-bg: var(--e-primary-hover);
}
.form-control, .form-select { border-color: var(--e-ink-faint); }
:focus-visible {
  outline: 3px solid var(--e-focus-ring);
  outline-offset: 2px;
}