/* ============================================================================
   SOLA Design System — Bootstrap 5.3 Bridge
   ----------------------------------------------------------------------------
   Maps SOLA tokens (tokens.css) onto Bootstrap's --bs-* custom properties so
   stock Bootstrap components (buttons, forms, tables, modals, badges, nav…)
   render in the SOLA theme with zero per-app overrides.

   Load order in each app:
     1) bootstrap.min.css      (or bootstrap.rtl.min.css when dir="rtl")
     2) tokens.css             (defines the SOLA tokens)
     3) bootstrap-bridge.css   (this file — overrides --bs-* with tokens)
     4) app-specific styles    (anything still product-unique)
   ========================================================================== */

:root {
  /* ----- Brand ------------------------------------------------------------ */
  --bs-primary:        var(--sola-primary);
  --bs-primary-rgb:    var(--sola-primary-rgb);
  --bs-link-color:     var(--sola-primary);
  --bs-link-color-rgb: var(--sola-primary-rgb);
  --bs-link-hover-color: var(--sola-primary-dark);

  /* ----- Semantics -------------------------------------------------------- */
  --bs-secondary:     var(--secondary-color);
  --bs-success:       var(--success-color);
  --bs-success-rgb:   var(--success-rgb);
  --bs-warning:       var(--warning-color);
  --bs-warning-rgb:   var(--warning-rgb);
  --bs-danger:        var(--danger-color);
  --bs-danger-rgb:    var(--danger-rgb);
  --bs-info:          var(--info-color);
  --bs-info-rgb:      var(--info-rgb);

  /* ----- Body / surfaces -------------------------------------------------- */
  --bs-body-bg:        var(--bg-color);
  --bs-body-color:     var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color:  var(--text-light);
  --bs-emphasis-color:  var(--text-primary);
  --bs-border-color:    var(--border-color);

  /* ----- Typography ------------------------------------------------------- */
  --bs-body-font-family:      var(--font-sans);
  --bs-body-font-size:        var(--fs-base);
  --bs-body-line-height:      var(--lh-normal);
  --bs-body-font-weight:      var(--fw-regular);
  --bs-font-monospace:        var(--font-mono);
  --bs-heading-color:         var(--text-primary);

  /* ----- Radius ----------------------------------------------------------- */
  --bs-border-radius:       var(--radius-sm);
  --bs-border-radius-sm:    var(--radius-xs);
  --bs-border-radius-lg:    var(--radius-lg);
  --bs-border-radius-xl:    var(--radius-xl);
  --bs-border-radius-pill:  var(--radius-pill);

  /* ----- Focus ring ------------------------------------------------------- */
  --bs-focus-ring-color: var(--sola-primary-soft-2);
}

/* RTL: Arabic font on the document when dir="rtl". Apps already swap to
   bootstrap.rtl.min.css; this just sets the typeface. */
[dir="rtl"] body { font-family: var(--font-arabic); }

/* ----- Primary button: align hover/active to brand-dark ------------------- */
.btn-primary {
  --bs-btn-bg:               var(--sola-primary);
  --bs-btn-border-color:     var(--sola-primary);
  --bs-btn-hover-bg:         var(--sola-primary-dark);
  --bs-btn-hover-border-color: var(--sola-primary-dark);
  --bs-btn-active-bg:        var(--sola-primary-dark);
  --bs-btn-active-border-color: var(--sola-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--sola-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color:            var(--sola-primary);
  --bs-btn-border-color:     var(--sola-primary);
  --bs-btn-hover-bg:         var(--sola-primary);
  --bs-btn-hover-border-color: var(--sola-primary);
  --bs-btn-active-bg:        var(--sola-primary-dark);
}

/* ----- Card / modal default radius from the SOLA scale -------------------- */
.card   { --bs-card-border-radius: var(--radius-lg); border-color: var(--border-color); }
.modal-content { border-radius: var(--radius-lg); }

/* ----- Form control focus uses the SOLA ring ------------------------------ */
.form-control:focus,
.form-select:focus {
  border-color: var(--sola-primary);
  box-shadow: var(--focus-ring);
}