/* Parlor — buttons.css
   Two ranks: default (parchment) and primary (walnut).
   All visual values reference colors_and_type.css tokens. */

.btn {
  --_pad-y: var(--space-2);
  --_pad-x: var(--space-4);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-base);

  color: var(--button-fg);
  background: var(--button-bg);
  border: var(--border-width-hair) solid var(--button-border);
  border-radius: var(--radius-md);
  padding: var(--_pad-y) var(--_pad-x);

  box-shadow: var(--shadow-flat);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    background-color var(--dur-fast) var(--ease-standard),
    box-shadow       var(--dur-fast) var(--ease-standard),
    transform        var(--dur-fast) var(--ease-standard);
}

.btn:hover    { background: var(--button-bg-hover); }
.btn:active   { background: var(--button-bg-active); transform: translateY(1px); box-shadow: none; }
.btn:disabled { color: var(--fg-disabled); border-color: var(--border-hairline); background: var(--surface-sunken); cursor: not-allowed; box-shadow: none; }

/* primary — walnut filled, used for the single hero affordance only */
.btn--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border-color: var(--wood-900);
}
.btn--primary:hover  { background: var(--button-primary-bg-hover); }
.btn--primary:active { background: var(--wood-900); }

/* ghost — for low-emphasis utility actions in dense rows */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-secondary);
  box-shadow: none;
}
.btn--ghost:hover  { background: var(--button-bg-hover); color: var(--fg-primary); }
.btn--ghost:active { background: var(--button-bg-active); }

/* sizes */
.btn--sm { font-size: var(--fs-sm); padding: var(--space-1) var(--space-3); }
.btn--lg { font-size: var(--fs-md); padding: var(--space-3) var(--space-5); }

/* icon-only — square, for toolbar/menu */
.btn--icon { padding: var(--space-2); aspect-ratio: 1; }

/* group of related buttons — single hairline shared border */
.btn-group {
  display: inline-flex;
  border: var(--border-width-hair) solid var(--button-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
}
.btn-group .btn {
  border: 0;
  border-radius: 0;
  border-right: var(--border-width-hair) solid var(--border-hairline);
  box-shadow: none;
}
.btn-group .btn:last-child { border-right: 0; }
.btn-group .btn[aria-pressed="true"] { background: var(--brass-300); color: var(--brass-900); }