export const colors = {
  // Primary Colors
  primary: {
    50: "#f0fdf4",
    100: "#dcfce7",
    200: "#bbf7d0",
    300: "#86efac",
    400: "#4ade80",
    500: "#22c55e",
    600: "#16a34a",
    700: "#15803d",
    800: "#166534",
    900: "#14532d",
    950: "#052e16",
  },

  // Secondary Colors (Blue)
  secondary: {
    50: "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
    950: "#172554",
  },

  // Neutral Colors
  neutral: {
    50: "#fafafa",
    100: "#f5f5f5",
    200: "#e5e5e5",
    300: "#d4d4d4",
    400: "#a3a3a3",
    500: "#737373",
    600: "#525252",
    700: "#404040",
    800: "#262626",
    900: "#171717",
    950: "#0a0a0a",
  },

  // Status Colors
  success: {
    50: "#f0fdf4",
    100: "#dcfce7",
    200: "#bbf7d0",
    300: "#86efac",
    400: "#4ade80",
    500: "#22c55e",
    600: "#16a34a",
    700: "#15803d",
    800: "#166534",
    900: "#14532d",
  },

  error: {
    50: "#fef2f2",
    100: "#fee2e2",
    200: "#fecaca",
    300: "#fca5a5",
    400: "#f87171",
    500: "#ef4444",
    600: "#dc2626",
    700: "#b91c1c",
    800: "#991b1b",
    900: "#7f1d1d",
  },

  warning: {
    50: "#fffbeb",
    100: "#fef3c7",
    200: "#fde68a",
    300: "#fcd34d",
    400: "#fbbf24",
    500: "#f59e0b",
    600: "#d97706",
    700: "#b45309",
    800: "#92400e",
    900: "#78350f",
  },

  info: {
    50: "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
  },

  // Teal Colors (Brand accent)
  teal: {
    50: "#f0fdfa",
    100: "#ccfbf1",
    200: "#99f6e4",
    300: "#5eead4",
    400: "#2dd4bf",
    500: "#14b8a6",
    600: "#0d9488",
    700: "#0f766e",
    800: "#115e59",
    900: "#134e4a",
  },

  // Dark Colors (Brand dark)
  dark: {
    50: "#f8fafc",
    100: "#f1f5f9",
    200: "#e2e8f0",
    300: "#cbd5e1",
    400: "#94a3b8",
    500: "#64748b",
    600: "#475569",
    700: "#334155",
    800: "#1e293b",
    900: "#0f172a",
    950: "#020617",
  },

  // Login specific colors
  login: {
    primary: "#3aea83",
    darkStart: "#464861",
    darkEnd: "#111628",
  },
};

export const typography = {
  fontFamily: {
    sans: ["Vazirmatn", "Inter", "ui-sans-serif", "system-ui", "sans-serif"],
    mono: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
  },

  fontSize: {
    xs: ["0.75rem", { lineHeight: "1rem" }],
    sm: ["0.875rem", { lineHeight: "1.25rem" }],
    base: ["1rem", { lineHeight: "1.5rem" }],
    lg: ["1.125rem", { lineHeight: "1.75rem" }],
    xl: ["1.25rem", { lineHeight: "1.75rem" }],
    "2xl": ["1.5rem", { lineHeight: "2rem" }],
    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
    "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
    "5xl": ["3rem", { lineHeight: "1" }],
    "6xl": ["3.75rem", { lineHeight: "1" }],
  },

  fontWeight: {
    thin: "100",
    extralight: "200",
    light: "300",
    normal: "400",
    medium: "500",
    semibold: "600",
    bold: "700",
    extrabold: "800",
    black: "900",
  },
};

export const spacing = {
  px: "1px",
  0: "0px",
  0.5: "0.125rem",
  1: "0.25rem",
  1.5: "0.375rem",
  2: "0.5rem",
  2.5: "0.625rem",
  3: "0.75rem",
  3.5: "0.875rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  7: "1.75rem",
  8: "2rem",
  9: "2.25rem",
  10: "2.5rem",
  11: "2.75rem",
  12: "3rem",
  14: "3.5rem",
  16: "4rem",
  20: "5rem",
  24: "6rem",
  28: "7rem",
  32: "8rem",
  36: "9rem",
  40: "10rem",
  44: "11rem",
  48: "12rem",
  52: "13rem",
  56: "14rem",
  60: "15rem",
  64: "16rem",
  72: "18rem",
  80: "20rem",
  96: "24rem",
};

export const borderRadius = {
  none: "0px",
  sm: "0.125rem",
  DEFAULT: "0.25rem",
  md: "0.375rem",
  lg: "0.5rem",
  xl: "0.75rem",
  "2xl": "1rem",
  "3xl": "1.5rem",
  full: "9999px",
};

export const shadows = {
  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
  DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
  none: "0 0 #0000",
};

export const animations = {
  spin: "spin 1s linear infinite",
  ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
  pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
  bounce: "bounce 1s infinite",
  fadeIn: "fadeIn 0.3s ease-in-out",
  fadeOut: "fadeOut 0.3s ease-in-out",
  slideInRight: "slideInRight 0.3s ease-out",
  slideInLeft: "slideInLeft 0.3s ease-out",
  slideUp: "slideUp 0.3s ease-out",
  slideDown: "slideDown 0.3s ease-out",
};

