.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--ink); background:var(--ink); color:var(--cream);
  font-family:var(--f-body); font-weight:500; font-size:14px; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover { background:var(--accent-2); border-color:var(--accent-2); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--hair-2); }
.btn.ghost:hover { background:rgba(27,24,20,.05); }
/* Public-nav "you are here" state on a ghost button. Filled cream with
   an ink border distinguishes the active page from inactive ghosts
   without competing with the accent-colored Sign-in CTA. */
.btn.ghost.is-active { background:var(--cream-2); border-color:var(--ink-2); color:var(--ink); }
.btn.ghost.is-active:hover { background:var(--cream-2); }
/* Third-party auth buttons. Ghost-styled on the cream page so they
   don't read as three competing primary CTAs; hover fills with the
   brand color for unambiguous identification on tap/hover. SVG icons
   use `currentColor` (set in admin.rs) so they flip with the text. */
.btn.brand-google { background:transparent; color:var(--ink); border-color:var(--hair-2); }
.btn.brand-google:hover { background:#fff; border-color:#dadce0; }
.btn.brand-facebook { background:transparent; color:#1877F2; border-color:#1877F2; }
.btn.brand-facebook:hover { background:#1877F2; color:#fff; border-color:#1877F2; }
.btn.brand-whatsapp { background:transparent; color:#128C7E; border-color:#128C7E; }
.btn.brand-whatsapp:hover { background:#25D366; color:#fff; border-color:#25D366; }
.btn.sm { padding:6px 12px; font-size:13px; }
.btn.lg { padding:14px 22px; font-size:15px; }
.btn.icon { padding:8px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn.danger { background:transparent; color:var(--danger); border-color:var(--danger); }
.btn.danger:hover { background:var(--danger-soft); }
.btn.danger.solid { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.danger.solid:hover { background:var(--danger-2); border-color:var(--danger-2); }