:root {
  --status-active: #07c160;
  --status-active-deep: #087f43;
  --status-active-ink: #145c38;
  --status-active-soft: #e9f8ef;
  --status-active-pale: #f3fbf6;

  --status-development: #38bdf8;
  --status-development-deep: #0369a1;
  --status-development-ink: #075985;
  --status-development-soft: #e8f6ff;
  --status-development-pale: #f4fbff;

  --status-planned: #8b5cf6;
  --status-planned-deep: #6d28d9;
  --status-planned-ink: #5632a5;
  --status-planned-soft: #f1ebff;
  --status-planned-pale: #faf7ff;
}

.theme-active {
  --accent: var(--status-active);
  --accent-deep: var(--status-active-deep);
  --accent-ink: var(--status-active-ink);
  --accent-soft: var(--status-active-soft);
  --accent-pale: var(--status-active-pale);
  --accent-rgb: 7, 193, 96;
}

.theme-development {
  --accent: var(--status-development);
  --accent-deep: var(--status-development-deep);
  --accent-ink: var(--status-development-ink);
  --accent-soft: var(--status-development-soft);
  --accent-pale: var(--status-development-pale);
  --accent-rgb: 56, 189, 248;
}

.theme-planned {
  --accent: var(--status-planned);
  --accent-deep: var(--status-planned-deep);
  --accent-ink: var(--status-planned-ink);
  --accent-soft: var(--status-planned-soft);
  --accent-pale: var(--status-planned-pale);
  --accent-rgb: 139, 92, 246;
}

/* Inline code: readable but visually quiet on active workflow pages. */
.theme-active code {
  color: #202521 !important;
  background: #eef0ee !important;
  border: 1px solid #dfe3df;
}