.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--text-dark-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease),
              color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn--primary { --btn-bg: var(--orange); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--red); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text-light-bg);
  border-color: var(--text-light-bg);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--text-dark-bg); }
.btn--sm { min-height: 44px; padding: 10px 18px; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }