/*
 * .brtr — Utilities
 * Shared utility classes used across multiple sections:
 * - CTA button (copper gradient)
 * - Avatar base + size modifiers
 * - Color variant system
 */

/* ── CTA button (copper gradient) ──
 * Used by: nav signup, float-card btn, proto-next, m4-add btn
 * Apply with: class="btn-cta"
 * Size/padding set per usage via the component class.
 */
.btn-cta {
  font-family: var(--font);
  font-weight: 600;
  color: #fff;
  background: var(--cta-gradient);
  border: 1px solid var(--cta-border);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  text-shadow: var(--cta-text-shadow);
  transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
}

.btn-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: var(--cta-shadow-hover);
}

/* ── Highlight box ──
 * Gold-tinted background box for punchlines and active tags.
 * Used by: .h1-punch, .s2-cta__highlight, .proto-tag--on
 */
.highlight-box {
  background: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: 10px;
  box-shadow: var(--highlight-shadow);
}