.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  height: 40px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-std),
              box-shadow var(--d-fast) var(--ease-std),
              transform var(--d-fast) var(--ease-std),
              opacity var(--d-fast) var(--ease-std);
  user-select: none;
  white-space: nowrap;
  border: none;
  outline: none;
}
.btn:focus-visible { box-shadow: var(--sh-focus); }
.btn:active { transform: translateY(1px); }

/* Primary — teal filled */
.btn--primary {
  background: var(--accent);
  color: var(--ink-on-accent);
}
.btn--primary:hover {
  background: var(--accent-hot);
  box-shadow: 0 4px 20px rgba(0,229,196,0.28);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover {
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

/* Sizes */
.btn--sm  { height: 32px; padding: 0 var(--s-4); font-size: var(--t-xs); }
.btn--lg  { height: 48px; padding: 0 var(--s-8); font-size: var(--t-md); }
.btn--xl  { height: 56px; padding: 0 var(--s-10); font-size: var(--t-lg); }
.btn--block { width: 100%; }

/* Disabled */
.btn:disabled, .btn[disabled], .btn--disabled {
  opacity: 0.38;
  pointer-events: none;
}