:root {
  --accent-text-fallback: #ffffff;
}

.app {
  --accent-text: var(--accent-text, var(--accent-text-fallback));
}

.button,
.adminInlineButton,
.favoriteAddButton,
.searchWidgetForm .button {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
}

.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton),
.adminInlineButton,
.favoriteAddButton,
.searchWidgetForm .button {
  color: var(--accent-text, #ffffff);
  background: var(--accent);
}

.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton):hover,
.adminInlineButton:hover,
.favoriteAddButton:hover,
.searchWidgetForm .button:hover {
  border-color: var(--accent);
  filter: brightness(1.05);
}

.buttonSecondary,
.profileDropdown .button,
.widgetMenuButton,
.widgetDragHandle {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-strong) 58%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
}

.buttonSecondary:hover,
.profileDropdown .button:hover,
.widgetMenuButton:hover,
.widgetDragHandle:hover {
  border-color: var(--accent);
}

.input:focus,
.select:focus,
textarea:focus,
.fileInput:focus,
.colorInput:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: var(--accent);
}

.topEditModeButtonActive {
  color: var(--accent-text, #ffffff);
  background: var(--accent);
  border-color: var(--accent);
}

.favoriteTile:hover,
.widgetCard:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border) 35%);
}

.favoriteIconPlaceholder {
  color: var(--accent-text, #ffffff);
  background: var(--accent);
}

.equalsButton {
  color: var(--accent-text, #ffffff) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}