:root {
  --before-on-dark: var(--bone, #f5f4ef);
}

/*
 * BEFORE contrast contract
 * Any interactive state that resolves to graphite, black, deep green or another
 * dark surface must use the bone-white foreground. Keep lime accents explicit.
 */
.rating-row button.active,
.reason-grid button.active,
.feedback-question button.active,
.feedback-flags button.active,
.record-button,
.review-actions button.primary,
.step-done,
.public-profile-preview > button,
.circle-invite-card > button,
.circle-invite-actions button,
.club-invite > button,
.club-invite > div:nth-child(3) button,
.before-dark-action,
[data-before-surface="dark"] button {
  color: var(--before-on-dark) !important;
}

/* Preserve bone-white text through hover, press, focus and selected states. */
.rating-row button.active:hover,
.rating-row button.active:active,
.rating-row button.active:focus-visible,
.reason-grid button.active:hover,
.reason-grid button.active:active,
.reason-grid button.active:focus-visible,
.feedback-question button.active:hover,
.feedback-question button.active:active,
.feedback-question button.active:focus-visible,
.feedback-flags button.active:hover,
.feedback-flags button.active:active,
.feedback-flags button.active:focus-visible,
.record-button:hover,
.record-button:active,
.record-button:focus-visible,
.review-actions button.primary:hover,
.review-actions button.primary:active,
.review-actions button.primary:focus-visible,
.step-done:hover,
.step-done:active,
.step-done:focus-visible,
.before-dark-action:hover,
.before-dark-action:active,
.before-dark-action:focus-visible,
[data-before-surface="dark"] button:hover,
[data-before-surface="dark"] button:active,
[data-before-surface="dark"] button:focus-visible {
  color: var(--before-on-dark) !important;
}

/* Dark content surfaces inherit the same foreground unless a child deliberately
 * uses a lime or muted-light accent. */
.hero,
.up-next,
.competition-status,
.current-targets,
.step-hero,
.transformation-heading,
.transformation-progress,
.transformation-score-grid,
.public-profile-preview,
.evidence-plan,
.circle-title-row > div,
.circle-invite-card,
.clubs-title > div,
.club-invite,
[data-before-surface="dark"] {
  color: var(--before-on-dark);
}