/* components/buttons.css */
.btn{
  --_c:var(--accent);
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.2rem;
  border:1px solid var(--_c); border-radius:var(--radius-sm); background:transparent;
  color:var(--fg); font-family:var(--font-mono); font-size:.85rem; letter-spacing:.04em;
  text-transform:uppercase; position:relative; overflow:hidden; transition:.18s;
}
.btn:hover{ box-shadow:0 0 0 2px color-mix(in srgb,var(--_c) 40%,transparent) inset, 0 0 24px color-mix(in srgb,var(--_c) 40%,transparent); color:var(--_c) }
.btn--solid{ background:var(--_c); color:#02030a; font-weight:700 }
.btn--solid:hover{ color:#02030a; filter:brightness(1.1) }
.btn--ghost{ border-color:var(--border-strong); color:var(--fg-muted) }
.btn--ghost:hover{ color:var(--accent) }
.btn--danger{ --_c:var(--err) }
.btn--sm{ padding:.45rem .8rem; font-size:.72rem }
.btn[disabled]{ opacity:.4; pointer-events:none }
.btn .kbd{ font-size:.6rem; opacity:.7; border:1px solid currentColor; border-radius:4px; padding:0 .3em }