.btn:focus-visible {
  outline-offset: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-input, 8px);
  min-height: var(--appButtonHeight, 40px);
  padding: 0 var(--appButtonPadding-x, 14px);
  cursor: pointer;
  font-weight: 600;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.btn:not(.secondary):not(.btn--ghost):not(.btn--orange),
.openWorkspaceButton,
.companyCardButton {
  background: var(--gradient-cta);
  color: #ffffff;
  border: 1px solid var(--cta-border);
  box-shadow:
    var(--cta-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.22);
}

.btn:not(.secondary):not(.btn--ghost):not(.btn--orange):hover,
.openWorkspaceButton:hover,
.companyCardButton:hover {
  background: var(--gradient-cta-hover);
  border-color: var(--cta-border-hover);
  box-shadow:
    var(--cta-shadow-hover),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.btn:not(.secondary):not(.btn--ghost):not(.btn--orange):active,
.openWorkspaceButton:active,
.companyCardButton:active {
  background: var(--gradient-cta-active);
  transform: translateY(0);
  box-shadow:
    0 7px 16px rgba(37, 99, 235, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn.secondary {
  background: var(--control-bg, #fff);
  color: var(--control-text, #0f172a);
  border: 1px solid var(--control-border, var(--line));
  text-shadow: none;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(15, 23, 42, 0.05));
}