/* ============================================================================
 * CJ Workflow — global button color convention (standing rule, see CONTRIBUTING.md)
 * ============================================================================
 * Every actionable button gets exactly ONE of these three classes, chosen by
 * what the button DOES — never by how prominent it should look:
 *
 *   .btn-positive  GREEN  affirmative / forward-moving actions
 *                         (Assign, Confirm, Approve, Save, Complete, Create, Send, Reopen)
 *   .btn-negative  RED    destructive / ending actions
 *                         (Archive, Delete, Remove, Reject, Deactivate)
 *   .btn-neutral   BLUE   navigation / neutral actions
 *                         (View, Edit, Filter, Cancel, Search, Refresh, Back)
 *
 * Each has an "-outline" variant (colored border + text, no fill) for a
 * lower-emphasis button of the same meaning — e.g. a small "Remove" row
 * action versus a page's one solid, prominent "Delete" button. Solid vs.
 * outline is a VISUAL WEIGHT choice (how prominent); positive/negative/
 * neutral is a MEANING choice (what happens) — the two are independent,
 * always pick one of each rather than treating outline as a separate color.
 *
 * Combine with .linklike (each page defines its own underlined-text-link
 * base rule) for a text-only link colored by intent, e.g.
 * class="linklike btn-positive" for "+ Add question".
 *
 * Requires --good, --bad, --series-1 custom properties on the page's
 * .viz-root (see any page's <style> block for the light/dark values).
 * --good and --series-1 already exist on every page; --bad is the one new
 * token this convention adds — add it alongside the others if a page is
 * missing it.
 * ========================================================================= */

button.btn-positive { background: var(--good); border-color: var(--good); color: #fff; }
button.btn-negative { background: var(--bad); border-color: var(--bad); color: #fff; }
button.btn-neutral  { background: var(--series-1); border-color: var(--series-1); color: #fff; }

button.btn-positive-outline { background: transparent; border-color: var(--good); color: var(--good); }
button.btn-negative-outline { background: transparent; border-color: var(--bad); color: var(--bad); }
button.btn-neutral-outline  { background: transparent; border-color: var(--series-1); color: var(--series-1); }

/* Higher specificity than a plain .linklike rule, so this always wins regardless of the
   order the two rules appear in a given page's stylesheet. */
button.linklike.btn-positive { color: var(--good); }
button.linklike.btn-negative { color: var(--bad); }
button.linklike.btn-neutral  { color: var(--series-1); }

button.btn-positive[disabled], button.btn-positive-outline[disabled], button.linklike.btn-positive[disabled],
button.btn-negative[disabled], button.btn-negative-outline[disabled], button.linklike.btn-negative[disabled],
button.btn-neutral[disabled],  button.btn-neutral-outline[disabled],  button.linklike.btn-neutral[disabled] {
  opacity: 0.6; cursor: not-allowed;
}