/* ==========================================================================
 * Kulima ↔ Bootstrap Bridge — Phase 18 (OPTIONAL, conservative, reversible)
 * --------------------------------------------------------------------------
 * Maps a SMALL set of Bootstrap 5 CSS variables onto Kulima semantic tokens so
 * existing Bootstrap components quietly adopt the Kulima palette / radius / font
 * WITHOUT per-component overrides. This is deliberately minimal: it re-points
 * --bs-* custom properties only — it writes NO component rules — so it is fully
 * reversible by simply not loading this file. Nothing here is !important.
 *
 * Load LAST in the Kulima chain (after kulima-components.css) and AFTER the APEX
 * Bootstrap CSS, so these variable values win where Bootstrap reads them.
 *
 * Scope note: the APEX build may hard-code some colours rather than read --bs-*,
 * so this bridge shifts the pieces that ARE variable-driven (links, primary
 * utilities/buttons that use --bs-primary-rgb, border radius, body font) and
 * leaves the rest to the opt-in .kulima-* component layer. It does not attempt a
 * wholesale reskin of the existing theme.
 *
 * REVERT: remove the <link> to this file in public/includes/head.php. No other
 * file depends on it.
 * ========================================================================== */

:root {
  /* --- Brand / primary ------------------------------------------------- */
  /* Bootstrap mixes with --bs-primary-rgb in many places (buttons, focus
   * shadow, links). We cannot express an OKLCH/var() as an "r, g, b" triple at
   * author time, so --bs-primary-rgb keeps a hex-derived triple matching the
   * light-theme green anchor (--kulima-green-600 ≈ #1f7340). The dark-theme
   * block below re-points it to the lightened accent. */
  --bs-primary: var(--kulima-color-primary);
  --bs-primary-rgb: 31, 115, 64;              /* #1f7340 = green-600 */
  --bs-link-color: var(--kulima-color-link);
  --bs-link-color-rgb: 24, 92, 51;            /* #185c33 = green-700 */
  --bs-link-hover-color: var(--kulima-color-link-hover);

  /* --- Semantic status (kept in step with the Kulima roles) ----------- */
  --bs-success: var(--kulima-color-success);
  --bs-warning: var(--kulima-color-warning);
  --bs-danger:  var(--kulima-color-danger);
  --bs-info:    var(--kulima-color-info);

  /* --- Typography ------------------------------------------------------ */
  --bs-body-font-family: var(--kulima-font-body);
  --bs-body-font-size: var(--kulima-font-size-base);
  --bs-body-line-height: var(--kulima-line-height-body);
  --bs-headings-font-family: var(--kulima-font-heading);

  /* --- Radius (Bootstrap 5.2+ reads --bs-border-radius*) --------------- */
  --bs-border-radius: var(--kulima-radius-md);
  --bs-border-radius-sm: var(--kulima-radius-sm);
  --bs-border-radius-lg: var(--kulima-radius-lg);
  --bs-border-radius-pill: var(--kulima-radius-pill);

  /* --- Borders -------------------------------------------------------- */
  --bs-border-color: var(--kulima-color-border);
}

/* Dark theme: re-point the RGB triple to the lightened accent so Bootstrap's
 * primary-tinted utilities read correctly against dark surfaces. green-400 ≈
 * #52aa6e. Scoped to the same selectors the token layer uses so the two stay
 * in lock-step. */
[data-theme="dark"] {
  --bs-primary-rgb: 82, 170, 110;   /* #52aa6e = green-400 */
  --bs-link-color-rgb: 131, 197, 150; /* #83c596 = green-300 */
  --bs-border-color: var(--kulima-color-border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bs-primary-rgb: 82, 170, 110;
    --bs-link-color-rgb: 131, 197, 150;
  }
}