/* CtaButton — the recurring assessment CTA (S80 dark single-accent). Authored as
 * an <a> (real navigation, funnel-safe, degrades without JS). Primary = solid
 * lime with a soft ambient bloom that intensifies on hover (the alive accent on
 * dark); ghost = warm outline. Reusable across surfaces.
 * Canonical: components/primitives/CtaButton/CtaButton.css */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.cta--primary {
  background: var(--lime);
  color: var(--ground);
  box-shadow: var(--glow-lime-soft);
}
.cta--primary:hover,
.cta--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--glow-lime);
}
.cta--primary:active { transform: translateY(0); box-shadow: var(--glow-lime-soft); }

.cta--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--hairline-strong);
}
.cta--ghost:hover,
.cta--ghost:focus-visible { border-color: var(--text); color: var(--text); }

.cta__glyph { color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta--primary:hover,
  .cta--primary:focus-visible { transform: none; box-shadow: var(--glow-lime); }
}