/* ─────────────────────────────────────────────────────────────────────────
   BUTTON — variants and sizes.

   Six visual treatments, not one class per verb. Cancel, Reset, Back and
   Close are all the same button wearing different labels; giving each its
   own class is how a codebase ends up with 125 chips. The treatment says how
   loud the action is and whether it destroys something — the label says what
   it does.

     .btn                  primary / confirm      accent fill
     .btn--secondary       cancel, reset, back    outlined, neutral
     .btn--quiet           tertiary, in-row       borderless
     .btn--caution         reversible-but-costly  amber fill
     .btn--danger          delete, destroy        solid red
     .btn--danger-quiet    remove, in-row         red text, no fill

   Sizes: .btn--sm, .btn--xs. States: .btn--published, .btn--draft.

   .btn-danger used to be defined THREE times, differently: solid red in
   iris_console.css, red *text* in detail.css, and overdue-red text in
   journey.css. Two of those load on the same page, so which one you got
   depended on link order. It is one definition now.

   .btn itself deliberately stays in base.css (tokenised in place, so it
   still re-accents per app). It is refined by rules in @layer base —
   .export-btn, .btn-sm, the person_create form sizing — and a
   components-layer redefinition would silently outrank every one of them.
   The family moves up together when those call sites are re-pointed with a
   visual pass. The legacy names below are aliased rather than moved for the
   same reason, except .btn-ghost and .btn-primary, which nothing refines.

   specs/design-system.md §3.4.
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  /* ── Primary ───────────────────────────────────────────────────────
     The default. `.btn--primary` exists so a form footer can mark its one
     confirming action explicitly when it sits among secondaries. */
  .btn--primary,
  .btn-primary {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
  }

  .btn--primary:hover,
  .btn-primary:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-fg);
  }

  /* ── Secondary ─────────────────────────────────────────────────────
     Cancel, Reset, Back — a real button, just not the one we want pressed.
     .btn-secondary was used in outreach/actions_list.html and defined
     nowhere, so those two buttons rendered unstyled.

     .btn-ghost is the legacy alias, kept so ~160 existing call sites keep
     working. It maps here rather than onto --quiet because the class it
     replaces was bordered (`border-color: var(--border)` in the old
     base.css); pointing it at the borderless treatment turned Cancel-style
     buttons on panelled screens — the import preview's Start Over and Edit
     Mapping among them — into muted text with no button affordance at all.
     Most of its call sites are Cancel, which is what this treatment is for.
     New markup should use .btn--secondary, or .btn--quiet where an in-row
     action genuinely wants no border. */
  .btn--secondary,
  .btn-secondary,
  .btn-ghost {
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-fg);
  }

  .btn--secondary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--color-text-faint);
    color: var(--btn-secondary-fg);
  }

  /* ── Quiet ─────────────────────────────────────────────────────────
     Borderless tertiary. The workhorse for in-row and toolbar actions,
     where one bordered button per row would be visual noise. */
  .btn--quiet {
    background: var(--btn-quiet-bg);
    border-color: var(--btn-quiet-border);
    color: var(--btn-quiet-fg);
  }

  .btn--quiet:hover {
    background: var(--btn-quiet-hover);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  /* ── Caution ───────────────────────────────────────────────────────
     Consequential but recoverable: Reset pipeline, Re-run, Discard draft.
     Distinct from danger, which is for things that do not come back. */
  .btn--caution {
    background: var(--btn-caution-bg);
    border-color: var(--btn-caution-bg);
    color: var(--btn-caution-fg);
  }

  .btn--caution:hover {
    background: var(--btn-caution-hover);
    border-color: var(--btn-caution-hover);
    color: var(--btn-caution-fg);
  }

  /* ── Danger ────────────────────────────────────────────────────────── */
  .btn--danger,
  .btn-danger,
  .btn-delete {
    background: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-fg);
  }

  .btn--danger:hover,
  .btn-danger:hover,
  .btn-delete:hover {
    background: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--btn-danger-fg);
  }

  /* Quiet destructive — a "remove" inside a row, where solid red would
     shout. Keeps a border so it still reads as a button at rest; the fill
     only arrives on hover. */
  .btn--danger-quiet,
  .btn-ghost.btn-danger {
    background: var(--btn-secondary-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
  }

  .btn--danger-quiet:hover,
  .btn-ghost.btn-danger:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger-strong);
  }

  /* ── Sizes ─────────────────────────────────────────────────────────
     The legacy .btn-sm / .btn-xs keep their base-layer definitions; the
     person_create form sizing refines .btn.btn-sm from there and a
     components-layer padding shorthand would outrank it. */
  .btn--sm {
    padding: var(--space-1) var(--space-2);
  }

  .btn--xs {
    padding: 1px var(--space-1);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
  }

  /* ── Publish state (journey editor) ────────────────────────────────── */
  .btn--published {
    background: var(--color-success-bg);
    border-color: transparent;
    color: var(--color-success);
  }

  .btn--draft {
    background: var(--color-border-light);
    border-color: transparent;
    color: var(--color-text-muted);
  }

  /* Disabled beats every variant above — a disabled destructive button must
     not still read as destructive. */
  .btn:disabled,
  .btn[aria-disabled="true"] {
    background: var(--color-border-light);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
  }
}