/* Dynamic brand colors published from the administration theme settings. */
.hero {
  background:
    linear-gradient(90deg, rgba(var(--green2-rgb), .94), rgba(var(--green-rgb), .24)),
    url('https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=900&q=82') center/cover;
}

.category-banner,
.new-hero {
  background:
    linear-gradient(90deg, rgba(var(--green2-rgb), .92), rgba(var(--green-rgb), .2)),
    url('https://images.unsplash.com/photo-1619566636858-adf3ef46400b?auto=format&fit=crop&w=800&q=82') center/cover;
}

.profile-hero,
.balance-card,
.points-head,
.revenue,
.level-card {
  background: var(--green2);
}

.member-card,
.new-card {
  background: var(--mint);
}

.member-card {
  color: var(--green2);
}

.member-progress {
  background: rgba(var(--green-rgb), .16);
}

.profile-message-badge,
.notification-summary > span::after {
  border-color: var(--green2);
}

.category-icon.tone-0,
.invite-avatar.tone-0 {
  background: var(--mint);
  color: var(--green);
}