/* =========================================================
   roles.css
   Purpose:
   - Role/component classes that APPLY the chosen color (--kn-c)
   - Shared between UI and content
   - Minimal built-in transitions (safe default)
   ========================================================= */

/* Jumbo / block background */
.kn-jumbo {
  background-color: var(--kn-c) !important;
}

/* Button (use with Bootstrap .btn) */
.kn-btn {
  background-color: var(--kn-c) !important;
  border-color: var(--kn-c) !important;
  color: var(--kn-on, var(--kn-on-default)) !important;

  /* safe default smoothness */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.kn-btn-outline {
  background-color: transparent !important;
  border-color: var(--kn-c) !important;
  color: var(--kn-c) !important;

  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.kn-badge-outline {
  background-color: transparent;
  border: 1px solid var(--kn-c);
  color: var(--kn-c);
}

/* Link */
.kn-ln {
  color: var(--kn-c) !important;
  transition: color .15s ease;
}

/* WYSIWYG content safety (optional but recommended) */
.kn-textEdit {
  color: var(--bs-body-color) !important;
}

/* Table */
.kn-table-highlight {
  --bs-table-bg: var(--kn-c);
}

.kn-textEdit * {
  color: inherit !important;
}

.kn-textEdit a,
.kn-textEdit a * {
  color: var(--bs-link-color) !important;
  text-decoration-color: currentColor;
}

.kn-textEdit a:hover,
.kn-textEdit a:hover * {
  color: var(--bs-link-hover-color) !important;
}