/* ============================================================
   FLUXATH CRM — Stripe-inspired motion + polish
   Phase 4 of stripe-reskin-2026-05-24.

   Loaded LAST in the cascade (after style.css → tokens-stripe →
   primitives-*). All rules consume motion tokens from
   tokens-stripe.css (--ease-stripe, --dur-*) and honor
   `prefers-reduced-motion: reduce`.

   Scope:
   - Universal :focus-visible ring (WCAG 2.4.7 compliant, AA contrast)
   - Page entrance (fade-in) for the main content region
   - Smooth-scroll behavior
   - .btn.primary.pill gradient-glow on hover (Stripe-marketing feel)
   - Reduced-motion safety net
   ============================================================ */

/* ── Universal focus ring (WCAG 2.4.7) ──
   :focus-visible only — mouse users don't see ring, keyboard users do.
   Existing primitives-forms.css ring on inputs/buttons takes precedence
   via specificity; this catches everything else (links, custom widgets). */
:where(a, [tabindex], summary, [role="button"], [role="radio"], [role="checkbox"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rad-xs);
}

/* ── Page entrance ── */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

main {
  animation: page-fade-in var(--dur-med) var(--ease-stripe);
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── .btn.primary.pill — gradient-glow hover ──
   Stripe-marketing pill CTAs get a brand-keyed soft glow on hover. */
.btn.primary.pill {
  position: relative;
  box-shadow: 0 1px 2px rgba(0,55,112,.10);
}

.btn.primary.pill:hover {
  box-shadow:
    0 2px 4px rgba(0,55,112,.12),
    0 0 0 4px var(--accent-line);
}

[data-theme="dark"] .btn.primary.pill {
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

[data-theme="dark"] .btn.primary.pill:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 0 0 4px var(--accent-line);
}

/* ── Card lift refinement ──
   primitives-containers.css already animates the card hover; this just
   adds an `active` (pressed) micro-tap for touch surfaces. */
.card:active,
.card-feature:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft-blue-1);
  transition: none;
}

/* ── Table row tick on hover ── */
.table tbody tr {
  transition: background var(--dur-fast) var(--ease-stripe);
}

/* ── Reduced-motion safety net ──
   Zero out durations + transforms when the OS asks. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  main { animation: none; }
}