/*
  Shopify-like button system with backward compatibility.
  New classes:
    .button .button--primary .button--secondary .button--tertiary
    .button--small .button--medium .button--large .button--full-width
  Compatible with:
    .fluid-btn / .fluid-btn--*
    .btn / .btn-bg-* / .btn-link / .btn-sm|md|lg
*/

.button,
.fluid-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-height: 2.75rem;
  padding: var(--btn-vertical-space, 10px) var(--btn-horizontal-space, 16px);
  border: 1px solid transparent;
  border-radius: var(--buttons-radius, var(--btn-rounded, 8px));
  font-family: var(--font-body-family, var(--ff-body));
  font-size: var(--btn-text, 14px);
  font-weight: 600;
  /* line-height: 1; */
  text-align: center;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--duration-default, 250ms) ease, color var(--duration-default, 250ms) ease, border-color var(--duration-default, 250ms) ease, box-shadow var(--duration-default, 250ms) ease, opacity var(--duration-default, 250ms) ease;
}

.button:focus-visible,
.fluid-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-link, var(--clr-primary));
  outline-offset: 2px;
}

.button:disabled,
.button[aria-disabled="true"],
.fluid-btn:disabled,
.fluid-btn--disabled,
.btn:disabled,
.btn.btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.button__icon svg,
.fluid-btn__icon svg,
.btn svg {
  width: var(--btn-icon-size, 14px);
  height: var(--btn-icon-size, 14px);
}

.button__text,
.fluid-btn__text {
  line-height: 1;
}

/* Primary */
.button--primary,
.fluid-btn--primary,
.btn.btn-bg-primary,
button.btn-bg-primary {
  background-color: var(--color-button, var(--clr-primary));
  border-color: var(--color-button, var(--clr-primary));
  color: var(--color-button-text, var(--clr-white));
}

.button--primary:hover,
.fluid-btn--primary:hover,
.btn.btn-bg-primary:hover,
button.btn-bg-primary:hover {
  filter: brightness(0.95);
}

/* Secondary */
.button--secondary,
.fluid-btn--secondary,
.btn.btn-bg-secondary,
button.btn-bg-secondary {
  background-color: var(--color-button-secondary, var(--clr-secondary));
  border-color: var(--color-button-secondary, var(--clr-secondary));
  color: var(--color-button-secondary-text, var(--clr-black));
}

.button--secondary:hover,
.fluid-btn--secondary:hover,
.btn.btn-bg-secondary:hover,
button.btn-bg-secondary:hover {
  filter: brightness(0.97);
}

/* Outline */
.button--outline,
.fluid-btn--outline,
.btn.btn-outline {
  background-color: transparent;
  border-color: var(--color-button, var(--clr-primary));
  color: var(--color-button, var(--clr-primary));
}

.button--outline:hover,
.fluid-btn--outline:hover,
.btn.btn-outline:hover {
  background-color: var(--color-button, var(--clr-primary));
  color: var(--color-button-text, var(--clr-white));
}

/* Tertiary / Link */
.button--tertiary,
.button--link,
.fluid-btn--link,
.btn.btn-link,
button.btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-link, var(--clr-primary));
  min-height: auto;
  padding: 0;
}

.button--tertiary:hover,
.button--link:hover,
.fluid-btn--link:hover,
.btn.btn-link:hover,
button.btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Legacy link color aliases */
.btn.btn-link-black,
.button--link-black {
  color: var(--clr-black);
}

.btn.btn-link-white,
.button--link-white {
  color: var(--clr-white);
}

.btn.btn-link-primary,
.button--link-primary {
  color: var(--clr-primary);
}

.btn.btn-link-secondary,
.button--link-secondary {
  color: var(--btn-secondary-bg, var(--clr-secondary));
}

/* White variations kept for compatibility */
.fluid-btn--white-primary {
  background-color: var(--clr-white);
  border-color: var(--clr-white);
  color: var(--clr-black);
}

.fluid-btn--white-outline {
  background-color: transparent;
  border-color: var(--clr-white);
  color: var(--clr-white);
}

.fluid-btn--white-outline:hover {
  background-color: var(--clr-white);
  color: var(--clr-black);
}

/* Sizes */
.button--small,
.fluid-btn--sm,
.btn.btn-sm,
button.btn-sm {
  min-height: 2.25rem;
  padding: var(--btn-vertical-space-sm, 8px) var(--btn-horizontal-space-sm, 12px);
  font-size: var(--btn-text-sm, 12px);
  border-radius: var(--btn-rounded-sm, 6px);
}

.button--medium,
.fluid-btn--md,
.btn.btn-md,
button.btn-md {
  min-height: 2.75rem;
  padding: var(--btn-vertical-space-md, 14px) var(--btn-horizontal-space-md, 28px);
  font-size: var(--btn-text-md, 16px);
  border-radius: var(--btn-rounded-md, 8px);
}

.button--large,
.fluid-btn--lg,
.btn.btn-lg,
button.btn-lg {
  min-height: 3.25rem;
  padding: var(--btn-vertical-space-lg, 18px) var(--btn-horizontal-space-lg, 36px);
  font-size: var(--btn-text-lg, 20px);
  border-radius: var(--btn-rounded-lg, 8px);
}

.button--full-width {
  width: 100%;
}

/* Legacy semantic aliases used in older sections */
.btn-primary {
  background-color: var(--color-button, var(--clr-primary));
  border-color: var(--color-button, var(--clr-primary));
  color: var(--color-button-text, var(--clr-white));
}

.btn-secondary {
  background-color: var(--color-button-secondary, var(--clr-secondary));
  border-color: var(--color-button-secondary, var(--clr-secondary));
  color: var(--color-button-secondary-text, var(--clr-black));
}

.btn-white {
  background-color: var(--clr-white);
  border-color: var(--clr-white);
  color: var(--clr-black);
}

.btn-outline.btn-primary {
  background-color: transparent;
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.btn-outline.btn-secondary {
  background-color: transparent;
  border-color: var(--btn-secondary-bg, var(--clr-secondary));
  color: var(--btn-secondary-bg, var(--clr-secondary));
}

.btn-outline.btn-white {
  background-color: transparent;
  border-color: var(--clr-white);
  color: var(--clr-white);
}