/* Sugarbot UI kit: buttons (decisions B1-B6). Needs tokens.css. Contrast for every fill/ink pair is
   asserted by ui/check-contrast.mjs. */

.sb-button {
  font-family: var(--sb-font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--sb-radius-button);
  background: var(--sb-color-plumb);
  color: var(--sb-color-sweet-tooth);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none; /* an <a class="sb-button"> is a button, not a link */
  white-space: nowrap;
  transition: background var(--sb-duration) var(--sb-ease);
}
.sb-button:hover { background: var(--sb-plumb-deep); }

/* One accent per screen. Hover lightens: darkening Molasses fails contrast with either ink. */
.sb-button--accent { background: var(--sb-color-molasses); color: var(--sb-color-plumb); }
.sb-button--accent:hover { background: var(--sb-molasses-light); }

.sb-button--secondary {
  background: var(--sb-surface);
  color: var(--sb-color-plumb);
  border: 1px solid var(--sb-control-border);
  font-family: var(--sb-font-body);
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  height: 36px;
  padding: 0 14px;
}
.sb-button--secondary:hover { background: var(--sb-color-sweet-tooth); }

/* Display-type outline, for the quiet half of a Yes/No pair. Same geometry as the primary, so the
   emphasised action is set apart by fill, not size. */
.sb-button--ghost {
  background: transparent;
  color: var(--sb-color-plumb);
  border: 1px solid var(--sb-control-border);
}
.sb-button--ghost:hover { background: var(--sb-wash); }

/* Only for actions that cannot be undone. White ink is a deliberate exception to Plum ink on fills
   (tokens.json semantic.destructive). Hover darkens toward Plum, which raises white-ink contrast. */
.sb-button--destructive { background: var(--sb-destructive); color: var(--sb-destructive-ink); }
.sb-button--destructive:hover { background: color-mix(in oklab, var(--sb-destructive) 85%, var(--sb-color-plumb)); }

/* The screen's primary call to action. */
.sb-button--large { height: 58px; min-width: 236px; padding: 0 32px; font-size: 24px; }

/* Dense toolbars. Pairs with any variant; secondary keeps its body type. */
.sb-button--small { height: 32px; padding: 0 14px; font-size: 14px; gap: 6px; }
.sb-button--secondary.sb-button--small { height: 30px; padding: 0 11px; font-size: 13.5px; }

/* Secondary and ghost on a Plum ground (inside .sb-on-dark): Sweet Tooth ink and a
   light edge instead of white fill and Plum ink. */
.sb-on-dark .sb-button--secondary,
.sb-on-dark .sb-button--ghost {
  background: transparent;
  color: var(--sb-color-sweet-tooth);
  border-color: var(--sb-on-dark-control-border);
}
.sb-on-dark .sb-button--secondary:hover,
.sb-on-dark .sb-button--ghost:hover { background: var(--sb-on-dark-active); border-color: var(--sb-color-molasses); }
/* Disabled on Plum: dimmed ink and edge, no hover. Disabled controls are exempt from contrast minimums. */
.sb-on-dark .sb-button--secondary:disabled,
.sb-on-dark .sb-button--secondary:disabled:hover,
.sb-on-dark .sb-button--ghost:disabled,
.sb-on-dark .sb-button--ghost:disabled:hover {
  background: transparent;
  color: var(--sb-on-dark-dot-off);
  border-color: var(--sb-on-dark-rule);
  cursor: not-allowed;
}

/* Disabled keeps size and position; only the fill changes. */
.sb-button:disabled,
.sb-button:disabled:hover {
  background: var(--sb-disabled-fill);
  color: var(--sb-disabled-ink);
  border-color: transparent;
  cursor: not-allowed;
}
.sb-button--secondary:disabled,
.sb-button--secondary:disabled:hover {
  background: var(--sb-surface);
  color: var(--sb-muted);
  border-color: var(--sb-hairline);
}

/* Dismiss: a bare x. Give it an aria-label; the glyph is not a name. */
.sb-dismiss {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sb-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sb-dismiss:hover { background: var(--sb-wash); color: var(--sb-color-plumb); }

.sb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }