/**
 * Shared class fragments for the navigation.
 *
 * app.css already paints a token-driven ring on every `:focus-visible`; these
 * classes restate it with the same tier-2 tokens so the ring survives any local
 * `outline` override and is visible in the component source.
 */
export const FOCUS_RING =
  "focus-visible:outline-[color:var(--focus-ring-color)] " +
  "focus-visible:outline-[length:var(--focus-ring-width)] " +
  "focus-visible:outline-offset-[var(--focus-ring-offset)]";

/** Colour/opacity transitions, driven by the motion tokens. */
export const HOVER_TRANSITION =
  "transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]";

export function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}