/* ============================================================
   BOOTSTRAP 5 BRIDGE
   ------------------------------------------------------------
   The production platform is Bootstrap 5. This file re-publishes
   the design system's tokens under Bootstrap's own `--bs-*` custom
   properties, so stock Bootstrap components (.btn, .card, .form-control,
   .alert, .badge, .nav…) inherit the customer's brand with no markup
   changes and no Sass recompile.

   Declared on :root AND [data-hb-theme] so a scoped re-theme
   (see colors.css) carries through to Bootstrap components too.

   NOTE ON `--bs-*-rgb`: Bootstrap composes translucency as
   `rgba(var(--bs-primary-rgb), .5)`, which needs a bare "R, G, B"
   triplet. Our brand colours are derived with color-mix()/oklch(),
   and CSS cannot decompose a computed colour back into raw channel
   numbers. `bootstrap-bridge.js` fills those triplets at runtime.
   Everything else here is pure CSS and works without the script.

   Vendored from the "Giving Platform Design System" Claude Design project
   (feat-083), with one deliberate divergence from upstream: the
   --bs-body-bg and --bs-body-font-family lines are removed. Background
   colour and font-family are tenant inputs this platform already derives
   per-tenant (branding/css.py: build_theme_css) and the design system has
   no per-tenant concept of either (its --surface-page/--font-body are
   fixed defaults, not customer inputs) — build_theme_css must stay their
   sole owner. One owner per property: see that function's docstring.
   ============================================================ */

:root, [data-hb-theme] {
  /* ---- Theme colours ---- */
  --bs-primary:   var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-success:   var(--success);
  --bs-info:      var(--info);
  --bs-warning:   var(--warning);
  --bs-danger:    var(--danger);
  --bs-light:     var(--neutral-100);
  --bs-dark:      var(--neutral-900);

  /* Text/border/subtle-bg trio Bootstrap 5.3 derives per theme colour */
  --bs-primary-text-emphasis:   var(--primary-700);
  --bs-secondary-text-emphasis: var(--secondary-700);
  --bs-success-text-emphasis:   var(--success);
  --bs-danger-text-emphasis:    var(--danger);
  --bs-warning-text-emphasis:   var(--warning);
  --bs-info-text-emphasis:      var(--info);

  --bs-primary-bg-subtle:   var(--color-primary-subtle);
  --bs-secondary-bg-subtle: var(--color-secondary-subtle);
  --bs-success-bg-subtle:   var(--success-surface);
  --bs-danger-bg-subtle:    var(--danger-surface);
  --bs-warning-bg-subtle:   var(--warning-surface);
  --bs-info-bg-subtle:      var(--info-surface);

  --bs-primary-border-subtle:   var(--primary-200);
  --bs-secondary-border-subtle: var(--secondary-200);

  /* GOTCHA — "secondary" means different things in the two systems.
     In Bootstrap 5.3 it is a THEME COLOUR (.btn-secondary, .bg-secondary,
     .text-secondary), which here becomes the brand accent, not a grey.
     Bootstrap's muted body text is .text-body-secondary / --bs-secondary-color
     — use that for de-emphasised copy, or it will come out in the accent hue. */

  /* ---- Body & surfaces ---- */
  --bs-body-color:       var(--text-body);
  --bs-emphasis-color:   var(--text-strong);
  --bs-secondary-color:  var(--text-muted);   /* .text-body-secondary */
  --bs-secondary-bg:     var(--surface-subtle);
  --bs-tertiary-bg:      var(--surface-subtle);

  /* ---- Links ---- */
  --bs-link-color:       var(--text-link);
  --bs-link-hover-color: var(--color-primary-hover);

  /* ---- Typography ---- */
  --bs-body-font-size:    var(--text-base);
  --bs-body-line-height:  var(--leading-normal);
  --bs-body-font-weight:  var(--weight-regular);
  --bs-font-monospace:    var(--font-mono);
  /* Bootstrap has no --bs-headings-font-family; apply ours directly. */

  /* ---- Borders & radii ---- */
  --bs-border-color:            var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-width:            1px;
  --bs-border-radius-sm:        var(--radius-sm);
  --bs-border-radius:           var(--radius-md);
  --bs-border-radius-lg:        var(--radius-lg);
  --bs-border-radius-xl:        var(--radius-lg);
  --bs-border-radius-xxl:       var(--radius-xl);
  --bs-border-radius-pill:      var(--radius-pill);

  /* ---- Elevation ---- */
  --bs-box-shadow-sm: var(--shadow-xs);
  --bs-box-shadow:    var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* ---- Focus ring — the two-tone ring, not a brand tint (see colors.css) ---- */
  --bs-focus-ring-width:      2px;
  --bs-focus-ring-opacity:    1;
  --bs-focus-ring-color:      var(--ring);
  --bs-focus-ring-box-shadow: var(--shadow-ring);
}

