.btn {
  --btn-icon-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  border-radius: var(--radius-8);
  background: transparent;
  font-family: var(--font-family-base);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn__label { display: inline-block; }

.btn__icon {
  display: inline-flex;
  flex: none;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn__icon svg { display: block; width: 100%; height: 100%; }

.btn--sm { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-12); --btn-icon-size: 16px; }
.btn--md { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 16px; }
.btn--lg { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 20px; }

.btn--icon-only.btn--sm { padding: var(--spacing-8); }
.btn--icon-only.btn--md { padding: var(--spacing-12); }
.btn--icon-only.btn--lg { padding: var(--spacing-12); }

.btn--primary { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--hover,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--active,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }
.btn--primary.btn--disabled,
.btn--primary:disabled { background: var(--color-accent-100); }
.btn--primary.btn--loading { background: var(--color-accent-100); }

.btn--secondary {
  background: var(--color-gray-0);
  color: var(--color-gray-900);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
}
.btn--secondary.btn--hover,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px var(--color-accent-400), var(--shadow-4);
  color: var(--color-accent-400);
}
.btn--secondary.btn--active,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
  box-shadow: inset 0 0 0 1px var(--color-accent-600), var(--shadow-4);
  color: var(--color-accent-600);
}
.btn--secondary.btn--disabled,
.btn--secondary:disabled {
  box-shadow: inset 0 0 0 1px var(--color-gray-50); color: var(--color-gray-100);
}
.btn--secondary.btn--loading { box-shadow: inset 0 0 0 1px var(--color-gray-50); }

.btn--tertiary {
  background: var(--color-accent-25);
  color: var(--color-accent-400);
  box-shadow: inset 0 0 0 1px var(--color-accent-100), var(--shadow-4);
}
.btn--tertiary.btn--hover,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--active,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--disabled,
.btn--tertiary:disabled { box-shadow: none; color: var(--color-accent-100); }
.btn--tertiary.btn--loading { box-shadow: none; }

.btn--ghost { background: transparent; color: var(--color-gray-800); }
.btn--ghost.btn--hover,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-400); }
.btn--ghost.btn--active,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--ghost.btn--disabled,
.btn--ghost:disabled { color: var(--color-gray-100); }

.btn--primary.btn--positive { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--hover,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--active,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-600); }
.btn--primary.btn--positive.btn--disabled,
.btn--primary.btn--positive:disabled { background: var(--color-positive-50); }
.btn--primary.btn--positive.btn--loading { background: var(--color-positive-500); }

.btn--primary.btn--negative { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--hover,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--active,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--disabled,
.btn--primary.btn--negative:disabled { background: var(--color-negative-50); }
.btn--primary.btn--negative.btn--loading { background: var(--color-negative-500); }

.btn--ghost.btn--negative { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--hover,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--active,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--disabled,
.btn--ghost.btn--negative:disabled { color: var(--color-negative-50); }

.btn--primary.btn--overlay { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--overlay.btn--hover,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--overlay.btn--active,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }

.btn--primary.btn--overlay.btn--disabled,
.btn--primary.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--overlay.btn--loading { background: var(--color-gray-700); }

.btn--primary.btn--positive.btn--overlay { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--overlay.btn--hover,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-300); }
.btn--primary.btn--positive.btn--overlay.btn--active,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--overlay.btn--disabled,
.btn--primary.btn--positive.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--positive.btn--overlay.btn--loading { background: var(--color-positive-400); }

.btn--primary.btn--negative.btn--overlay { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--overlay.btn--hover,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--overlay.btn--active,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--overlay.btn--disabled,
.btn--primary.btn--negative.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--negative.btn--overlay.btn--loading { background: var(--color-negative-500); }

.btn--secondary.btn--overlay {
  background: transparent;
  color: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-24), var(--shadow-4);
}
.btn--secondary.btn--overlay.btn--hover,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px var(--color-gray-0), var(--shadow-4);
  color: var(--color-gray-0);
}
.btn--secondary.btn--overlay.btn--active,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-84), var(--shadow-4);
  color: var(--color-alpha-light-84);
}
.btn--secondary.btn--overlay.btn--disabled,
.btn--secondary.btn--overlay:disabled {
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-24);
  color: var(--color-alpha-light-24);
}
.btn--secondary.btn--overlay.btn--loading { box-shadow: inset 0 0 0 1px var(--color-alpha-light-24); }

.btn--tertiary.btn--overlay {
  background: transparent;
  color: var(--color-accent-400);
  box-shadow: none;
}
.btn--tertiary.btn--overlay.btn--hover,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--overlay.btn--active,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--overlay.btn--disabled,
.btn--tertiary.btn--overlay:disabled { color: var(--color-gray-600); }

.btn--ghost.btn--overlay { color: var(--color-gray-0); }
.btn--ghost.btn--overlay.btn--hover,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-gray-200); }
.btn--ghost.btn--overlay.btn--active,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-gray-300); }
.btn--ghost.btn--overlay.btn--disabled,
.btn--ghost.btn--overlay:disabled { color: var(--color-gray-600); }

.btn--ghost.btn--negative.btn--overlay { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--overlay.btn--hover,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--overlay.btn--active,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--overlay.btn--disabled,
.btn--ghost.btn--negative.btn--overlay:disabled { color: var(--color-gray-600); }

.btn--primary.btn--overlay .btn__spinner,
.btn--secondary.btn--overlay .btn__spinner,
.btn--ghost.btn--overlay .btn__spinner { color: var(--color-gray-0); }
.btn--tertiary.btn--overlay .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative.btn--overlay .btn__spinner { color: var(--color-negative-400); }

.btn:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.btn--disabled, .btn:disabled { cursor: default; }

.btn--loading { cursor: default; }
.btn--loading .btn__icon,
.btn--loading .btn__label { visibility: hidden; }
.btn__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn__spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: btn-spinner-rotate 0.8s linear infinite;
}
.btn--loading .btn__spinner { display: inline-flex; }

@keyframes btn-spinner-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn__spinner svg { animation: none; }
}

.btn--secondary .btn__spinner,
.btn--tertiary .btn__spinner,
.btn--ghost .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative .btn__spinner { color: var(--color-negative-500); }

.btn__indicator {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}