/*
  The shared button weights (task 185, ADR-0103): primary, secondary, destructive, ghost. Global
  rather than a scoped .razor.css because the whole point is one definition every component reaches
  for instead of hand-rolling its own — a scoped copy per component would be the exact defect this
  file fixes, just moved. Everything here reads its values from theme.css (ADR-0027); no literal
  colour or spacing value belongs here.

  .btn-primary lives in forms.css instead of here: `.auth-form button` already is the primary
  weight, unchanged since before this file existed, and PlaceFormPanel (owned by a concurrent PR,
  task 181) depends on that selector too. Extending its own selector list costs nothing and touches
  no markup; duplicating its declarations here instead would be the two-systems defect this ticket
  is about, just for one weight instead of three. See forms.css's own comment beside that rule.

  Each weight below is a complete, self-contained class — not a base `.btn` plus a modifier — so a
  button either states its weight or the omission is obvious in the markup; there is no "just .btn"
  to forget a weight from. Font-size is deliberately not set here: every one of these buttons already
  sits inside a container that sets its own (`.auth-form`'s body size, or `.member-actions`,
  `.invitation-actions` and the confirmation rows' own `font-size: var(--font-size-small)`), and
  `font: inherit` picks that up rather than a fourth place declaring it.
*/

.btn-secondary,
.btn-destructive {
	font: inherit;
	border-radius: var(--radius);
	padding: var(--space-small) var(--space-medium);
	cursor: pointer;
}

.btn-secondary:disabled,
.btn-destructive:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
  Task 184's own account-sign-out shape, generalised: no fill, muted text, a visible boundary
  (--colour-control-border, not --colour-border — ADR-0087, this is a standalone control's own edge)
  because these buttons sit in a row of peers rather than inline in prose, so a fill-free, border-free
  ghost would not read as a control at all. account-sign-out's own class now just applies this one.
*/
.btn-secondary {
	color: var(--colour-text-muted);
	background: none;
	border: 1px solid var(--colour-control-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	color: var(--colour-text);
	background-color: var(--colour-surface-hover);
}

/*
  --colour-danger, not a second convention (the ticket's own explicit instruction) — the same token
  .member-confirm, .invitation-confirm and .place-detail-delete already colour their own prompt text
  with. Same boundary and hover shape as .btn-secondary, so destructive reads as "the same kind of
  control, a different weight" rather than a visually unrelated one.
*/
.btn-destructive {
	color: var(--colour-danger);
	background: none;
	border: 1px solid var(--colour-danger);
}

.btn-destructive:hover,
.btn-destructive:focus-visible {
	background-color: var(--colour-surface-hover);
}

/*
  A fourth weight, added in review of this ticket rather than at its first draft: PlaceDetailPanel's
  own Edit/Delete/Move and GroupFormPanel's own Manage members/Delete were left as "deliberate
  exceptions" the first time round, exempt from the guard by name rather than declaring a weight —
  which review found was the ticket's own defect happening again, one level up: the same control
  family, split across an old, unnamed system and this one. Redesigning them into a boxed
  .btn-secondary/.btn-destructive shape is a visual change nobody working this repository can verify
  without a browser (task 156), so this weight is named to fit the shape those five buttons already
  had — an inline text trigger, not a boxed control — rather than the shape changing to fit a name.
  Only colour tells the two variants apart, the same accent/danger split every other weight already
  uses. Each component's own .razor.css keeps only the margin that varies by the trigger's position;
  every other property these five buttons already had lives here now, once, matching every other
  weight in this file.
*/
.btn-ghost,
.btn-ghost-destructive {
	display: block;
	font: inherit;
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small) 0;
	cursor: pointer;
}

.btn-ghost:hover,
.btn-ghost:focus-visible,
.btn-ghost-destructive:hover,
.btn-ghost-destructive:focus-visible {
	text-decoration: underline;
}

.btn-ghost {
	color: var(--colour-accent);
}

.btn-ghost-destructive {
	color: var(--colour-danger);
}