/* ========== Brand tokens (fallbacks) ========== */
:root {
  --brand-primary: #2c7be5;
  --brand-secondary: #748194;
  --brand-accent: #27bcfd;

  /* RGB strings for rgba(var(--..-rgb), x) */
  --brand-primary-rgb: 44, 123, 229;
  --brand-secondary-rgb: 116, 129, 148;
  --brand-accent-rgb: 39, 188, 253;
}

/* ========== Map to Falcon variables used across theme ========== */
:root {
  --falcon-primary: var(--brand-primary);
  --falcon-primary-rgb: var(--brand-primary-rgb);

  --falcon-secondary: var(--brand-secondary);
  --falcon-secondary-rgb: var(--brand-secondary-rgb);

  /* In Falcon, accent is often “info” */
  --falcon-info: var(--brand-accent);
  --falcon-info-rgb: var(--brand-accent-rgb);
}

/* ========== FORCE override where Falcon hardcodes colors ========== */

/* Primary buttons: normal = primary, hover/active = accent */
.btn-primary,
.tox .tox-menu__footer .tox-button:last-child,
.tox .tox-dialog__footer .tox-button:last-child {
  --falcon-btn-bg: var(--brand-primary) !important;
  --falcon-btn-border-color: var(--brand-primary) !important;

  --falcon-btn-hover-bg: var(--brand-accent) !important;
  --falcon-btn-hover-border-color: var(--brand-accent) !important;

  --falcon-btn-active-bg: var(--brand-accent) !important;
  --falcon-btn-active-border-color: var(--brand-accent) !important;

  --falcon-btn-focus-shadow-rgb: var(--brand-accent-rgb) !important;
}

.btn-outline-primary {
  --falcon-btn-color: var(--brand-primary) !important;
  --falcon-btn-border-color: var(--brand-primary) !important;

  --falcon-btn-hover-bg: var(--brand-accent) !important;
  --falcon-btn-hover-border-color: var(--brand-accent) !important;

  --falcon-btn-focus-shadow-rgb: var(--brand-accent-rgb) !important;
}

/* Text helpers that rely on Falcon RGB variables */
.text-primary {
  color: rgba(var(--falcon-primary-rgb), 1) !important;
}
.bg-primary {
  background-color: rgba(var(--falcon-primary-rgb), 1) !important;
}

/* Your existing example */
.terms-sidebar .nav-link.active {
  color: var(--brand-primary) !important;
}

/* Optional: brand headings (enable only if you really want it) */
.brand-headings h1,
.brand-headings h2,
.brand-headings h3,
.brand-headings h4 {
  color: rgba(var(--brand-primary-rgb), 1) !important;
}
