/* ──────────────────────────────────────────────────────────────────
 * Communikit Design System v2 — root stylesheet
 *
 * The single entry point for consumers. Link this one file:
 *   <link rel="stylesheet" href="styles.css">
 *
 * It pulls in, in order:
 *   fonts/fonts.css      @font-face — Plus Jakarta Sans (variable + static)
 *   typography.css       role-based text system (display/headline/title/body/…)
 *   colors_and_type.css  bound tokens — brand, semantic, neutrals, motion, icon
 *   community-theming.css  the community theming contract — [data-community]
 *                        scopes. Inert until the attribute is set, so linking
 *                        it costs an unbranded app nothing. It MUST be here:
 *                        without it a consumer has no way to apply a community
 *                        theme, and the contract is unreachable from the
 *                        bound system. Load it AFTER colors_and_type.css.
 *   components/api.css   the class layer behind the published components
 *                        (window.CommunikitDesignSystemV2_2d7229) — see
 *                        "Component API · Reference" in the Design System tab
 *
 * colors_and_type.css already imports fonts.css and typography.css, so it is
 * listed last and carries the closure. Product UI kits are opt-in and are NOT
 * imported here — link the one you need alongside this file:
 *   ui_kits/admin-portal/kit.css
 *   ui_kits/member-website/kit.css
 *   ui_kits/mobile-app/kit.css
 *   components/fig-tokens.css  surface/text/border tokens from the
 *                        "Visual Design Language Refresh" Figma file,
 *                        Light + Dark modes. Namespaced apart from the
 *                        bound tokens — see the note below.
 * ───────────────────────────────────────────────────────────────── */

@import url("./colors_and_type.css");
@import url("./community-theming.css");
@import url("./components/fig-tokens.css");
@import url("./components/api.css");

/* ── REDUCED MOTION ───────────────────────────────────────────────
 * Answers prefers-reduced-motion for the whole system. Transitions
 * and animations collapse rather than change character: the calm
 * fades and background swaps already land in one step, so removing
 * their duration removes the movement and nothing else.
 *
 * It belongs here rather than in colors_and_type.css because the kits
 * declare their transitions with literal durations (160ms, 200ms,
 * 640ms) rather than --dur-*, so overriding the motion tokens under
 * the media query would reach none of them. Only a rule on the
 * elements themselves does.
 *
 * 1ms rather than 0s on purpose: a zero duration does not fire
 * transitionend, and any handler waiting on it would never run.
 *
 * Two carve-outs:
 *
 * 1. Loading spinners keep turning, at the 1600ms the three kits
 *    already use. A stopped spinner reads as a dead action — the
 *    control would look broken rather than busy — so the slowed
 *    rotation stays. This generalises the per-kit override that
 *    shipped with the interaction states; the kit copies can stay
 *    where they are.
 *
 * 2. No auto-advancing carousel at any preference. There is none in
 *    the code today: the pinned row pages by swipe and its dots are
 *    aria-hidden indicators. So this is a standing rule on what may
 *    be built, not a media query — an auto-advancing row would be
 *    wrong for every member, not only for the ones who asked.
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .is-loading::after {
    animation-duration: 1600ms !important;
    animation-iteration-count: infinite !important;
  }
}

/* fig-tokens.css carries 15 Figma Variables under their Figma names
 * (--surface-*, --text-*, --border-subtle, --module-dashboard). None of
 * them collides with a bound token, and they are NOT yet reconciled with
 * the bg / ink / fg families: several describe the same surface
 * under a second name. Treat them as the refresh's own layer until that
 * merge is decided. */