/*
 * LinkIt Canonical Button System
 * Architecture: docs/adr/0001-canonical-button-system.md
 *
 * Approved visual variants only:
 *   .gl-btn-primary  — brand purple
 *   .gl-btn-neutral  — light / neutral
 *   .gl-btn-accent   — brand yellow
 *   .gl-btn-danger   — destructive red
 */

:root {
  --button-radius: 999px;
  --button-font-weight: 600;
  --button-gap: .5rem;
  --button-transition: .24s cubic-bezier(.19,.86,.22,1);

  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;
  --button-padding-x-sm: .85rem;
  --button-padding-x-md: 1.15rem;
  --button-padding-x-lg: 1.65rem;

  --button-neutral-top: #fefeff;
  --button-neutral-mid: #f5f8fd;
  --button-neutral-bottom: #dee7f6;
  --button-neutral-text: #232d3c;

  --button-primary-bg: var(--primary-color, #8852c9);
  --button-primary-text: #fff;
  --button-accent-bg: var(--secondary-color, #fed254);
  --button-accent-text: #172033;
  --button-danger-bg: #e52f3d;
  --button-danger-text: #fff;

  --button-sheen: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.55) 48%, transparent 61%);
  --button-lip: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(35,45,60,.12);
  --button-lift: 0 10px 18px -11px rgba(35,45,60,.6), 0 2px 4px -2px rgba(35,45,60,.16);
  --button-lift-hover: 0 20px 30px -15px rgba(35,45,60,.6), 0 5px 9px -4px rgba(35,45,60,.2);
  --button-pressed: 0 1px 2px -1px rgba(35,45,60,.3), inset 0 2px 5px rgba(35,45,60,.2);
}

.gl-btn {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-height-md);
  padding: 0 var(--button-padding-x-md);
  border-radius: var(--button-radius);
  font: inherit;
  font-size: .95rem;
  font-weight: var(--button-font-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--button-transition),
    box-shadow var(--button-transition),
    background-position .85s cubic-bezier(.19,.86,.22,1),
    color .2s ease;
}

.gl-btn > i,
.gl-btn > svg {
  flex: 0 0 auto;
}

/* Neutral / light. */
.gl-btn-neutral {
  --button-focus-color: var(--primary-color, #8852c9);
  border: 0;
  background-color: var(--button-neutral-mid);
  background-image:
    var(--button-sheen),
    linear-gradient(180deg,
      var(--button-neutral-top) 0%,
      var(--button-neutral-mid) 46%,
      #e9effa 46.01%,
      var(--button-neutral-bottom) 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: -135% 0, 0 0;
  background-repeat: no-repeat;
  color: var(--button-neutral-text);
  box-shadow: var(--button-lift), var(--button-lip);
  filter: none;
}

/* Primary purple. */
.gl-btn-primary {
  --button-focus-color: var(--button-primary-bg);
  border: 0;
  background-color: var(--button-primary-bg);
  background-image:
    var(--button-sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--button-primary-bg) 35%, #fff) 0%,
      color-mix(in srgb, var(--button-primary-bg) 62%, #fff) 46%,
      var(--button-primary-bg) 46.01%,
      color-mix(in srgb, var(--button-primary-bg) 88%, #111) 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: -135% 0, 0 0;
  background-repeat: no-repeat;
  color: var(--button-primary-text);
  box-shadow: var(--button-lift), var(--button-lip);
  filter: none;
}

/* Accent yellow. */
.gl-btn-accent {
  --button-focus-color: var(--button-accent-bg);
  border: 0;
  background-color: var(--button-accent-bg);
  background-image:
    var(--button-sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--button-accent-bg) 35%, #fff) 0%,
      color-mix(in srgb, var(--button-accent-bg) 62%, #fff) 46%,
      var(--button-accent-bg) 46.01%,
      color-mix(in srgb, var(--button-accent-bg) 88%, #111) 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: -135% 0, 0 0;
  background-repeat: no-repeat;
  color: var(--button-accent-text);
  box-shadow: var(--button-lift), var(--button-lip);
  filter: none;
}

/* Danger / destructive red. */
.gl-btn-danger {
  --button-focus-color: var(--button-danger-bg);
  border: 0;
  background-color: var(--button-danger-bg);
  background-image:
    var(--button-sheen),
    linear-gradient(180deg,
      color-mix(in srgb, var(--button-danger-bg) 35%, #fff) 0%,
      color-mix(in srgb, var(--button-danger-bg) 62%, #fff) 46%,
      var(--button-danger-bg) 46.01%,
      color-mix(in srgb, var(--button-danger-bg) 88%, #111) 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: -135% 0, 0 0;
  background-repeat: no-repeat;
  color: var(--button-danger-text);
  box-shadow: var(--button-lift), var(--button-lip);
  filter: none;
}

.gl-btn-neutral:hover,
.gl-btn-neutral:focus-visible,
.gl-btn-primary:hover,
.gl-btn-primary:focus-visible,
.gl-btn-accent:hover,
.gl-btn-accent:focus-visible,
.gl-btn-danger:hover,
.gl-btn-danger:focus-visible {
  transform: translateY(-3px);
  background-position: 135% 0, 0 0;
  box-shadow: var(--button-lift-hover), var(--button-lip);
}

.gl-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--button-focus-color, var(--primary-color, #8852c9)) 55%, #fff);
  outline-offset: 3px;
}

.gl-btn:active {
  transform: translateY(1px);
  box-shadow: var(--button-pressed);
  transition-duration: .08s;
}

.gl-btn:disabled,
.gl-btn[disabled],
.gl-btn[aria-disabled="true"],
.gl-btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-image: linear-gradient(180deg, #e6e9ef, #d8dde6);
  background-color: #d8dde6;
  color: #475569;
  box-shadow: inset 0 1px 2px rgba(35,45,60,.12);
  opacity: 1;
  transform: none;
}

/* Approved dimensions. Width remains a layout concern. */
.gl-btn-sm {
  min-height: var(--button-height-sm);
  padding-inline: var(--button-padding-x-sm);
  font-size: .85rem;
}

.gl-btn-md {
  min-height: var(--button-height-md);
  padding-inline: var(--button-padding-x-md);
  font-size: .85rem;
}

.gl-btn-lg {
  min-height: var(--button-height-lg);
  padding-inline: var(--button-padding-x-lg);
  font-size: 1rem;
}

.gl-btn-full { width: 100%; }
.gl-btn-auto { width: auto; }

[dir="rtl"] .gl-btn { direction: rtl; }

@media (hover: none) {
  .gl-btn:hover {
    transform: none;
    background-position: -135% 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-btn { transition: none; }
}