/* buttons.css — the ONE borderless button primitive.

   Depends on the token layer in variables.css (--focus-ring, --danger,
   --motion-quick, --easing-thread, --space-2/-4, --radius-soft,
   --radius-pill, --opacity-faint) plus the runtime theme tokens (--surface,
   --text, --accent, --text-on-accent, --hover-overlay, --muted, --text-sm,
   --text-base, --text-xs). Loaded right after variables.css + base.css (so
   the tokens exist) and before the component sheets that consume `.btn`.

   This primitive carries the look the settings panel proved in production —
   the former .settings-btn-* family folded into it: a 28px-min, surface-fill,
   soft-cornered button; hover is a background tint, press is a scale ack,
   focus is the one ring; all borderless.

   Shapes:  .btn--pill (fully round — floating toolbar identity)
            .btn--icon (28px square, soft corners — single-glyph tap target)
   Intents: neutral (surface) · --primary (accent CTA) · --danger (a QUIET
            destructive tint, not a loud solid — destructive actions in dense
            lists shouldn't shout) · --ghost (transparent, for icons/links)
   Sizes:   --sm (compact). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font:inherit; font-size:var(--text-sm); font-weight:500; line-height:1.2;
  padding:5px 12px; min-height:28px; margin:0;
  border:none; border-radius:var(--radius-soft);
  background:var(--surface); color:var(--text);
  cursor:pointer; white-space:nowrap;
  transition:background-color var(--motion-quick) var(--easing-thread),
             filter var(--motion-quick) var(--easing-thread),
             transform var(--motion-quick) var(--easing-thread);
}
.btn:hover{ background:var(--hover-overlay); }
.btn:active{ transform:scale(0.97); transition-duration:0s; }
.btn:focus-visible{ outline:var(--focus-ring); outline-offset:2px; }
.btn:disabled{ opacity:var(--opacity-faint); pointer-events:none; }
.btn--pill{ border-radius:var(--radius-pill); }
.btn--primary{ background:var(--accent); color:var(--text-on-accent); }
.btn--primary:hover{ background:var(--accent); filter:brightness(1.08); }
.btn--ghost{ background:transparent; color:var(--muted); }
.btn--ghost:hover{ background:var(--hover-overlay); color:var(--text); }
/* Destructive — a quiet danger-tinted fill that deepens on hover (no outline,
   no loud solid). --danger is the one destructive red (= --error). */
.btn--danger{ color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.btn--danger:hover{ background:color-mix(in srgb, var(--danger) 18%, transparent); }
/* Ghost + danger (the × remove icons): muted at rest, reveals the danger tint
   only on hover so a list of rows doesn't read as all-destructive. */
.btn--ghost.btn--danger{ color:var(--muted); background:transparent; }
.btn--ghost.btn--danger:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.btn--icon{ padding:4px 6px; min-width:28px; min-height:28px; border-radius:var(--radius-soft); font-size:var(--text-base); line-height:1; flex-shrink:0; }
.btn--sm{ font-size:var(--text-xs); padding:2px var(--space-4); }