// Central Design System
// Usage: import { DS } from '../styles/designSystem';

export const DS = {
  colors: {
    brand: 'var(--brand-color, #4f46e5)',
    bg: 'bg-slate-100 dark:bg-slate-950',
    card: 'bg-white dark:bg-slate-900',
    text: 'text-slate-900 dark:text-slate-100',
    textMuted: 'text-slate-500 dark:text-slate-400',
    border: 'border-slate-200 dark:border-slate-800',
  },
  layout: {
    pageContainer: "max-w-7xl mx-auto pb-12 animate-in fade-in duration-300",
    header: "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8",
    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
    card: "bg-white dark:bg-slate-900 rounded-[1.5rem] shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden transition-all hover:shadow-md",
    sectionHeader: "px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/30",
  },
  input: {
    base: "w-full p-3 bg-slate-50 dark:bg-slate-800 border-none rounded-xl outline-none focus:ring-2 ring-brand transition-all text-sm font-semibold text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500",
    label: "block text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5 ml-1",
    searchContainer: "relative flex-1",
    searchIcon: "absolute left-3 top-1/2 -translate-y-1/2 text-slate-400",
    searchInput: "w-full pl-10 pr-4 py-2.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl text-sm outline-none focus:ring-2 ring-brand transition-all shadow-sm text-slate-900 dark:text-slate-100",
  },
  button: {
    primary: "bg-brand text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-brand/20 hover:opacity-90 active:scale-95 transition-all flex items-center justify-center gap-2",
    secondary: "bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-4 py-2.5 rounded-xl font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-all flex items-center justify-center gap-2",
    icon: "p-2.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl text-slate-500 hover:text-brand transition-all",
    ghost: "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 text-sm font-medium transition-colors",
  },
  table: {
    container: "bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden",
    header: "bg-slate-50 dark:bg-slate-800/50 text-slate-500 dark:text-slate-400 text-[10px] font-black uppercase tracking-widest border-b border-slate-100 dark:border-slate-800",
    row: "hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors border-b border-slate-50 dark:border-slate-800 last:border-0",
    cell: "p-4 text-sm font-medium text-slate-700 dark:text-slate-300",
  },
  badges: {
    base: "px-2.5 py-0.5 rounded-md text-[10px] font-black uppercase tracking-wide border",
    success: "bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border-emerald-100 dark:border-emerald-900/30",
    warning: "bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 border-amber-100 dark:border-amber-900/30",
    error: "bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border-red-100 dark:border-red-900/30",
    neutral: "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border-slate-200 dark:border-slate-700",
    brand: "bg-indigo-50 dark:bg-indigo-900/20 text-brand border-indigo-100 dark:border-indigo-900/30",
  }
};