/* ============================================================
 * CTA Button Component
 * ------------------------------------------------------------
 * Purpose:
 *   - Provide a small, stable set of call-to-action buttons
 *   - Encode action semantics via visual weight
 *
 * Variants:
 *   - cta-flow   : navigational / exploratory actions
 *   - cta-action : final / irreversible actions
 *
 * Design principles:
 *   - Few variants, clearly differentiated
 *   - No layout responsibility
 *   - No project-specific assumptions
 * ============================================================
 */


/* ================= Base ================= */

.cta-btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;

  font-family: var(--font-sans, system-ui);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;

  border-radius: 0.4rem;
  border: 1px solid transparent;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

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


/* ================= Flow CTA ================= */
/* Navigational / exploratory actions */

.cta-flow {
  background: var(--tx-white);
  color: var(--tx-navy);
  border-color: #ffffff;
}

.cta-flow:hover {
  background: #f4f6f8;
  transform: translateY(-2px);
}


/* ================= Action CTA ================= */
/* Final or irreversible actions */

.cta-action {
  background: var(--tx-red, #c8102e);
  color: var(--tx-white, #ffffff);
  border-color: transparent;
}

.cta-action:hover {
  background: #a00d25;
  transform: translateY(-2px);
}