export const breakpoints = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
};

export const zIndex = {
  auto: "auto",
  0: "0",
  10: "10",
  20: "20",
  30: "30",
  40: "40",
  50: "50",
  dropdown: "1000",
  sticky: "1020",
  fixed: "1030",
  modal: "1040",
  popover: "1050",
  tooltip: "1060",
  toast: "1070",
};

// Component-specific design tokens
export const components = {
  button: {
    sizes: {
      sm: {
        height: "2rem",
        padding: "0 0.75rem",
        fontSize: "0.875rem",
      },
      md: {
        height: "2.5rem",
        padding: "0 1rem",
        fontSize: "0.875rem",
      },
      lg: {
        height: "3rem",
        padding: "0 1.5rem",
        fontSize: "1rem",
      },
    },
    variants: {
      primary: {
        background: colors.primary[500],
        color: "white",
        hover: colors.primary[600],
        active: colors.primary[700],
      },
      secondary: {
        background: colors.secondary[500],
        color: "white",
        hover: colors.secondary[600],
        active: colors.secondary[700],
      },
      teal: {
        background: colors.teal[500],
        color: colors.dark[900],
        hover: colors.teal[600],
        active: colors.teal[700],
      },
      outline: {
        background: "transparent",
        color: colors.neutral[700],
        border: colors.neutral[300],
        hover: colors.neutral[50],
      },
      ghost: {
        background: "transparent",
        color: colors.neutral[700],
        hover: colors.neutral[100],
      },
    },
  },

  input: {
    sizes: {
      sm: {
        height: "2rem",
        padding: "0 0.75rem",
        fontSize: "0.875rem",
      },
      md: {
        height: "2.5rem",
        padding: "0 0.75rem",
        fontSize: "0.875rem",
      },
      lg: {
        height: "3rem",
        padding: "0 1rem",
        fontSize: "1rem",
      },
    },
    states: {
      default: {
        border: colors.neutral[300],
        background: "white",
      },
      focus: {
        border: colors.primary[500],
        boxShadow: `0 0 0 3px ${colors.primary[100]}`,
      },
      error: {
        border: colors.error[500],
        boxShadow: `0 0 0 3px ${colors.error[100]}`,
      },
      disabled: {
        background: colors.neutral[100],
        color: colors.neutral[400],
        cursor: "not-allowed",
      },
    },
  },

  card: {
    default: {
      background: "white",
      border: colors.neutral[200],
      borderRadius: borderRadius.lg,
      boxShadow: shadows.sm,
      padding: spacing[6],
    },
    hover: {
      boxShadow: shadows.md,
    },
  },
};

// RTL-specific adjustments
export const rtl = {
  marginRight: "marginLeft",
  marginLeft: "marginRight",
  paddingRight: "paddingLeft",
  paddingLeft: "paddingRight",
  right: "left",
  left: "right",
  borderRightWidth: "borderLeftWidth",
  borderLeftWidth: "borderRightWidth",
  borderRightColor: "borderLeftColor",
  borderLeftColor: "borderRightColor",
};

// Theme variants
export const themes = {
  light: {
    background: colors.neutral[50],
    foreground: colors.neutral[900],
    card: "white",
    cardForeground: colors.neutral[900],
    popover: "white",
    popoverForeground: colors.neutral[900],
    primary: colors.primary[500],
    primaryForeground: "white",
    secondary: colors.neutral[100],
    secondaryForeground: colors.neutral[900],
    muted: colors.neutral[100],
    mutedForeground: colors.neutral[500],
    accent: colors.neutral[100],
    accentForeground: colors.neutral[900],
    destructive: colors.error[500],
    destructiveForeground: "white",
    border: colors.neutral[200],
    input: colors.neutral[200],
    ring: colors.primary[500],
    teal: colors.teal[500],
    tealForeground: colors.dark[900],
    dark: colors.dark[900],
    darkForeground: "white",
    loginPrimary: colors.login.primary,
    loginDarkStart: colors.login.darkStart,
    loginDarkEnd: colors.login.darkEnd,
  },

  dark: {
    background: colors.dark[950],
    foreground: colors.neutral[50],
    card: colors.dark[900],
    cardForeground: colors.neutral[50],
    popover: colors.dark[900],
    popoverForeground: colors.neutral[50],
    primary: colors.primary[400],
    primaryForeground: colors.neutral[900],
    secondary: colors.neutral[800],
    secondaryForeground: colors.neutral[50],
    muted: colors.neutral[800],
    mutedForeground: colors.neutral[400],
    accent: colors.neutral[800],
    accentForeground: colors.neutral[50],
    destructive: colors.error[400],
    destructiveForeground: colors.neutral[50],
    border: colors.neutral[800],
    input: colors.neutral[800],
    ring: colors.primary[400],
    teal: colors.teal[400],
    tealForeground: colors.dark[50],
    dark: colors.dark[800],
    darkForeground: colors.neutral[50],
    loginPrimary: colors.login.primary,
    loginDarkStart: colors.login.darkStart,
    loginDarkEnd: colors.login.darkEnd,
  },
};