/* ============================================================
   FRNTCOURT — the button system
   ============================================================
   ONE definition, loaded by every page that has a button. Before
   this file there were four, all claiming the same class names:

     styles.css          6px radius, sentence case, 600, orange fill
     app-theme.css       pill, UPPERCASE, 700, +0.04em, scoped .app-layout
     marketing-shared    pill, UPPERCASE, 700, +0.04em, all !important
     login-theme.css     pill, UPPERCASE, 700, +0.08em, all !important

   So `.btn-primary` meant a different button on four surfaces, and
   the later three had to shout over the first with specificity or
   !important. That is why this file exists rather than a fifth
   override: the fix for a fork is one file, not another layer.

   Load order: after css/tokens.css, and after styles.css /
   marketing-shared.css / app-theme.css so it wins on source order
   alone. Nothing here uses !important, and nothing here is scoped
   to a page — if a rule needs scoping, it belongs to that page.

   Every value below is read off css/tokens.css, which is the only
   stylesheet all surfaces share — including the radius scale, which
   moved there for exactly this reason.

   ── The three tiers ─────────────────────────────────────────
   The reference mock uses one accent per screen and gets there by
   ranking buttons rather than by colouring them all:

     .btn-secondary   outline      the row action — most buttons
     .btn-primary     ink fill     the section action
     .btn-accent      orange fill  ONE per screen, the page's action

   Reach for -secondary first. -accent is a budget, not a style: if
   two on a screen want it, neither is the page's primary action.
   ============================================================ */

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-accent,
.btn-ghost,
.btn-danger,
.btn-danger-outline,
.btn-success,
.btn-white,
.btn-outline-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  /* A transparent border on the filled variants so a solid and an
     outline button of the same label are the same size — otherwise
     they jump 3px when a state changes. */
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .12s;
}

/* The app is used one-handed on a sideline. 44px is the floor on a
   finger; on a mouse the mock's tighter box is right, and forcing
   44px there is what made every compact row action look inflated. */
@media (pointer: coarse) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-accent,
  .btn-ghost,
  .btn-danger { min-height: 44px; }
}

/* Variant classes are listed alongside .btn on the base rule above
   because the codebase writes both forms — class="btn btn-primary"
   in the app, class="btn-primary" alone across the marketing pages.
   Requiring the base class would mean editing ~180 call sites to
   prove a convention; accepting both costs one selector list. */
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-outline:active:not(:disabled),
.btn-accent:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-accent:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── SECONDARY / OUTLINE — the default ───────────────────────
   Two names for one button. home.html used the first, every other
   marketing page used the second, and only one of them was ever
   defined; keeping both aliased is cheaper than renaming 237 call
   sites to prove a point.

   Written in --text/--bg rather than in ink, so a button dropped
   inside .band--dark inverts on its own: that scope redefines both
   tokens, which is the whole point of having them. The band used to
   need its own !important override to make this button visible. */
.btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  background: var(--text);
  color: var(--bg);
}

/* ── PRIMARY — ink ───────────────────────────────────────────
   Was orange. Orange on every page's primary meant the accent was
   spent before any screen chose how to spend it — 141 call sites,
   one per header, so no screen could rank its own actions. Ink is
   the mock's .btn-dark. */
.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover:not(:disabled) {
  opacity: 0.86;
  transform: translateY(-1px);
}

/* ── ACCENT — orange, one per screen ─────────────────────────
   White on #F46027 measures 3.21:1. AA wants 4.5:1 for text this
   size and 3:1 only for large text (18.66px bold / 24px regular) or
   for non-text marks, so this label fails AA. That is a deliberate,
   knowing call — the reference mock specifies `.btn-accent{color:
   #fff}` and it was ruled in over the ink alternative. Do NOT
   "fix" it to var(--on-orange) without raising it first.

   Two things narrow the blast radius. The rest of the product still
   pairs ink with orange, so this is the button exception rather than
   a palette change. And .btn-accent is reserved for money and AI
   actions — donate, Vision Auto-Tag, AI reel — so it appears once
   or twice per screen, not on every primary.

   15px/700 rather than 14px/600 because a heavier label at 3.21:1
   is measurably easier to read even though it does not reach the
   large-text threshold; the hover state at #E04D18 is 4.00:1. */
.btn-accent {
  background: var(--orange);
  color: #FFFFFF;
  border-color: var(--orange);
  font-size: 15px;
  font-weight: 700;
}
.btn-accent:hover:not(:disabled) {
  background: var(--orange-press);
  border-color: var(--orange-press);
  transform: translateY(-1px);
}

/* ── GHOST — a link that sits in a button row ────────────────── */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { color: var(--accent-text); }

/* ── DANGER ──────────────────────────────────────────────────
   Outline rather than filled: a destructive action should be legible
   and deliberate, not the loudest thing on the screen. */
.btn-danger {
  background: transparent;
  color: var(--error-text);
  border-color: var(--error-text);
}
.btn-danger:hover:not(:disabled) {
  background: var(--error-text);
  color: var(--bg);
}
.btn-danger-outline { /* legacy alias */
  background: transparent;
  color: var(--error-text);
  border-color: var(--error-text);
}

.btn-success {
  background: var(--success-text, #15803D);
  color: var(--bg);
  border-color: var(--success-text, #15803D);
}

/* ── On ink ──────────────────────────────────────────────────
   .band--dark redefines --text and --bg, so every variant above
   already inverts inside it with no rule here. These two are for
   the dark surfaces that are NOT that scope — the app's record
   band and the reel chrome paint ink directly without flipping
   tokens, so a button dropped in there needs to say so. */
.btn-white {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}
.btn-white:hover:not(:disabled) {
  background: #E8E8E8;
  border-color: #E8E8E8;
}
.btn-outline-w {
  background: transparent;
  color: var(--on-ink);
  border-color: rgba(255,255,255,0.7);
}
.btn-outline-w:hover:not(:disabled) {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}

/* ── Sizes ───────────────────────────────────────────────────
   btn-sm is the row action and by far the most used size — 210 call
   sites against 141 for the default. */
.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  gap: 5px;
}
.btn-sm.btn-accent { font-size: 13px; }
.btn-xs {
  padding: 5px 11px;
  font-size: 12px;
  gap: 4px;
}
/* 44px on a finger even for the compact sizes — the row actions are
   exactly what gets tapped most on a sideline. The padding stays
   tight; the box grows around it. */
@media (pointer: coarse) {
  .btn-sm,
  .btn-xs { min-height: 44px; }
}

.btn-block {
  width: 100%;
}

/* Marketing hero and closing CTAs. The mock sets its site buttons a
   step larger than its app buttons (15px against 14px); rather than
   fork the base again, that step is a size. */
.btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  gap: 8px;
}

/* Icons inside a button track the label rather than the viewport. */
.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}