/**
 * @file
 * Button component for TDSpares D10 theme.
 *
 * Replaces the starterkit boilerplate (which had only margin rules).
 *
 * Variants:
 *   .button                 — base (unstyled reset, ready for a modifier)
 *   .button--primary        — accent blue (#00BDFF) — primary CTA (matches live)
 *   .button--primary-dark   — dark blue (#256591) — secondary primary actions
 *   .button--secondary      — outlined variant; accent border+text, transparent bg
 *   .button--success        — green (#79ad3d) — used on live site for some cart CTAs
 *   .button--danger         — red (#ed1c24) — destructive / clearance actions
 *   .button--large          — larger padding+font for prominent Add to Cart CTAs
 *   .button--small          — compact variant for inline actions
 *
 * All Drupal <input type="submit"> and <button> elements are also reset here
 * so they inherit these styles when .button is applied.
 *
 * Colour values match the live tdspareszen theme exactly.
 */

/* ==========================================================================
   Browser reset for all button/submit elements
   ========================================================================== */

button:not(.button),
input[type="submit"]:not(.button),
input[type="button"]:not(.button),
input[type="reset"]:not(.button) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
}


/* ==========================================================================
   Base button
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--td-space-xs);

  /* Typography */
  font-family: var(--td-font-body);
  font-size: var(--td-font-size-base);
  font-weight: var(--td-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  /* Colour */
  background-color: var(--td-color-primary-mid);
  border-color: var(--td-color-accent-dark);
  color: var(--td-color-white);

  /* Spacing */
  padding: 0.4em 0.9em;

  /* Shape */
  border-radius: var(--td-radius-sm);
  border: 1px solid var(--td-color-accent-dark);

  /* Behaviour */
  cursor: pointer;
  transition: background-color var(--td-transition-duration) var(--td-transition-easing),
              border-color var(--td-transition-duration) var(--td-transition-easing),
              color var(--td-transition-duration) var(--td-transition-easing),
              opacity var(--td-transition-duration) var(--td-transition-easing);

  /* Accessibility */
  position: relative;
  user-select: none;
}

.button:hover,
.button:focus {
  background-color: var(--td-color-accent-dark);
  border-color: var(--td-color-accent-dark);
  color: var(--td-color-white);
  text-decoration: none;
}

.button:focus-visible {
  outline: 2px solid var(--td-color-primary-light);
  outline-offset: 2px;
}

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


/* ==========================================================================
   Secondary — outlined variant
   ========================================================================== */

.button--secondary {
  background-color: transparent;
  border-color: var(--td-color-accent-mid);    /* #00BDFF border */
  color: var(--td-color-primary);          /* #256591 text */
}

.button--secondary:hover,
.button--secondary:focus {
  background-color: var(--td-color-accent);
  border-color: var(--td-color-accent);
  color: var(--td-color-white);
  text-decoration: none;
}


/* ==========================================================================
   Success / green — matches live #79ad3d used for some add-to-cart variants
   ========================================================================== */

.button--success {
  background-color: var(--td-color-success);        /* #79ad3d */
  border-color: var(--td-color-success-light);      /* #86c142 */
  color: var(--td-color-white);
}

.button--success:hover,
.button--success:focus {
  background-color: #6a9a33;   /* ~10% darker than #79ad3d */
  border-color: #6a9a33;
  color: var(--td-color-white);
  text-decoration: none;
}


/* ==========================================================================
   Danger / red — matches live #ed1c24 (clearance, destructive)
   ========================================================================== */

.button--danger {
  background-color: var(--td-color-sale);      /* #ed1c24 */
  border-color: var(--td-color-orange-border); /* #ec6800 — live border */
  color: var(--td-color-white);
}

.button--danger:hover,
.button--danger:focus {
  background-color: #c8161e;   /* ~10% darker than #ed1c24 */
  border-color: #c8161e;
  color: var(--td-color-white);
  text-decoration: none;
}


/* ==========================================================================
   Size modifiers
   ========================================================================== */

/* Large — Add to Cart, checkout submit */
.button--large {
  font-size: var(--td-font-size-lg);  /* 1.125rem / 18px */
  padding: 0.6em 1.4em;
}

/* Small — inline secondary actions */
.button--small {
  font-size: var(--td-font-size-sm);  /* 0.875rem / 14px */
  padding: 0.25em 0.6em;
}


/* ==========================================================================
   Drupal form submit mapping
   Drupal's core form submit buttons get .button added via preprocess.
   These rules ensure unstyled input[type=submit] still look reasonable
   before .button class variants are applied.
   ========================================================================== */