/* ============================================================
   Button
   主動作は Filled（CTA＝トープ）。署名色 --brand は記号色のため
   原則ボタンには使わない。階層は Filled → Tonal → Text。
   ============================================================ */

.btn {
  border-radius: var(--radius-control);
  padding: 13px 22px;
  font-size: 15px; font-weight: 700; letter-spacing: .16em; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-main);
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.btn.filled { background: var(--cta); color: var(--on-cta); }
.btn.tonal  { background: color-mix(in srgb, var(--cta) 14%, var(--surface)); color: var(--cta); border: 1px solid color-mix(in srgb, var(--cta) 24%, var(--line)); }
.btn.text   { background: none; color: var(--cta); letter-spacing: .1em; padding: 10px 14px; min-height: var(--tap-min); }
.btn.block  { display: flex; width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn.pressed { background: color-mix(in srgb, var(--cta) 82%, #000); }
:root[data-theme="night"] .btn.pressed { background: color-mix(in srgb, var(--cta) 82%, #fff); }