:root {
  --button-transition-fast: 110ms ease;
  --button-transition-normal: 170ms ease;
  --button-press-transform: translateY(1px) scale(0.99);
  --button-focus-ring: rgba(23, 107, 85, 0.25);
  --button-shadow: 0 1px 2px rgba(23, 33, 43, 0.08);
  --button-shadow-hover: 0 4px 12px rgba(23, 33, 43, 0.12);
  --button-shadow-active: 0 1px 3px rgba(23, 33, 43, 0.1);
  --filter-surface: #fff;
  --filter-border: var(--border);
  --filter-shadow: 0 12px 28px rgba(23, 33, 43, 0.12);
  --filter-active: var(--accent-soft);
}

.clean-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: 600 14px/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--button-shadow);
  transition:
    transform var(--button-transition-fast),
    background-color var(--button-transition-normal),
    background var(--button-transition-normal),
    border-color var(--button-transition-normal),
    box-shadow var(--button-transition-normal),
    color var(--button-transition-normal),
    opacity var(--button-transition-normal),
    filter var(--button-transition-normal);
}

.clean-button-primary {
  background: var(--accent);
  color: #fff;
}

.clean-button-secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.clean-button:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.98);
  box-shadow: var(--button-shadow-hover);
}

.clean-button:active:not(:disabled):not([aria-disabled="true"]),
.clean-button.is-pressed {
  transform: var(--button-press-transform);
  box-shadow: var(--button-shadow-active);
}

.clean-button:focus-visible {
  outline: 3px solid var(--button-focus-ring);
  outline-offset: 2px;
}

.clean-button:disabled,
.clean-button[aria-disabled="true"],
.clean-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
  transform: none;
}

.clean-button[aria-disabled="true"],
.clean-button.is-disabled {
  pointer-events: none;
}

.clean-button.is-loading,
.clean-button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.78;
  pointer-events: none;
}

:is(
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
) {
  transition:
    transform var(--button-transition-fast),
    background-color var(--button-transition-normal),
    background var(--button-transition-normal),
    border-color var(--button-transition-normal),
    box-shadow var(--button-transition-normal),
    color var(--button-transition-normal),
    opacity var(--button-transition-normal),
    filter var(--button-transition-normal);
}

:is(
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
):active:not(:disabled):not([aria-disabled="true"]) {
  transform: var(--button-press-transform);
}

:is(
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
):focus-visible {
  outline: 3px solid var(--button-focus-ring);
  outline-offset: 2px;
}

:is(
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
):disabled,
:is(
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .clean-button,
  :is(
    .head-btn,
    .btn-create-toggle,
    .flt-icon,
    .flt-btn-reset,
    .flt-btn-apply,
    .flt-date-btn,
    .seg-btn,
    .type-btn,
    .co-btn,
    .u-btn,
    .rs-btn,
    .drv-btn,
    .st-btn-primary,
    .st-btn-secondary,
    .planner-day-act-btn,
    .planner-confirm-btn,
    .planner-modal-btn,
    .planner-map-mode-btn,
    .request-object-add-btn,
    .request-object-remove-btn,
    .fl-act-btn,
    .journal-reset
  ) {
    transition: none;
  }

  .clean-button:active,
  :is(
    .head-btn,
    .btn-create-toggle,
    .flt-icon,
    .flt-btn-reset,
    .flt-btn-apply,
    .flt-date-btn,
    .seg-btn,
    .type-btn,
    .co-btn,
    .u-btn,
    .rs-btn,
    .drv-btn,
    .st-btn-primary,
    .st-btn-secondary,
    .planner-day-act-btn,
    .planner-confirm-btn,
    .planner-modal-btn,
    .planner-map-mode-btn,
    .request-object-add-btn,
    .request-object-remove-btn,
    .fl-act-btn,
    .journal-reset
  ):active {
    transform: none;
  }
}
