.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.6em 1.1em 0.675em;
  border-radius: 2.5em;
  background: linear-gradient(
    135deg,
    var(--color-black) 0%,
    var(--color-cobalt) 100%
  );
  color: var(--color-white);
  cursor: pointer;
  font-feature-settings: 'c2sc', 'smcp';
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: -0.0175em;
  line-height: 1;
  pointer-events: auto;
  text-align: center;
  text-decoration: none;
}

.button span {
  z-index: 1;
}

/* Color Variants */
.button--color-cobalt {
  background: var(--color-cobalt);
}

.button--color-danger {
  background: var(--color-coral);
}

.button--color-blurbalt {
  background: linear-gradient(
    135deg,
    var(--color-blurple) 0%,
    var(--color-cobalt) 100%
  );
}

.button--color-stone {
  background: var(--color-stone);
  color: var(--color-black);
}

.button--color-salmon {
  background: linear-gradient(
    135deg,
    var(--color-salmon) 0%,
    var(--color-coral) 100%
  );
}

/* Signup Button */
.button--signup {
  padding: 0;
}

.button--signup span {
  background: url("/static/assets/images/general/logo.svg") no-repeat 0.575em center / 1.5em 1em;
  padding: 0.6em 1em 0.625em 2.1em;
}

/* Icon Button */
.button--icon-rss span {
  background: url("/static/assets/images/general/icon-rss.svg") no-repeat left center / 0.675em 0.675em;
  padding-left: 0.925em;
}

/* Sizes - font size + proportional padding */
.button--size-large {
  font-size: var(--font-size-large);
  padding: 0.7em 1.1em 0.72em;
}

.button--size-medium {
  font-size: var(--font-size-small);
  padding: 0.7em 1.1em 0.72em;
}

.button--size-small {
  font-size: var(--font-size-x-small);
  padding: 0.7em 1.1em 0.72em;
}

.button--size-x-small {
  font-size: var(--font-size-xx-small);
  padding: 0.6em 1em 0.625em;
}

.button--size-xx-small {
  font-size: var(--font-size-xxxx-small);
  padding: 0.5em 0.9em 0.52em;
}

/* Stacked Layout */
.button--stacked {
  padding: 0.95em 1.7em 0.775em;
}

.button--stacked dl {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  z-index: 1;
}

.button--stacked dl dd {
  font-size: var(--font-size-xx-small);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.0125em;
}

/* Hover & Glow Effects */
@media (hover: hover) {
  .button:hover,
  .button:focus {
    color: var(--color-white);
  }

  .button--color-stone:hover,
  .button--color-stone:focus {
    color: var(--color-black);
  }

  .button--color-stone:hover,
  .button--color-stone:focus,
  .button--color-cobalt:hover,
  .button--color-cobalt:focus,
  .button--color-danger:hover,
  .button--color-danger:focus {
    opacity: 0.8;
  }

  .button--glow {
    position: relative;
    overflow: hidden;
    --pointer-x-px: calc(var(--pointer-x) * 1px);
    --pointer-y-px: calc(var(--pointer-y) * 1px);
  }

  .button--glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      8em circle at var(--pointer-x-px) var(--pointer-y-px),
      rgba(var(--rgb-peach), 0.1),
      rgba(var(--rgb-peach), 0)
    );
    opacity: 0;
    transition: opacity var(--transition);
  }

  .button--glow:hover::after,
  .button--glow:focus::after {
    opacity: 1;
  }
}

/* Responsive Adjustments */
@media (min-width: 64em) {
  .button--signup {
    font-size: var(--font-size-x-small);
  }
  .button--signup span {
    padding: 0.7em 1em 0.72em 2.1em;
  }
}

@media (max-width: 64em) {
  .button--size-xx-small {
    font-size: var(--font-size-x-small);
  }
}