/**
 * Standardized theme colors and variants for consistent component styling
 */

export const themeColors = {
  background: {
    default: 'bg-background',
    muted: 'bg-muted',
    card: 'bg-card',
    overlay: 'bg-overlay',
  },
  text: {
    default: 'text-foreground',
    muted: 'text-muted-foreground',
    primary: 'text-primary',
    destructive: 'text-destructive',
  },
  border: {
    default: 'border-border',
    muted: 'border-border/50',
    primary: 'border-primary',
  },
} as const;

export const componentVariants = {
  card: {
    default: `${themeColors.background.card} ${themeColors.text.default} shadow-md`,
    interactive: `cursor-pointer hover:shadow-lg hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring`,
  },
  button: {
    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
    outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
    ghost: 'hover:bg-accent hover:text-accent-foreground',
  },
} as const;