/* Buttons: pill shaped, a 48px touch target, one primary look per intent. */
@layer components {
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5); border: 2px solid transparent; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s var(--ease), box-shadow 0.18s; }
    .btn:active { transform: scale(0.98); }
    .btn svg { flex: none; }
    .btn-md { min-height: var(--tap); }
    .btn-lg { min-height: 56px; padding-inline: var(--space-6); font-size: var(--text-md); }
    .btn-sm { min-height: 40px; padding-inline: var(--space-4); font-size: var(--text-xs); }
    .btn-primary { background: var(--gradient-primary); color: var(--color-on-dark); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 30%, transparent); }
    .btn-primary:hover { background: var(--gradient-primary); color: var(--color-on-dark); transform: translateY(-2px); box-shadow: 0 12px 24px color-mix(in srgb, var(--color-primary) 38%, transparent); }
    .btn-accent { background: var(--gradient-accent); color: var(--color-ink-deep); box-shadow: var(--shadow-glow); }
    .btn-accent:hover { background: var(--gradient-accent); color: var(--color-ink-deep); transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--color-accent) 50%, transparent); }
    .btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
    .btn-outline:hover { background: var(--color-primary); color: var(--color-on-dark); }
    .btn-muted { background: var(--color-surface-alt); color: var(--color-primary-strong); border-color: var(--color-border); }
    .btn-muted:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .btn-ghost { background: transparent; color: var(--color-primary); }
    .btn-ghost:hover { background: var(--color-surface-alt); }
    .btn-dark { background: var(--color-ink-deep); color: var(--color-on-dark); }
    .btn-dark:hover { background: var(--color-primary); color: var(--color-on-dark); }
    .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; color: var(--color-primary-strong); background: transparent; border: 0; border-radius: var(--radius-round); cursor: pointer; }
    .icon-btn:hover { background: var(--color-surface-alt); }
    .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); color: var(--color-text); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
    .chip:hover, .chip.is-current { color: var(--color-on-dark); background: var(--color-primary); border-color: var(--color-primary); }
}