/* 06-components/button — mono, uppercase. Primary=brand fill, value=gold, ghost=hairline. */
.c-btn {
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.c-btn--primary {
  background: var(--brand);
  color: var(--on-accent);
  border-color: var(--brand);
}
.c-btn--primary:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 50%, transparent); }

.c-btn--value {
  color: var(--value);
  border-color: var(--value);
}
.c-btn--value:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--value) 40%, transparent); }

.c-btn--ghost:hover { border-color: var(--link); color: var(--link); }

/* Danger — destructive actions only (row deletes, the access-request deny). Red
   token, hairline at rest so it never shouts across a dense table, filling in only
   on hover; the word carries the meaning so it survives without the colour. */
.c-btn--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--rule));
}
.c-btn--danger:hover {
  border-color: var(--danger);
  box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Small — the tighter control a dense ledger row wants for its inline actions. */
.c-btn--sm { padding: 0.25rem 0.6rem; font-size: var(--text-xs); }