:root {
  --section-library-overview-rgb: 4, 115, 136;
  --section-library-overview-color: rgba(var(--section-library-overview-rgb), 0.8);
  --section-crate-digging-rgb: 102, 33, 130;
  --section-crate-digging-color: rgba(var(--section-crate-digging-rgb), 0.8);
  --section-curation-rgb: 24, 44, 76;
  --section-curation-color: rgba(var(--section-curation-rgb), 0.8);
  --section-categorisation-rgb: 33, 130, 109;
  --section-categorisation-color: rgba(var(--section-categorisation-rgb), 0.8);
  --section-creativity-rgb: 130, 32, 72;
  --section-creativity-color: rgba(var(--section-creativity-rgb), 0.8);
  --section-care-rgb: 130, 46, 33;
  --section-care-color: rgba(var(--section-care-rgb), 0.8);

  /* Status colours reused across the app */
  --status-red-rgb: 130, 33, 33;
  --status-red: rgba(var(--status-red-rgb), 0.8);
  --status-orange-rgb: 131, 52, 19;
  --status-orange: rgba(var(--status-orange-rgb), 0.8);
  --status-yellow-rgb: 241, 181, 0;
  --status-yellow: rgba(var(--status-yellow-rgb), 0.8);
  --status-green-rgb: 19, 131, 28;
  --status-green: rgba(var(--status-green-rgb), 0.8);
  --status-info-rgb: 33, 81, 130;
  --status-info: rgba(var(--status-info-rgb), 0.8);
}
.section-gradient {
  background-color: var(--bs-body-bg);
}
.section-library-overview,
.section-crate-digging,
.section-curation,
.section-categorisation,
.section-creativity,
.section-care {
  background-image: none;
}

/* ── Section heading styling ─────────────────────────────────────────── */
.section-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-title-row .bi {
  color: #ffffff;
  font-size: 2.5em;
}

.section-title.section-almost-there .section-title-row .bi {
  color: #000;
}

.section-title.section-library-overview {
  border-color: var(--section-library-overview-color);
}
.section-title.section-crate-digging {
  border-color: var(--section-crate-digging-color);
}
.section-title.section-curation {
  border-color: var(--section-curation-color);
}
.section-title.section-categorisation {
  border-color: var(--section-categorisation-color);
}
.section-title.section-creativity {
  border-color: var(--section-creativity-color);
}
.section-title.section-care {
  border-color: var(--section-care-color);
}
/* Severity sections for Your System page */
.section-title.section-off-track {
  border-color: var(--status-red);
  background-color: var(--status-red);
  color: #fff;
}
.section-title.section-needs-attention {
  border-color: var(--status-orange);
  background-color: var(--status-orange);
  color: #fff;
}
.section-title.section-almost-there {
  border-color: var(--status-yellow);
  background-color: var(--status-yellow);
  color: #000;
}
.section-title.section-on-track {
  border-color: var(--status-green);
  background-color: var(--status-green);
  color: #fff;
}