User/src/theme/index.ts

export const colors = {
  primary: {
    main: "#3B82F6",
    light: "#60A5FA",
    dark: "#2563EB",
    contrast: "#FFFFFF",
  },
  secondary: {
    main: "#60A5FA",
    light: "#93C5FD",
    dark: "#3B82F6",
    contrast: "#FFFFFF",
  },
  accent: {
    cta: "#F97316",
    orange: "#F97316",
    pink: "#EC4899",
    cyan: "#06B6D4",
    purple: "#8B5CF6",
  },
  background: {
    primary: "#F1F5F9", // Slate 100
    secondary: "#E2E8F0", // Slate 200 (Darker for contrast)
    tertiary: "#CBD5E1", // Slate 300
    card: "#FFFFFF",
    gradient: ["#F8FAFC", "#E2E8F0"] as const,
  },
  text: {
    primary: "#1E293B",
    secondary: "#475569",
    tertiary: "#94A3B8",
    inverse: "#FFFFFF",
  },
  border: {
    light: "#E2E8F0",
    medium: "#CBD5E1",
    accent: "rgba(59, 130, 246, 0.3)",
  },
  status: {
    success: "#10B981",
    warning: "#F59E0B",
    error: "#EF4444",
    info: "#3B82F6",
  },
  priority: {
    critical: "#EF4444",
    high: "#F97316",
    medium: "#F59E0B",
    low: "#10B981",
  },
  glass: {
    background: "rgba(255, 255, 255, 0.7)",
    border: "rgba(255, 255, 255, 0.5)",
  },
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
};

export const borderRadius = {
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  full: 9999,
};

export const typography = {
  h1: {
    fontSize: 32,
    fontWeight: "700" as const,
    lineHeight: 40,
  },
  h2: {
    fontSize: 24,
    fontWeight: "600" as const,
    lineHeight: 32,
  },
  h3: {
    fontSize: 20,
    fontWeight: "600" as const,
    lineHeight: 28,
  },
  body: {
    fontSize: 16,
    fontWeight: "400" as const,
    lineHeight: 24,
  },
  bodySmall: {
    fontSize: 14,
    fontWeight: "400" as const,
    lineHeight: 20,
  },
  caption: {
    fontSize: 12,
    fontWeight: "400" as const,
    lineHeight: 16,
  },
  button: {
    fontSize: 16,
    fontWeight: "600" as const,
    lineHeight: 24,
  },
};

export const shadows = {
  sm: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  md: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 4,
  },
  lg: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.2,
    shadowRadius: 16,
    elevation: 8,
  },
  glow: {
    shadowColor: "#6366F1",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.4,
    shadowRadius: 20,
    elevation: 10,
  },
};