/* Two grammars only: pill (action) and rect (utility). */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       border: 0; cursor: pointer; transition: var(--transition-press); }
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Primary blue pill — the universal action */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  font-size: var(--type-body-size);
  letter-spacing: var(--type-body-track);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  min-height: 44px;
}
.btn-primary:hover { background: #0058b0; }

/* Ghost pill — second CTA next to a primary */
.btn-secondary-pill {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-size: var(--type-body-size);
  min-height: 44px;
}
.btn-secondary-pill:hover { background: rgba(0, 102, 204, 0.05); }

/* Dark utility rect — global-nav actions */
.btn-utility-dark {
  background: var(--color-ink);
  color: #fff;
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-track);
  padding: 8px 15px;
  border-radius: var(--r-sm);
  min-height: 32px;
}
.btn-utility-dark:hover { background: #2d2d30; }

/* Pearl capsule — soft secondary on light surfaces */
.btn-pearl {
  background: var(--color-surface-pearl);
  color: var(--color-ink-muted-80);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: var(--type-caption-size);
}

/* Tiny circular icon button — over imagery */
.btn-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-chip-translucent);
  color: var(--color-ink);
}

/* Plain text link styled as primary action */
.link-primary {
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: var(--type-body-track);
}

/* Filter chip — pill, selectable */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-track);
  cursor: pointer;
  transition: var(--transition-press);
}
.chip:hover { border-color: var(--color-ink); }
.chip[aria-pressed="true"], .chip.active {
  border: 2px solid var(--color-primary-focus);
  padding: 7px 15px;
  font-weight: 600;
}

/* Icon-only utility (header bag, search, etc) */
.btn-icon {
  background: transparent;
  border: 0;
  color: inherit;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.btn-icon:hover { background: rgba(255, 255, 255, 0.08); }