/* ==============================================================
   L1 — Buttons and links

   One definition per role, with the geometry expressed as size
   modifiers so the two sizes already in use are preserved rather
   than silently standardised away.

     .btn                base: geometry, type, transition
     .btn--solid         primary action
     .btn--outline       secondary action
     .btn--icon          icon-only control
     .btn--sm / --md     the two geometries in use
     .link--underlined   the repeated bold-underline treatment
   ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--btn-pad-y) var(--btn-pad-x);

  /* Always a border, transparent when the variant does not show one,
     so solid and outline buttons standing side by side are the same
     height. Without it they differ by twice the border width. */
  border: var(--btn-border-w) solid transparent;

  background: transparent;
  color: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-control);
  text-align: center;
  cursor: pointer;

  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

/* --- Sizes -------------------------------------------------------
   Both are in production use; neither is "the" button size.

   Padding-y is picked to land the RENDERED height (padding + border +
   the 21px single-line content box, border-box) exactly on the two
   most-cited tap-target minimums rather than on whatever a shared
   spacing token happened to add up to — 44px (Apple HIG) for --sm,
   48px (Material Design) for --md. Border-width stays untouched
   (1px / 2px): that's the deliberate visual-weight difference between
   the two tiers, not something to fold into the height math.

     --sm  21 + 2×10.5 + 2×1 = 44
     --md  21 + 2×11.5 + 2×2 = 48

   In rem, not px, on purpose: a fixed px pad would stop scaling if a
   user bumps their browser's base font size for readability, quietly
   shrinking the tap target back below the target it's built to hit.
   ----------------------------------------------------------------- */

.btn--sm {
  --btn-pad-y: .65625rem;    /* 10.5px -> 44px rendered height */
  --btn-pad-x: var(--space-6);
  --btn-border-w: 1px;
}

.btn--md {
  --btn-pad-y: .71875rem;    /* 11.5px -> 48px rendered height */
  --btn-pad-x: var(--space-5);
  --btn-border-w: 2px;
}


/* --- Solid -------------------------------------------------------- */

.btn--solid {
  background: var(--color-btn-primary);
  color: var(--color-brand-ink);
}

/* Mixed toward black rather than filtered: a brightness filter would
   dim the white label along with the background. */
.btn--solid:hover,
.btn--solid.is-hover {
  background: color-mix(in srgb, var(--color-btn-primary) 88%, var(--color-shade));
}

/* Press feedback. On touch, hover is unreliable or sticks after the
   tap, so :active is often the only confirmation the press landed. */
.btn--solid:active,
.btn--solid.is-active {
  background: color-mix(in srgb, var(--color-btn-primary) 74%, var(--color-shade));
}


/* --- Outline ------------------------------------------------------ */

.btn--outline {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-brand);
}

.btn--outline:hover,
.btn--outline.is-hover { background: var(--color-surface-utility); }

.btn--outline:active,
.btn--outline.is-active {
  background: color-mix(in srgb, var(--color-surface-utility) 92%, var(--color-shade));
}


/* --- Inverse -------------------------------------------------------
   For coloured grounds where the solid orange would barely register.
   Note the hover LIGHTENS: a near-black fill has nowhere darker to
   go, so mixing toward --color-shade would produce no visible change
   at all.
   -------------------------------------------------------------------- */

.btn--inverse {
  background: var(--color-ink);
  color: var(--color-ink-inverse);
}

.btn--inverse:hover,
.btn--inverse.is-hover {
  background: color-mix(in srgb, var(--color-ink) 86%, var(--color-tint));
}

.btn--inverse:active,
.btn--inverse.is-active {
  background: color-mix(in srgb, var(--color-ink) 74%, var(--color-tint));
}


/* --- Icon-only ---------------------------------------------------- */

.btn--icon {
  --btn-pad-y: var(--space-2);
  --btn-pad-x: var(--space-2);
  --btn-border-w: 0px;
  gap: 0;
  /* Inherits colour so the same control works on cream, white and
     the orange band without a variant for each. */
  color: inherit;
}

.btn--icon:active,
.btn--icon.is-active { opacity: .6; }


/* --- Disabled -----------------------------------------------------
   [aria-disabled] is matched too: a button that must stay focusable
   (so its state is discoverable) uses that rather than `disabled`.
   ----------------------------------------------------------------- */

.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  /* Kills hover and active feedback along with the action. */
  pointer-events: none;
}

.btn--solid:disabled,
.btn--solid[aria-disabled='true'] {
  background: var(--color-disabled-surface);
  color: var(--color-disabled-ink);
}

.btn--outline:disabled,
.btn--outline[aria-disabled='true'] {
  color: var(--color-disabled-ink);
  border-color: var(--color-border);
}

.btn--icon:disabled,
.btn--icon[aria-disabled='true'] { color: var(--color-disabled-ink); }

.btn--inverse:disabled,
.btn--inverse[aria-disabled='true'] {
  background: var(--color-disabled-surface);
  color: var(--color-disabled-ink);
}


/* --- Links --------------------------------------------------------
   The bold-underline treatment had been written out four times.
   ----------------------------------------------------------------- */

.link--underlined {
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.link--underlined:hover,
.link--underlined.is-hover { text-decoration-thickness: 2px; }

/* Current page. Nine nav links had no way to mark one as current —
   aria-current carries it to assistive tech, this shows it. */
[aria-current='page'] { text-decoration: underline; }