bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-500
/* #8B5CF6 → #A855F7 → #D946EF */

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

// Modal/Dialog
const modalVariants = {
  initial: { opacity: 0, y: 20, scale: 0.95 },
  animate: { opacity: 1, y: 0, scale: 1 },
  exit: { opacity: 0, y: 20, scale: 0.95 },
};

const springTransition = {
  type: "spring",
  damping: 25,
  stiffness: 300
};

// Button entrance
const buttonVariants = {
  initial: { scale: 0.8, opacity: 0 },
  animate: { scale: 1, opacity: 1 },
  exit: { scale: 0.8, opacity: 0 },
};

// Stats card stagger
const cardVariants = {
  initial: { opacity: 0, scale: 0.8 },
  animate: { opacity: 1, scale: 1 },
};

@keyframes accordion-down {
  from { height: 0 }
  to { height: var(--radix-accordion-content-height) }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height) }
  to { height: 0 }
}

export const designTokens = {
  colors: {
    primary: {
      main: '#008CF0',
      foreground: '#FFFFFF',
      hsl: '205 100% 47.1%',
    },
    secondary: {
      main: '#383B53',
      foreground: '#FFFFFF',
      hsl: '233 19.4% 27.3%',
    },
    background: {
      main: '#F2F2F7',
      card: '#FFFFFF',
      muted: '#F4F4F5',
    },
    status: {
      success: '#52C41A',
      warning: '#FAAD14',
      error: '#FF4D4F',
    },
  },
  gradients: {
    employees: 'from-blue-500 to-blue-600',
    onLeave: 'from-amber-400 to-orange-500',
    pending: 'from-violet-500 to-purple-600',
    openPositions: 'from-emerald-400 to-green-500',
    aiButton: 'from-violet-500 via-purple-500 to-fuchsia-500',
  },
  shadows: {
    card: 'shadow-lg shadow-gray-200/50 dark:shadow-black/40',
    statsCard: 'shadow-lg',
    button: 'shadow-lg shadow-primary/25',
    aiButton: 'shadow-xl shadow-violet-500/30',
  },
  radius: {
    card: 'rounded-2xl',
    button: 'rounded-lg',
    pill: 'rounded-full',
    input: 'rounded-md',
  },
  spacing: {
    cardPadding: 'p-6',
    cardGap: 'gap-6',
    sectionGap: 'gap-8',
  },
} as const;