/*
 * Pitru Theme v2 — buttons.css
 *
 * Button system ported from ORG inline styles observed across
 * components/Shell.jsx, HomeHero.jsx, and HomeSections.jsx. Four
 * variants, all tokens-only:
 *
 *   .btn              — shared base (padding, radius, font, transition)
 *   .btn-primary      — solid ink bg (CTA on pale surfaces)
 *   .btn-ghost        — transparent with hairline border
 *   .btn-gold         — solid gold-deep bg (the strongest CTA)
 *   .btn-on-dark      — inverse (white text on dark backgrounds)
 */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease-ios), color 0.18s var(--ease-ios), border-color 0.18s var(--ease-ios), transform 0.12s var(--ease-ios);
  white-space: nowrap;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

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

/* Primary — ink solid */
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

/* Ghost — hairline border, transparent bg */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(26,22,19,0.04); }

/* Gold — the strongest brand CTA */
.btn-gold {
  background: var(--gold-deep);
  color: var(--paper);
  border-color: var(--gold-deep);
}
.btn-gold:hover { background: var(--gold); border-color: var(--gold); }

/* On-dark — inverse button for ink/vermillion-deep backgrounds */
.btn-on-dark {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn-on-dark:hover { background: var(--ivory); }

/* Link-style button — no chrome, inline with body copy */
.btn-link {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 0;
}
.btn-link:hover { color: var(--gold); }

/* Chip — a smaller variant used in filter pills, tag rows, etc. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1;
  white-space: nowrap;
}

.chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.chip__count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.08em;
}