/* Buttons: tonal surfaces instead of outlines. primary = accent; secondary = paper-2 + 1 px inner rule;
   success / danger = soft tone; ghost / text = accent words. Icon-only = 44 px circle. */
@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid transparent;
    font-weight: 600; font-size: var(--fs-body); letter-spacing: .005em; white-space: nowrap; text-align: center;
    color: var(--ink); text-decoration: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast), background var(--t-fast);
  }
  .btn:active:not(:disabled) { transform: scale(.975); }
  .btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: .45; cursor: default; }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .btn-secondary { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule-2); }
  .btn-ghost { background: transparent; color: var(--accent); padding: 0 10px; }
  .btn-success { background: var(--good-soft); color: var(--good-ink); }
  .btn-danger { background: var(--danger-soft); color: var(--danger); }
  .btn-danger-text { background: transparent; color: var(--danger); padding: 0 10px; }
  .btn-text { min-height: 44px; padding: 0 6px; border-radius: var(--r-sm); color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
  .btn-dashed { border: 1.5px dashed var(--rule-2); color: var(--ink-2); }
  .btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-caption); border-radius: 10px; gap: 6px; }
  .btn-lg { min-height: 52px; padding: 0 22px; font-size: var(--fs-lead); border-radius: 14px; }
  .btn-block { width: 100%; }
  /* icon-only: .btn-icon (new) and the older .btn-icon-only / .icon-btn names */
  .btn-icon, .icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
  .btn-icon.square { border-radius: var(--r-ctl); }
  .btn-icon-only { width: 44px; padding: 0; flex: none; }
  .btn-sm.btn-icon-only { width: 36px; }
  .btn-group { display: inline-flex; gap: 2px; padding: 2px; background: var(--paper-2); border-radius: var(--r-ctl); }
  .btn-group .btn { border: 0; border-radius: 10px; min-width: 40px; background: transparent; box-shadow: none; }
  .btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
  .btn-row-wrap { flex-wrap: wrap; }
  .more-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; color: var(--accent); font-weight: 600; font-size: var(--fs-caption); white-space: nowrap; }
  .more-link::after { content: "→"; }

  @media (max-width: 760px) { .btn-sm { min-height: 44px; } }
  @media (hover: hover) {
    .btn-primary:hover:not(:disabled) { background: hsl(var(--ah) var(--as) calc(var(--al) - 5%)); }
    .btn-secondary:hover:not(:disabled), .btn-success:hover:not(:disabled), .btn-danger:hover:not(:disabled), .btn-icon:hover, .icon-btn:hover { background: var(--paper-2); }
    .btn-ghost:hover, .btn-text:hover, .more-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
}