/* ==========================================================
   TMS Button Foundation V1
   Canonical product action contract
   ========================================================== */

.tms-btn {
  --tms-btn-height: 46px;
  --tms-btn-padding-x: 18px;
  --tms-btn-radius: 10px;

  min-height: var(--tms-btn-height);
  padding: 0 var(--tms-btn-padding-x);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid transparent;
  border-radius: var(--tms-btn-radius);

  appearance: none;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  user-select: none;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.tms-btn:hover {
  transform: translateY(-1px);
}

.tms-btn:focus-visible {
  outline: 3px solid rgba(168, 121, 22, .28);
  outline-offset: 2px;
}

.tms-btn:disabled,
.tms-btn[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ----------------------------------------------------------
   Primary
   ---------------------------------------------------------- */

.tms-btn-primary {
  background: #a87916;
  border-color: #a87916;
  color: #fff;
}

.tms-btn-primary:hover {
  background: #8f6612;
  border-color: #8f6612;
}

/* ----------------------------------------------------------
   Secondary
   ---------------------------------------------------------- */

.tms-btn-secondary {
  background: #fff;
  border-color: #cfc5b0;
  color: #5c481a;
}

.tms-btn-secondary:hover {
  background: #fffaf0;
  border-color: #b89a58;
}

/* ----------------------------------------------------------
   Quiet
   ---------------------------------------------------------- */

.tms-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: #675a40;
}

.tms-btn-quiet:hover {
  background: #f7f4ed;
  border-color: #e5dfd2;
}

/* ----------------------------------------------------------
   Destructive
   ---------------------------------------------------------- */

.tms-btn-destructive {
  background: #fff;
  border-color: #d9a5a5;
  color: #9d2929;
}

.tms-btn-destructive:hover {
  background: #fff5f5;
  border-color: #bf6868;
}

/* ----------------------------------------------------------
   Sizes
   ---------------------------------------------------------- */

.tms-btn-compact {
  --tms-btn-height: 38px;
  --tms-btn-padding-x: 13px;
  font-size: .9rem;
}

/* ----------------------------------------------------------
   Optional icons
   ---------------------------------------------------------- */

.tms-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.tms-btn-icon .tms-icon,
.tms-btn > .tms-icon {
  width: 20px;
  height: 20px;
}

.tms-btn-icon--end {
  order: 2;
}

/*
 * Icon-only controls are intentionally explicit.
 * Normal product actions should keep their text label.
 */
.tms-btn-icon-only {
  width: var(--tms-btn-height);
  padding: 0;
}

/* ----------------------------------------------------------
   Loading-ready state
   ---------------------------------------------------------- */

.tms-btn[aria-busy="true"] {
  cursor: progress;
}

.tms-btn[aria-busy="true"] > * {
  pointer-events: none;
}

/* ==========================================================
   TMS Button Semantic Registry V1

   Action answers:
     What does this control do?

   Variant answers:
     How prominent is it here?

   Color answers:
     Which semantic/world/custom color does it use?

   Action and visual representation deliberately remain
   independent. Consumers may omit icons without changing the
   action contract.
   ========================================================== */

.tms-btn {
  --tms-btn-bg: transparent;
  --tms-btn-bg-hover: var(--tms-btn-bg);
  --tms-btn-fg: inherit;
  --tms-btn-border: transparent;
  --tms-btn-border-hover: var(--tms-btn-border);
}

/* ----------------------------------------------------------
   Variant: Ghost
   ---------------------------------------------------------- */

.tms-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #675a40;
}

.tms-btn-ghost:hover {
  background: #f7f4ed;
  border-color: #e5dfd2;
}

/* ----------------------------------------------------------
   Custom color contract

   Example:
   style="
     --tms-btn-custom-bg:#345678;
     --tms-btn-custom-fg:#ffffff;
     --tms-btn-custom-hover:#29465f;
   "

   Foreground is explicit in V1. We do not guess accessibility
   contrast from arbitrary tenant colors.
   ---------------------------------------------------------- */

.tms-btn-custom {
  background: var(--tms-btn-custom-bg);
  border-color: var(--tms-btn-custom-bg);
  color: var(--tms-btn-custom-fg, #fff);
}

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

/* ----------------------------------------------------------
   Semantic actions
   ---------------------------------------------------------- */

/* Save = affirmative persisted change */
.tms-btn[data-tms-action="save"] {
  background: #238636;
  border-color: #238636;
  color: #fff;
}

.tms-btn[data-tms-action="save"]:hover {
  background: #1d722f;
  border-color: #1d722f;
}

/* Create = new product/domain object; world color by default */
.tms-btn[data-tms-action="create"] {
  background: #a87916;
  border-color: #a87916;
  color: #fff;
}

.tms-btn[data-tms-action="create"]:hover {
  background: #8f6612;
  border-color: #8f6612;
}

/* Edit = non-destructive secondary action */
.tms-btn[data-tms-action="edit"] {
  background: #fff;
  border-color: #cfc5b0;
  color: #5c481a;
}

.tms-btn[data-tms-action="edit"]:hover {
  background: #fffaf0;
  border-color: #b89a58;
}

/* Delete = destructive persisted change */
.tms-btn[data-tms-action="delete"] {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}

.tms-btn[data-tms-action="delete"]:hover {
  background: #961d14;
  border-color: #961d14;
}

/* Cancel = leave current action without applying it */
.tms-btn[data-tms-action="cancel"] {
  background: transparent;
  border-color: #d8d2c5;
  color: #675a40;
}

.tms-btn[data-tms-action="cancel"]:hover {
  background: #f7f4ed;
  border-color: #c8bfad;
}

/* Back = navigation, not cancellation */
.tms-btn[data-tms-action="back"] {
  background: transparent;
  border-color: transparent;
  color: #675a40;
}

.tms-btn[data-tms-action="back"]:hover {
  background: #f7f4ed;
  border-color: #e5dfd2;
}

/* Continue = forward journey action */
.tms-btn[data-tms-action="continue"] {
  background: #a87916;
  border-color: #a87916;
  color: #fff;
}

.tms-btn[data-tms-action="continue"]:hover {
  background: #8f6612;
  border-color: #8f6612;
}

/* ----------------------------------------------------------
   Inverse context

   Used on imagery / dark or saturated surfaces.
   Action semantics remain unchanged.
   ---------------------------------------------------------- */

.tms-btn-inverse.tms-btn-primary,
.tms-btn-inverse[data-tms-action="create"],
.tms-btn-inverse[data-tms-action="continue"] {
  background: #fff;
  border-color: #fff;
  color: #5c481a;
}

.tms-btn-inverse.tms-btn-primary:hover,
.tms-btn-inverse[data-tms-action="create"]:hover,
.tms-btn-inverse[data-tms-action="continue"]:hover {
  background: #fffaf0;
  border-color: #fffaf0;
}

.tms-btn-inverse.tms-btn-secondary,
.tms-btn-inverse.tms-btn-ghost,
.tms-btn-inverse[data-tms-action="back"],
.tms-btn-inverse[data-tms-action="cancel"] {
  background: transparent;
  border-color: rgba(255,255,255,.72);
  color: #fff;
}

.tms-btn-inverse.tms-btn-secondary:hover,
.tms-btn-inverse.tms-btn-ghost:hover,
.tms-btn-inverse[data-tms-action="back"]:hover,
.tms-btn-inverse[data-tms-action="cancel"]:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}