/* SLE-T7-buttons — canonical button patterns per the Camp v2 Style Guide.
 *
 * Visual rule (per user decision 2026-05-30):
 *   .btn-y, .btn-g  — YELLOW. .btn-g is the primary action / "save"
 *                     surface (bold weight); .btn-y is the active state
 *                     and brand-moment surface (semibold).
 *   .btn-gh         — ghost outline, default secondary.
 *   .btn-b          — blue, for informational / generation actions.
 *   .btn-r          — solid red, destructive only.
 *   .btn-bk         — dark surface, for high-emphasis dark buttons.
 *   .btn            — neutral white/g2-bordered default.
 *
 * Sizes: .btn-sm (12px) · .btn-md (13px, default) · .btn-lg (14px).
 *
 * Hover is universal opacity .85 + tactile scale .97 on :active.
 * Focus comes from focus-rings.css (outline-based per guide).
 *
 * Depends on tokens.css.
 */

/* Shared base — applies to .btn and every variant. */
.btn,
.btn-y,
.btn-g,
.btn-b,
.btn-r,
.btn-gh,
.btn-bk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.btn:hover:not(:disabled),
.btn-y:hover:not(:disabled),
.btn-g:hover:not(:disabled),
.btn-b:hover:not(:disabled),
.btn-r:hover:not(:disabled),
.btn-gh:hover:not(:disabled),
.btn-bk:hover:not(:disabled) {
  opacity: 0.85;
}

.btn:active:not(:disabled),
.btn-y:active:not(:disabled),
.btn-g:active:not(:disabled),
.btn-b:active:not(:disabled),
.btn-r:active:not(:disabled),
.btn-gh:active:not(:disabled),
.btn-bk:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled,
.btn-y:disabled,
.btn-g:disabled,
.btn-b:disabled,
.btn-r:disabled,
.btn-gh:disabled,
.btn-bk:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}

/* Sizes — override font-size and padding. */
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-md { font-size: 13px; padding: 7px 14px; }
.btn-lg { font-size: 14px; padding: 10px 18px; }

/* Neutral default — white surface with subtle border.
 * The shared base above sets `border: none` for every variant; this rule and
 * .btn-gh below intentionally re-add a 1px border. The other 5 variants (-y,
 * -g, -b, -r, -bk) keep `border: none` because their backgrounds carry the
 * visual edge. */
.btn {
  background: var(--white);
  color: var(--bk);
  border: 1px solid var(--g2);
}

/* Yellow brand-moment / active state. */
.btn-y {
  background: var(--y);
  color: var(--bk);
}

/* Primary yellow CTA — heavier weight differentiates from .btn-y. */
.btn-g {
  background: var(--y);
  color: var(--bk);
  font-weight: 700;
}

/* Informational blue (PDF, export, generate). */
.btn-b {
  background: var(--blue);
  color: var(--white);
}

/* Destructive solid red. */
.btn-r {
  background: #b91c1c;
  color: var(--white);
}

/* Ghost outline — white surface, g2 border, g1 hover. */
.btn-gh {
  background: var(--white);
  color: var(--bk);
  border: 1px solid var(--g2);
}
.btn-gh:hover:not(:disabled) {
  background: var(--g1);
  opacity: 1; /* override universal .85 — hover is a bg change, not a fade */
}

/* Dark / black surface for high-emphasis dark contexts. */
.btn-bk {
  background: var(--bk);
  color: var(--white);
}

/* Ghost active — dark active state for toggle-style ghost buttons. */
.btn-gh.active,
.btn-gh.on {
  background: var(--bk);
  color: var(--white);
  border-color: var(--bk);
}

/* iPhone touch-target floor — Apple HIG: tappable ≥ 44×44pt.
 * Mobile buttons grew from ~27px tall to a 44px floor; desktop unaffected.
 * Aligned to Camp v2 Style Guide §19 phone breakpoint (2026-06-02 sweep). */
@media (max-width: 639px) {
  .btn,
  .btn-sm,
  .btn-md,
  .btn-lg,
  .btn-y,
  .btn-g,
  .btn-b,
  .btn-r,
  .btn-gh,
  .btn-bk {
    min-height: 44px;
  }
}

/* Reduced motion — drop the scale on :active. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-y,
  .btn-g,
  .btn-b,
  .btn-r,
  .btn-gh,
  .btn-bk {
    transition: none;
  }
  .btn:active:not(:disabled),
  .btn-y:active:not(:disabled),
  .btn-g:active:not(:disabled),
  .btn-b:active:not(:disabled),
  .btn-r:active:not(:disabled),
  .btn-gh:active:not(:disabled),
  .btn-bk:active:not(:disabled) {
    transform: none;
  }
}