/* ============================================================================
   Component: Bootstrap contextual roles, retuned to AQOON tokens
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   Bootstrap's contextual palette is designed against Bootstrap's own white
   page. On AQOON's surfaces it does not reach WCAG AA — in either theme. Every
   number below was measured on the rendered DOM (light `--surface` / `--bg`,
   dark `--surface`), not read off the source:

     .text-warning        1.51 - 1.63   (light)      #ffc107
     .text-info           1.81 - 1.96   (light)      #0dcaf0
     .btn-outline-warning 1.51          (light)      #ffc107
     .btn-outline-info    1.81          (light)      #0dcaf0
     .text-success        3.82 - 4.18   (both)       #198754
     .text-danger         3.82 - 4.18   (both)       #dc3545
     .text-primary        3.84 - 4.20   (both)       #0d6efd
     .btn-outline-*       3.82 - 4.33   (both)

   Those classes appear ~480 times across the templates, so this is not a page
   problem — it is a role problem, and it belongs at the shared layer. Both
   shells load this file, so the staff app and the parent portal are fixed
   together.

   WHAT IS DELIBERATELY NOT TOUCHED

   Only the roles that FAILED are retuned. Solid buttons (.btn-primary,
   .btn-success, .btn-danger, .btn-light, .btn-brand) all measured >= 4.5 and
   are left alone.

   The `--bs-*-rgb` variables are NOT overridden globally, even though that
   would be terser. They drive fills as well as text, and the two need
   different values: `warning` as TEXT must be dark (#8A5300 on white) while
   `warning` as a FILL must stay amber with dark ink on top. AQOON already
   encodes that split as `--warning` vs `--warning-solid`/`--on-warning-solid`;
   collapsing it would turn every warning badge brown and break the badge's own
   contrast pairing. So the text roles and the outline-button roles are retuned
   individually and the fill roles are left as they are.

   `.text-*-emphasis` (used on `-subtle` badge backgrounds) is a different
   class and is intentionally not matched here.
   ========================================================================== */

/* ------------------------------------------------------------ text roles --
   Bootstrap declares these utilities with !important, so overriding them
   needs !important too; this file loads after Bootstrap, and at equal
   specificity the later !important wins. The tokens are already contrast-
   verified against both surfaces in tests/test_design_tokens.py. */
.text-success{ color: var(--success) !important; }
.text-danger { color: var(--danger)  !important; }
.text-warning{ color: var(--warning) !important; }
.text-info   { color: var(--info)    !important; }
/* Bootstrap's "primary" is its generic interactive blue, not a brand slot —
   AQOON's brand slot is .btn-brand / --brand-*. Mapping it to --link fixes the
   contrast without silently re-branding 39 elements in the school's colour. */
.text-primary{ color: var(--link)    !important; }
/* .text-secondary measured 4.33:1 on --bg. (.text-muted resolves from a
   different Bootstrap variable and already passes, so it is left alone.) */
.text-secondary{ color: var(--ink-muted) !important; }

/* -------------------------------------------------------- outline buttons --
   Driven through Bootstrap's own --bs-btn-* custom properties, so every state
   Bootstrap already implements (hover, active, focus, disabled) follows without
   duplicating its selectors.

   Hover and active fill with the role colour, so their foreground is
   --ink-inverse: white in light mode, near-black in dark. That one token keeps
   the filled state readable in both themes. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info{
  --bs-btn-color:               var(--aq-outline);
  --bs-btn-border-color:        var(--aq-outline);
  --bs-btn-hover-color:         var(--ink-inverse);
  --bs-btn-hover-bg:            var(--aq-outline);
  --bs-btn-hover-border-color:  var(--aq-outline);
  --bs-btn-active-color:        var(--ink-inverse);
  --bs-btn-active-bg:           var(--aq-outline);
  --bs-btn-active-border-color: var(--aq-outline);
  --bs-btn-disabled-color:      var(--aq-outline);
  --bs-btn-disabled-border-color: var(--line-interactive);
}
.btn-outline-primary  { --aq-outline: var(--link); }
.btn-outline-secondary{ --aq-outline: var(--ink-muted); }
.btn-outline-success  { --aq-outline: var(--success); }
.btn-outline-danger   { --aq-outline: var(--danger); }
.btn-outline-warning  { --aq-outline: var(--warning); }
.btn-outline-info     { --aq-outline: var(--info); }