/* =============================================================================
   COMPONENT: button
   Semantic-first: a plain <button> already looks right (see base.css). Add
   .btn only when you need an emphasized/action variant. This is the SEED
   component that demonstrates the house pattern — copy its shape.

   Pattern rules:
   - One component = one file in components/. It is auto-included in cascade
     order by the stylesheet pipeline (no manifest edit, no build step).
   - Wrap everything in `@layer components {}`.
   - Style via tokens only. No raw hex, no magic numbers.
   - Variants are modifier classes (.btn--primary), not new components.
   - State via real attributes/pseudo-classes (:disabled, [aria-pressed]).
   ========================================================================== */

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-lg);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .btn:active:not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(0.96);
  }

  .btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .btn--primary:hover { background: var(--accent-hover); }

  .btn--secondary {
    background: var(--surface-raised);
    color: var(--color-text);
    border-color: var(--color-border-strong);
  }
  .btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

  .btn--ghost { background: transparent; color: var(--accent); }
  .btn--ghost:hover { background: var(--accent-tint); }

  .btn--danger { background: var(--danger); color: var(--danger-contrast); }
  .btn--danger:hover { filter: brightness(0.94); }

  /* A completed/logged state that's still tappable to undo (FEA-0027's BM
     toggle, mirroring the plan grid's checked-but-undoable row). */
  .btn--success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-fg); }
  .btn--success:hover { filter: brightness(0.97); }

  .btn--block { display: flex; inline-size: 100%; }
  .btn--small { min-block-size: 2rem; padding-inline: var(--space-md); font-size: var(--text-sm); }

  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
}