/* =========================================================
   BUTTON BASE
   Primary glass button
========================================================= */

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 170px;

  min-height: 52px;

  padding-inline:
    var(--space-lg);

  border-radius:
    var(--radius-pill);

  border:
    var(--border-dark-strong);

  background:
    var(--overlay-light-soft);

  backdrop-filter:
    var(--blur-glass-md);

  -webkit-backdrop-filter:
    var(--blur-glass-md);

  color:
    var(--dark);

  font-size:
    var(--text-button);

  font-weight:
    var(--weight-medium);

  letter-spacing:
    var(--tracking-normal);

  text-decoration: none;

  cursor: pointer;

  transition:
    var(--transition-button);

  box-shadow:
    none;
}


/* =========================================================
   BUTTON SECONDARY
   Filled dark button
========================================================= */

.button--secondary {
  background:
    var(--glass-overlay-dark);

  border:
    var(--border-light);

  color:
    var(--white);

  box-shadow:
    var(--shadow-soft);
}


/* =========================================================
   BUTTON DARK
   Light surface alternative
========================================================= */

.button--secondary-dark {
  background:
    var(--glass-surface-light);

  border:
    var(--border-dark);

  color:
    var(--dark);
}


/* =========================================================
   BUTTON GROUP
========================================================= */

.button-group {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    var(--space-lg);
}


/* =========================================================
   BUTTON INTERACTIONS
========================================================= */

.button:hover {
  transform:
    var(--motion-hover-lift);

  opacity:
    var(--opacity-heavy);
}


.button--secondary:hover {
  box-shadow:
    var(--shadow-button-hover);
}