/* ═══ ONE BUTTON, FOR EVERY SURFACE ═══════════════════════════════════════════
   The landing page, the sign-in page and the app all load THIS file, and none of
   them defines a fill or a label colour of its own.

   That duplication is what produced black-on-black twice in a single day once the
   accent went dark for the paper theme: `.strip a.on` and `.btn-gold` had each
   hardcoded #000 for their label, which was only ever correct while the accent
   happened to be light. Three definitions meant three chances to get it wrong, and
   fixing one taught the others nothing.

   THE INVARIANT, and the whole reason this file exists:
       a filled control paints with var(--acc) and labels with var(--acc-ink).
   Never a literal, anywhere. Change the accent once and every button on every
   surface follows it, in every theme, including ones not written yet.

   Variants   .btn        solid, full-width pill — the primary action (the app's
                          existing shape; ~22 call sites already use it bare)
              .btn.o      outlined secondary, same geometry
              .btn.inline auto width, tighter — for page headers and CTA rows
              .btn.sm     smaller still
   Groups     .btns       a row of them
   ────────────────────────────────────────────────────────────────────────────── */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; border-radius: 24px; border: 0;
  background: var(--acc); color: var(--acc-ink);
  font: 700 16px var(--sans, system-ui); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: filter .15s, border-color .15s, transform .06s;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn[disabled], .btn.is-off { opacity: .55; cursor: default; pointer-events: none; }

/* secondary: carries no fill, so it takes the page's own ink and hairline */
.btn.o {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn.o:hover { filter: none; border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }

/* header and CTA-row buttons size to their label instead of the column */
.btn.inline { display: inline-flex; width: auto; height: auto;
  padding: 12px 20px; border-radius: 12px; font-size: .95rem; font-weight: 700; }
.btn.sm { padding: 8px 14px; font-size: .86rem; border-radius: 10px; height: auto; width: auto;
  display: inline-flex; }

.btns { display: flex; gap: 10px; margin: 14px 0 0; }