/* =========================================================================
   LAYER 3a — VENDOR BRIDGE
   =========================================================================

   This file inverts control of colour.

   Before: the vendor theme owned the palette, and our --rq-* names were
   aliases pointing *at* them (--rq-blue: var(--bs-primary)). Every restyle
   meant fighting a vendor theme builder.

   After: our roles own the palette, and the vendors' variables point at
   *us*. Bootstrap becomes a consumer. They keep working
   exactly as before — every .btn-primary, .badge, .text-muted, .rq-grid and
   .card still renders — but they render our navy and gold.

   WHY THIS IS THE KEY TO REPLACING MODERNIZE
   Once the vendors read our tokens, they are no longer the source of truth
   for anything. Modernize's 735KB can then be deleted a stylesheet at a
   time: pull one out, replace the handful of layout rules it owned, and the
   colours do not move — because they never came from Modernize in the first
   place. No big-bang rewrite, every step independently revertible.

   SPECIFICITY NOTE — why :root is repeated
   Modernize's strongest declarations are
       [data-bs-theme=dark][data-color-theme=Blue_Theme]:root { --bs-primary: … }
   which is specificity (0,3,0). A plain :root is (0,1,0) and loses no matter
   how late it loads. Repeating the pseudo-class matches (0,3,0) and, loading
   after Modernize, wins the tie. It is not a hack for its own sake — it is
   the minimum needed to outrank a vendor selector we do not control.

   TRADE-OFF, ACCEPTED DELIBERATELY
   Taking over --bs-primary disables Modernize's data-color-theme accent
   switcher (Purple_Theme, Green_Theme, …). Those were generic template
   accents; the product now has one brand. The admin light/dark toggle is
   untouched and still works — that runs on data-bs-theme, which layer 2
   handles. If per-tenant accents are ever wanted, they belong as layer-2
   themes (data-rq-theme), not as Modernize colour themes.

   Load order: after Bootstrap, before rq-vendor.css. See _AppAuthLayout.cshtml.
   ========================================================================= */

/* =========================================================================
   BOOTSTRAP 5 / MODERNIZE
   ========================================================================= */
:root:root:root {

    /* ---- Core surfaces & text ---- */
    --bs-body-bg:              var(--rq-page);
    --bs-body-color:           var(--rq-text);
    --bs-body-color-rgb:       var(--rq-text-rgb);
    --bs-body-bg-rgb:          var(--rq-surface-rgb);
    --bs-emphasis-color:       var(--rq-text);
    --bs-secondary-color:      var(--rq-sub);
    --bs-secondary-bg:         var(--rq-surface-sunken);
    --bs-tertiary-color:       var(--rq-faint);
    --bs-tertiary-bg:          var(--rq-muted);
    --bs-border-color:         var(--rq-border);
    --bs-border-color-translucent: var(--rq-border);

    /* ---- Cards / dropdowns / modals / offcanvas ---- */
    --bs-card-bg:              var(--rq-surface);
    --bs-card-border-color:    var(--rq-border);
    --bs-dropdown-bg:          var(--rq-surface-raised);
    --bs-dropdown-border-color: var(--rq-border);
    --bs-dropdown-link-color:  var(--rq-text);
    --bs-dropdown-link-hover-bg: var(--rq-muted);
    --bs-modal-bg:             var(--rq-surface-raised);
    --bs-modal-border-color:   var(--rq-border);
    --bs-offcanvas-bg:         var(--rq-surface);
    --bs-offcanvas-border-color: var(--rq-border);
    --bs-popover-bg:           var(--rq-surface-raised);
    --bs-tooltip-bg:           var(--rq-inverse);

    /* ---- Accent ---- */
    --bs-primary:              var(--rq-accent);
    --bs-primary-rgb:          var(--rq-accent-rgb);
    --bs-primary-bg-subtle:    var(--rq-accent-soft);
    --bs-primary-border-subtle: var(--rq-accent-mid);
    --bs-primary-text-emphasis: var(--rq-accent-hover);

    --bs-link-color:           var(--rq-accent);
    --bs-link-color-rgb:       var(--rq-accent-rgb);
    --bs-link-hover-color:     var(--rq-accent-hover);

    /* ---- Status ---- */
    --bs-success:              var(--rq-success);
    --bs-success-rgb:          var(--rq-success-rgb);
    --bs-success-bg-subtle:    var(--rq-success-soft);
    --bs-success-border-subtle: var(--rq-success-mid);
    --bs-success-text-emphasis: var(--rq-success-hover);

    --bs-warning:              var(--rq-warning);
    --bs-warning-rgb:          var(--rq-warning-rgb);
    --bs-warning-bg-subtle:    var(--rq-warning-soft);
    --bs-warning-border-subtle: var(--rq-warning-mid);
    --bs-warning-text-emphasis: var(--rq-warning-hover);

    --bs-danger:               var(--rq-danger);
    --bs-danger-rgb:           var(--rq-danger-rgb);
    --bs-danger-bg-subtle:     var(--rq-danger-soft);
    --bs-danger-border-subtle: var(--rq-danger-mid);
    --bs-danger-text-emphasis: var(--rq-danger-hover);

    --bs-info:                 var(--rq-info);
    --bs-info-rgb:             var(--rq-info-rgb);
    --bs-info-bg-subtle:       var(--rq-info-soft);
    --bs-info-border-subtle:   var(--rq-info-mid);
    --bs-info-text-emphasis:   var(--rq-info-hover);

    /* Bootstrap's "warning" is the closest thing it has to a money colour,
       but we do NOT map gold onto it — warning means "something needs
       attention", gold means "this is an amount". Conflating them would put
       gold on every alert. Money gets its own utilities in rq-utilities.css. */

    /* ---- Type ---- */
    --bs-body-font-family:     var(--rq-font-ui);
    --bs-body-font-size:       var(--rq-text-md);
    --bs-body-line-height:     var(--rq-leading-normal);
    --bs-font-monospace:       var(--rq-font-mono);

    /* ---- Shape ---- */
    --bs-border-radius:        var(--rq-radius-md);
    --bs-border-radius-sm:     var(--rq-radius-sm);
    --bs-border-radius-lg:     var(--rq-radius-lg);
    --bs-border-radius-pill:   var(--rq-radius-pill);
}

