@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/motion.css";
@import "tokens/responsive.css";
@import "tokens/prose.css";

/* ---------------------------------------------------------------------------
   FOCUS — WCAG 2.4.7. Every interactive element in this system is a native
   button, link, input, select, textarea or summary, so one layer covers all of
   them: Button, Card-as-link, NavBar links, FormField inputs, FaqAccordion
   triggers, Footer links. Never remove the ring without replacing it, and it is
   always distinct from hover (hover changes colour, focus adds an offset ring).
   --------------------------------------------------------------------------- */
:where(a,button,input,select,textarea,summary,details,[tabindex]):focus-visible{outline:2px solid var(--deep-sage);outline-offset:2px;border-radius:var(--radius-sm)}
/* Deep Sage, Dusty Rose and inverse grounds — ring in cream. CtaBand and Footer
   both carry data-reverse, so one selector covers every reversed context. */
:where([data-reverse="true"],[data-reverse="true"] *):focus-visible{outline-color:var(--cream)}

/* ---------------------------------------------------------------------------
   MOTION UTILITIES. Every rule that HIDES content is scoped under .ja-motion,
   a class the observer script adds to <html>. Without JavaScript the page is
   simply the finished page — nothing is ever left invisible.
   Include: <script src="js/ja-motion.js" defer></script>
   --------------------------------------------------------------------------- */
.ja-motion .ja-reveal,.ja-motion .ja-reveal-group>*{opacity:0;transform:translateY(var(--motion-lift))}
.ja-motion .ja-reveal.is-in,.ja-motion .ja-reveal-group.is-in>*{animation:ja-rise var(--dur-reveal) var(--ease-out) both}
.ja-motion .ja-reveal-group.is-in>*:nth-child(2){animation-delay:var(--motion-stagger)}
.ja-motion .ja-reveal-group.is-in>*:nth-child(3){animation-delay:calc(var(--motion-stagger)*2)}
.ja-motion .ja-reveal-group.is-in>*:nth-child(n+4){animation-delay:calc(var(--motion-stagger)*3)}
.ja-motion .ja-fade-in{opacity:0}
.ja-motion .ja-fade-in.is-in{animation:ja-fade var(--dur-base) var(--ease-out) both}
.ja-motion .ja-media{opacity:0;clip-path:inset(100% 0 0 0)}
.ja-motion .ja-media[data-loaded]{animation:ja-wipe-up var(--dur-reveal) var(--ease-out) both}

/* Links — defined here so links added later never fall back to browser blue. */
a{color:var(--deep-sage);text-underline-offset:3px;transition:color var(--transition-quick)}
a:hover{color:var(--sage)}

/* Reduced motion: no reveal state at all. The end state is the visible state. */
@media (prefers-reduced-motion:reduce){
.ja-motion .ja-reveal,.ja-motion .ja-reveal-group>*,.ja-motion .ja-fade-in,.ja-motion .ja-media{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
}