/*
The button. One component for every call to action on the site — the header CTA and the
pair in the hero were two separate implementations (.btn-cta in header.css, .hero-btn in
hero.css) of the same thing, and the shared one lived inside the header's stylesheet.

Composition: a size and a variant, both required.

    .btn .btn--md .btn--solid      the header CTA, sized by its label
    .btn .btn--sm .btn--solid      the hero's filled button, 234x43
    .btn .btn--sm .btn--outline    the hero's outlined button, 207x45

The size sets type and box, the variant sets colour. Every dimension arrives through a
custom property with the size as its only author, so a layout can stretch a button
(--btn-w: 100%) without reaching into the component's own rules.

Sizes are named after their type size, not after the block they were first measured in:
md is 15px, sm is 13px. The hero pair is physically the larger of the two — its widths
are fixed by the design — which is exactly why naming a size after a place would mislead.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  width: var(--btn-w, auto);
  height: var(--btn-h);
  padding-inline: var(--btn-px, 0);
  border-radius: var(--radius-pill);
  font-size: var(--btn-fs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--btn-ls);
  line-height: var(--btn-lh);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* Sized by its label: a width is not set, the padding decides. */
.btn--md {
  --btn-h: var(--btn-md-h);
  --btn-px: var(--btn-md-px);
  --btn-fs: var(--btn-md-fs);
  --btn-ls: var(--btn-md-ls);
  --btn-lh: var(--lh-tight);
}

/*
Fixed width and height from the design, so no padding is involved and the line height is
flat — the box sets the height, not the text.

flex: 0 0 auto keeps the pair at its designed width inside a flex row that is narrower
than they are: they are meant to overflow rather than to be squeezed out of proportion.
*/
.btn--sm {
  flex: 0 0 auto;
  --btn-fs: var(--btn-sm-fs);
  --btn-ls: var(--btn-sm-ls);
  --btn-lh: var(--lh-flat);
}

.btn--sm.btn--solid {
  --btn-w: var(--btn-sm-solid-w);
  --btn-h: var(--btn-sm-solid-h);
}

.btn--sm.btn--outline {
  --btn-w: var(--btn-sm-outline-w);
  --btn-h: var(--btn-sm-outline-h);
}

.btn--solid {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}

/*
The design defines no hover state anywhere; this is the minimal highlight the header CTA
has carried since the first block, now shared by every filled button rather than by the
one that happened to be written first.
*/
.btn--solid:hover {
  background: var(--btn-solid-bg-hover);
  transform: translateY(-1px);
}

/*
The edge is an inset shadow rather than a border. A 1px border at 30% alpha on an element
that moves is composited apart from the fill and tears into gaps mid-animation — whole in
a screenshot, broken while the entrance plays. An inset shadow is painted into the
element's own background and holds together. It follows border-radius, so the pill shape
is unchanged, and because the box is border-box either way neither the box nor the label
moves by a pixel.
*/
.btn--outline {
  box-shadow: inset 0 0 0 var(--btn-outline-ring-w) var(--btn-outline-ring-color);
  color: var(--btn-outline-fg);
}