/* CTA Pair — Vyzora Primitive
 * ----------------------------------------------------------------------------
 * The always-paired primary + secondary action row that closes every section.
 * Primary = outlined ink (NOT filled). Secondary = text + bottom-rule.
 *
 * Anti-pattern: filled-background buttons are reserved for the ONE memorability
 * anchor moment per page (--action-primary in Operational Dark mode, or the
 * Emergency Directive halt class). Marketing CTAs use outlined-ink discipline.
 *
 * Mirrors the Replit reference's outline-only CTA register, which is the
 * strongest single visual decision in their 13-page set.
 *
 * Composes from existing tokens — no new primitives introduced.
 * ============================================================================
 */

.cta-pair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.cta-pair__primary,
.cta-pair__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  background: none;
  white-space: nowrap;
}

/* Primary — outlined ink box. The default action on marketing surfaces.
 * Padding meets WCAG 2.5.8 target-size minimum (44×44 effective hit area
 * when combined with min-height). */
.cta-pair__primary {
  color: var(--text-primary);
  border: var(--border-hair) solid var(--text-primary);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-pair__primary {
    transition:
      background var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out);
  }
}

.cta-pair__primary:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.cta-pair__primary:focus-visible {
  outline: var(--border-thin) solid var(--accent-trace);
  outline-offset: 2px;
}

/* Secondary — text + bottom rule. Lighter visual weight, used inline with
 * the primary or as a single tertiary action. */
.cta-pair__secondary {
  color: var(--text-secondary);
  border: 0;
  border-bottom: var(--border-hair) solid var(--text-secondary);
  border-radius: 0;
  padding: var(--space-2) 0;
  min-height: 32px;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-pair__secondary {
    transition:
      color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out);
  }
}

.cta-pair__secondary:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.cta-pair__secondary:focus-visible {
  outline: var(--border-thin) solid var(--accent-trace);
  outline-offset: 2px;
}

/* Anchor variant — the ONE memorability moment per page.
 * Reserved for the hero CTA on Operational Dark mode (--op-anchor #FF6B1A) or
 * the locked decision CTA on Archival Authority (--archive-route oxblood).
 * Frequency lock per ADR-008-F: one per page, no exceptions. */
.cta-pair__primary--anchor {
  color: var(--text-on-action);
  background: var(--action-primary);
  border-color: var(--action-primary);
}

.cta-pair__primary--anchor:hover {
  background: var(--action-primary-hover, var(--action-primary));
  color: var(--text-on-action);
}

/* Halt variant — uses Emergency Directive intervention layer.
 * Surfaces opt INTO directive force only at moments of consequence. */
.cta-pair__primary--halt {
  color: var(--intervene-text-on);
  background: var(--intervene-halt);
  border-color: var(--intervene-rule);
}

.cta-pair__primary--halt:hover {
  background: var(--intervene-halt-deep);
  color: var(--intervene-text-on);
}

/* Arrow glyph — JuliaMono → for primary CTAs and ← for back-actions.
 * Reads as a directional cue not a decorative flourish; JuliaMono carries
 * → ← ↔ natively in the subset. */
.cta-pair__arrow {
  font-family: var(--font-mono);
  font-size: var(--type-12);
  letter-spacing: 0;
}