import { createSystem, defineConfig, defaultConfig, defineTokens, defineTextStyles } from "@chakra-ui/react"

const tokens = defineTokens({
  colors: {
    emerald: {
      50: { value: "#ecfdf5" },
      100: { value: "#d1fae5" },
      200: { value: "#a7f3d0" },
      300: { value: "#6ee7b7" },
      400: { value: "#34d399" },
      500: { value: "#3BA776" }, // Primary emerald
      600: { value: "#059669" },
      700: { value: "#047857" },
      800: { value: "#065f46" },
      900: { value: "#064e3b" },
      950: { value: "#022c22" },
    },
    neutral: {
      50: { value: "#fafafa" },
      100: { value: "#f5f5f5" },
      200: { value: "#e5e5e5" },
      300: { value: "#d4d4d4" },
      400: { value: "#a3a3a3" },
      500: { value: "#737373" },
      600: { value: "#525252" },
      700: { value: "#404040" },
      800: { value: "#262626" },
      900: { value: "#171717" },
      950: { value: "#0a0a0a" },
    },
  },
  fonts: {
    heading: { value: "'Manrope', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" },
    body: { value: "'Work Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" },
  },
  shadows: {
    soft: { value: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
    medium: { value: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
    large: { value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
    emerald: { value: "0 10px 15px -3px rgba(59, 167, 118, 0.1), 0 4px 6px -2px rgba(59, 167, 118, 0.05)" },
  },
});

const textStyles = defineTextStyles({
  hero: {
    description: "Large hero headline",
    value: {
      fontFamily: "heading",
      fontWeight: "800",
      fontSize: { base: "3xl", md: "5xl", lg: "6xl" },
      lineHeight: "shorter",
      letterSpacing: "tight",
    },
  },
  subhero: {
    description: "Hero supporting text",
    value: {
      fontFamily: "body",
      fontWeight: "400",
      fontSize: { base: "lg", md: "xl" },
      lineHeight: "tall",
    },
  },
  sectionHeading: {
    description: "Section headings",
    value: {
      fontFamily: "heading",
      fontWeight: "700",
      fontSize: { base: "2xl", md: "3xl", lg: "4xl" },
      lineHeight: "short",
      letterSpacing: "tight",
    },
  },
  featureTitle: {
    description: "Feature titles",
    value: {
      fontFamily: "heading",
      fontWeight: "600",
      fontSize: { base: "lg", md: "xl" },
      lineHeight: "short",
    },
  },
  body: {
    description: "Body text",
    value: {
      fontFamily: "body",
      fontWeight: "400",
      fontSize: { base: "md", md: "lg" },
      lineHeight: "tall",
    },
  },
  small: {
    description: "Small text",
    value: {
      fontFamily: "body",
      fontWeight: "400",
      fontSize: "sm",
      lineHeight: "moderate",
    },
  },
});

export const config = defineConfig({
  theme: {
    tokens,
    textStyles,
  },
});

export default createSystem(defaultConfig, config);