/* Bootstrap's own focus utility composes its ring from width/opacity/colour,
   which cannot express two bands — override it to use ours wholesale so
   keyboard focus is identical across DS components and Bootstrap ones. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus,
.nav-link:focus-visible,
.focus-ring:focus {
  outline: 0;
  box-shadow: var(--shadow-ring);
  border-color: var(--color-primary);
}

/* Headings use the display face; Bootstrap exposes no variable for this. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2,
.display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

/* Buttons are pills in this system, and .btn-primary must take the
   readable ink + light-brand hairline the DS computes. */
.btn { border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }
.btn-primary {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  box-shadow: inset 0 0 0 1px var(--fill-edge-primary);
}
.btn-secondary {
  --bs-btn-color: var(--on-secondary);
  --bs-btn-bg: var(--color-secondary);
  --bs-btn-border-color: var(--color-secondary);
  --bs-btn-hover-color: var(--on-secondary);
  --bs-btn-hover-bg: var(--color-secondary-hover);
  --bs-btn-hover-border-color: var(--color-secondary-hover);
  --bs-btn-active-bg: var(--color-secondary-active);
  box-shadow: inset 0 0 0 1px var(--fill-edge-secondary);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
}

/* Cards, inputs and progress inherit the DS's shape language. */
.card { --bs-card-border-color: var(--border); --bs-card-border-radius: var(--radius-lg);
  --bs-card-bg: var(--surface-card); box-shadow: var(--shadow-xs); }
.form-control, .form-select { --bs-border-width: 1.5px; border-radius: var(--radius-md); }
.form-control:disabled, .form-select:disabled {
  background: var(--surface-subtle); color: var(--text-muted);
  border-style: dashed; border-color: var(--border-strong); cursor: not-allowed;
}
.progress { --bs-progress-bg: var(--meter-track); --bs-progress-bar-bg: var(--meter-fill);
  --bs-progress-border-radius: var(--radius-pill); }
.badge { border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }

/* ============================================================
   LOCAL ADDITIONS — not upstream. The DS's form controls on stock
   Bootstrap markup, where this bridge stops short:
   - Inputs, selects, checkboxes and radios take the DS's 1.5px
     --border-strong edge. Bootstrap's --bs-border-color (--border)
     is too faint for a control's boundary (WCAG 1.4.11), and a radio
     drawn in it all but disappears.
   - The compiled Bootstrap in frontend/css/main.css hardcodes the
     checked fill (#5D5AA7) and a focused switch's lilac knob, so
     neither follows the tenant without these.
   ============================================================ */
.form-control, .form-select { --bs-border-color: var(--border-strong); }
.form-check-input { --bs-border-width: 1.5px; --bs-border-color: var(--border-strong); }
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e");
}

/* The DS Alert on stock .alert markup: the semantic surface, a hairline in the semantic hue, strong
   body text, and the hue kept for the heading. Bootstrap's own alert colours are compiled pastels the
   bridge never mapped. */
.alert {
  --bs-alert-padding-x: 1.05rem;
  --bs-alert-padding-y: 0.9rem;
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.alert-success { --hb-alert-hue: var(--success); --bs-alert-bg: var(--success-surface); }
.alert-info    { --hb-alert-hue: var(--info);    --bs-alert-bg: var(--info-surface); }
.alert-warning { --hb-alert-hue: var(--warning); --bs-alert-bg: var(--warning-surface); }
.alert-danger  { --hb-alert-hue: var(--danger);  --bs-alert-bg: var(--danger-surface); }
.alert-success, .alert-info, .alert-warning, .alert-danger {
  --bs-alert-border-color: color-mix(in oklab, var(--hb-alert-hue), transparent 78%);
}
.alert-heading { color: var(--hb-alert-hue, inherit); }
.alert-heading { font-size: inherit; font-weight: var(--weight-semibold); margin-bottom: 2px; }