/* ==========================================================================
   Button — pill-shaped actions (K07 Elements · K11 CTA hierarchy)

   <a class="btn btn--primary" href="…">Request a demo →</a>
   <a class="btn btn--outline" href="…">Talk to a specialist</a>
   <button class="btn btn--primary btn--lg" type="button">…</button>

   Sizes:    (default) 48px · .btn--sm 40px · .btn--lg 56px
   Variants: .btn--primary   scrub fill, the ONE primary action per viewport
             .btn--outline   hairline border, secondary action
             .btn--ink       solid graphite fill
             .btn--ink-outline  1px graphite border (header CTA style)
             .btn--on-dark   outline variant for dark surfaces
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--button-height-m);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-text);
  font: 500 16px/1 'Geist', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}

.btn--sm { height: var(--button-height-s); padding: 0 18px; font-size: 15px; }
.btn--lg { height: var(--button-height-l); padding: 0 24px; font-size: 17px; }

/* Primary — scrub */
.btn--primary {
  padding: 0 22px;
  border: 0;
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}
.btn--primary.btn--lg { padding: 0 28px; }
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-fg);
}

/* Secondary — hairline outline */
.btn--outline {
  border-color: var(--color-hairline-strong);
  color: var(--color-text);
}
.btn--outline:hover { border-color: var(--color-text); color: var(--color-text); }

/* Solid graphite */
.btn--ink {
  border-color: var(--graphite-900);
  background: var(--graphite-900);
  color: var(--graphite-50);
}
.btn--ink:hover { background: var(--graphite-800); color: var(--graphite-50); }

/* Graphite outline */
.btn--ink-outline {
  border-color: var(--graphite-900);
  color: var(--graphite-900);
  font-size: 15px;
}
.btn--ink-outline:hover { background: var(--graphite-900); color: var(--graphite-50); }

/* Outline on dark surfaces */
.btn--on-dark {
  border-color: rgba(232, 236, 234, .4);
  color: var(--graphite-mist);
}
.btn--on-dark:hover { border-color: var(--graphite-mist); color: var(--graphite-mist); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}