/* Green sampled from the user's Paint swatch in sRGB; keep muted surfaces. */
:root {
  --vc-action: #8db966;
  --vc-action-hover: #83ad5f;
  --vc-action-active: #779d56;
  --vc-action-border: #638348;
  --vc-action-ink: #101610;
  --vc-action-focus: #101610;
}

.btn-verdant,
.btn-success {
  --bs-btn-bg: var(--vc-action);
  --bs-btn-color: var(--vc-action-ink);
  --bs-btn-border-color: var(--vc-action-border);
  --bs-btn-hover-bg: var(--vc-action-hover);
  --bs-btn-hover-color: var(--vc-action-ink);
  --bs-btn-hover-border-color: var(--vc-action-border);
  --bs-btn-active-bg: var(--vc-action-active);
  --bs-btn-active-color: var(--vc-action-ink);
  --bs-btn-active-border-color: var(--vc-action-border);
  --bs-btn-disabled-bg: var(--vc-action);
  --bs-btn-disabled-color: var(--vc-action-ink);
  --bs-btn-disabled-border-color: var(--vc-action-border);
  background: var(--vc-action);
  color: var(--vc-action-ink);
  border: 1px solid var(--vc-action-border);
}

.btn-verdant:hover,
.btn-verdant:focus-visible,
.btn-success:hover,
.btn-success:focus-visible {
  background: var(--vc-action-hover);
  color: var(--vc-action-ink);
  border-color: var(--vc-action-border);
}

.btn-verdant:active,
.btn-verdant.active,
.btn-success:active,
.btn-success.active {
  background: var(--vc-action-active);
  color: var(--vc-action-ink);
  border-color: var(--vc-action-border);
}

.btn-verdant:disabled,
.btn-verdant.disabled,
.btn-success:disabled,
.btn-success.disabled {
  background: var(--vc-action);
  color: var(--vc-action-ink);
  border-color: var(--vc-action-border);
}

.app-nav-group .app-nav-link.active,
.app-nav-link.active {
  background: var(--vc-action);
  color: var(--vc-action-ink);
}
.app-nav-link.active i { color: inherit; }

:is(.btn-outline-verdant, .btn-outline-success),
.workspace-page :is(.btn-outline-verdant, .btn-outline-success) {
  --bs-btn-color: var(--vc-action-ink);
  --bs-btn-border-color: var(--vc-action-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--vc-action);
  --bs-btn-hover-color: var(--vc-action-ink);
  --bs-btn-hover-border-color: var(--vc-action-border);
  --bs-btn-active-bg: var(--vc-action-active);
  --bs-btn-active-color: var(--vc-action-ink);
  --bs-btn-active-border-color: var(--vc-action-border);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--vc-action-ink);
  --bs-btn-disabled-border-color: var(--vc-action-border);
  background: transparent;
  color: var(--vc-action-ink);
  border: 1px solid var(--vc-action-border);
}

:is(.btn-outline-verdant, .btn-outline-success):is(:hover, :focus-visible),
.workspace-page :is(.btn-outline-verdant, .btn-outline-success):is(:hover, :focus-visible) {
  background: var(--vc-action);
  color: var(--vc-action-ink);
  border-color: var(--vc-action-border);
}

:is(.btn-outline-verdant, .btn-outline-success):is(:active, .active),
.workspace-page :is(.btn-outline-verdant, .btn-outline-success):is(:active, .active) {
  background: var(--vc-action-active);
  color: var(--vc-action-ink);
  border-color: var(--vc-action-border);
}

:is(.btn-outline-verdant, .btn-outline-success):is(:disabled, .disabled),
.workspace-page :is(.btn-outline-verdant, .btn-outline-success):is(:disabled, .disabled) {
  background: transparent;
  color: var(--vc-action-ink);
  border-color: var(--vc-action-border);
}

:is(.btn-verdant, .btn-success, .btn-outline-verdant, .btn-outline-success):focus-visible,
.workspace-page :is(.btn-verdant, .btn-success, .btn-outline-verdant, .btn-outline-success):focus-visible {
  outline: 3px solid var(--vc-action-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.workspace-page .fc {
  --fc-button-text-color: var(--vc-action-ink);
  --fc-button-bg-color: var(--vc-action);
  --fc-button-border-color: var(--vc-action-border);
  --fc-button-hover-bg-color: var(--vc-action-hover);
  --fc-button-hover-border-color: var(--vc-action-border);
  --fc-button-active-bg-color: var(--vc-action-active);
  --fc-button-active-border-color: var(--vc-action-border);
}