/* ============================================================================
   ARTYS DESIGN SYSTEM - Bootstrap 5 bridge (minimal)
   Remaps Bootstrap's runtime CSS variables onto Artys tokens so existing
   Bootstrap markup (navbar, buttons, links, surfaces) inherits the brand
   colours WITHOUT touching the markup.

   Scope: MINIMAL / demonstrative (phase 0). Only the high-impact global
   variables + the component overrides exercised by the two pilot pages.
   A fuller per-component theme (all .btn-*, modals, forms, alerts) is phase 1.

   Load order: AFTER bootstrap.min.css and AFTER tokens.css.
   ========================================================================== */

:root {
  /* --- Global colour variables (high impact) --- */
  --bs-primary:        var(--primary-500, #5B8DA6);
  --bs-primary-rgb:    91, 141, 166;            /* #5B8DA6 -> for rgba() tints */
  --bs-link-color:     var(--azure-500, #0090DA);
  --bs-link-color-rgb: 0, 144, 218;             /* #0090DA */
  --bs-link-hover-color: var(--primary-700, #1E5E77);

  --bs-body-bg:        var(--grey-50, #F8F9FA);
  --bs-body-color:     var(--grey-950, #212529);
  --bs-border-color:   var(--grey-300, #DEE2E6);

  --bs-font-sans-serif: var(--font-sans, "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif);
}

/* --- Component overrides exercised by the pilots ------------------------- */
/* Bootstrap's .btn-primary colours are Sass-compiled, not driven by
   --bs-primary, so they need an explicit token remap. */
.btn-primary {
  --bs-btn-bg:           var(--primary-500, #5B8DA6);
  --bs-btn-border-color: var(--primary-500, #5B8DA6);
  --bs-btn-hover-bg:           var(--primary-600, #497A93);
  --bs-btn-hover-border-color: var(--primary-600, #497A93);
  --bs-btn-active-bg:           var(--primary-700, #1E5E77);
  --bs-btn-active-border-color: var(--primary-700, #1E5E77);
  --bs-btn-disabled-bg:           var(--primary-500, #5B8DA6);
  --bs-btn-disabled-border-color: var(--primary-500, #5B8DA6);
}

.btn-outline-primary {
  --bs-btn-color:        var(--primary-500, #5B8DA6);
  --bs-btn-border-color: var(--primary-500, #5B8DA6);
  --bs-btn-hover-bg:           var(--primary-500, #5B8DA6);
  --bs-btn-hover-border-color: var(--primary-500, #5B8DA6);
  --bs-btn-active-bg:           var(--primary-600, #497A93);
  --bs-btn-active-border-color: var(--primary-600, #497A93);
}

/* Form fields sit on --surface-1 (white), not the page's --bs-body-bg
   (grey-50) — otherwise every select/input reads as greyed-out/disabled. */
.form-select,
.form-control {
  background-color: var(--surface-1, #FFFFFF);
}
.form-select:disabled {
  background-color: var(--surface-2, #F8F9FA);
}