import { cn } from "@/lib/utils";

// Shared Tailwind class fragments reused across components/ui/* primitives
// and their call sites — not a new styling system, just named constants for
// strings that were duplicated verbatim across 25+ files (see CSS audit).
// Same convention as buttonClasses()/fieldClasses(): plain exported values,
// composed with cn() at each call site.

/** Default focus-visible ring (buttons, cards, links). Matches Button's BASE_CLASSES. */
export const FOCUS_RING_CLASSES =
  "focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-primary focus-visible:ring-offset-2";

/** Tighter ring-offset for small/inline controls (inputs, icon buttons, dropdown menu items). */
export const FOCUS_RING_TIGHT_CLASSES =
  "focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-primary focus-visible:ring-offset-1";

/** Base card/panel surface — border + radius, no padding (callers add their own). */
export const CARD_CLASSES = "rounded-xl border border-kolabora-neutral-dark/10";

export function cardClasses(className = ""): string {
  return cn(CARD_CLASSES, className);
}