/* ============================================
   gs-btn — button component

   Two axes of variation:
     SIZE: default (medium) | --sm (small)
     COLOR: --primary (gradient) | --secondary (outline) | --inverted (white)

   Size rules:
     Default: 16px text + 1px border (proportional for larger buttons)
     --sm:    14px text + 1.5px border (thicker for visual weight at small scale)

   The 1.5px border on small buttons is intentional — smaller elements
   need proportionally thicker borders to avoid feeling "wireframe-y."
   Conversely, a 1.5px border on a larger button reads as heavy-handed.
   ============================================ */

.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease-out, filter 0.15s ease, background 0.15s ease;
}

/* Small size — tighter padding, smaller font, thicker border.
   Used for sidebar CTAs, header CTA, anywhere the button sits at
   a smaller scale than a page-level call to action. */
.gs-btn--sm {
  padding: 0.65rem 1.4rem;
  font-size: var(--text-sm);
  border-width: 1.5px;
}

.gs-btn:hover {
  transform: scale(1.06);
}

/* Primary — brand gradient. Reserved for primary CTAs only. */
.gs-btn--primary {
  background: var(--gradient-cta);
  color: #fff;
  border-color: transparent;
}

.gs-btn--primary:hover {
  /* subtle gradient brightening, no lift, no colored shadow */
  filter: brightness(1.08);
}

/* Secondary — outline that adopts surrounding text color via currentColor.
   Works on light AND dark backgrounds without needing two variants. */
.gs-btn--secondary {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.gs-btn--secondary:hover {
  /* subtle fill on hover, scales naturally with currentColor */
  background: rgba(255, 255, 255, 0.06);
}

/* Inverted — white pill with dark text. For CTAs sitting on the
   brand gradient or dark sections where the gradient-fill primary
   would clash with the surrounding bg. */
.gs-btn--inverted {
  background: #ffffff;
  color: var(--color-fg);
  border-color: transparent;
}

.gs-btn--inverted:hover {
  /* tiny tonal shift on hover so it's not just a scale change */
  background: #f5f7fa;
}