import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  // theme: {
  //   extend: {
  //     backgroundImage: {
  //       "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
  //       "gradient-conic":
  //         "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
  //     },
  //     gridTemplateRows: {
  //       // Simple 8 row grid
  //       "8": "repeat(8, minmax(0, 1fr))",
  //       "11": "repeat(11, minmax(0, 1fr))",
  //     },
  //   },
  // },
  // plugins: [require("@tailwindcss/typography"), require("daisyui")],
  // daisyui: {
  //   themes: [
  //     "winter",
  //     {
  //       cupcake: {
  //         ...require("daisyui/src/theming/themes")["cupcake"],
  //         "--rounded-btn": "0.5rem",
  //       },
  //     },
  //   ],
  // },
  // theme: {
  //   extend: [],
  // },
  presets: [
    {
      theme: {
        screens: {
          sm: "640px",
          md: "768px",
          lg: "1024px",
          xl: "1140px",
        },
        colors: {
          current: "currentColor",
          transparent: "transparent",
          black: "#000",
          white: "#fff",
          gray: {
            50: "#f9fafb",
            100: "#f3f4f6",
            200: "#e5e7eb",
            300: "#d1d5db",
            400: "#9ca3af",
            500: "#6b7280",
            600: "#4b5563",
            700: "#374151",
            800: "#1f2937",
            900: "#111827",
          },
          red: {
            50: "#fef2f2",
            100: "#fee2e2",
            200: "#fecaca",
            300: "#fca5a5",
            400: "#f87171",
            500: "#ef4444",
            600: "#dc2626",
            700: "#b91c1c",
            800: "#991b1b",
            900: "#7f1d1d",
          },
          yellow: {
            50: "#fffbeb",
            100: "#fef3c7",
            200: "#fde68a",
            300: "#fcd34d",
            400: "#fbbf24",
            500: "#f59e0b",
            600: "#d97706",
            700: "#b45309",
            800: "#92400e",
            900: "#78350f",
          },
          green: {
            50: "#ecfdf5",
            100: "#d1fae5",
            200: "#a7f3d0",
            300: "#6ee7b7",
            400: "#34d399",
            500: "#10b981",
            600: "#059669",
            700: "#047857",
            800: "#065f46",
            900: "#064e3b",
          },
          blue: {
            50: "#eff6ff",
            100: "#dbeafe",
            200: "#bfdbfe",
            300: "#93c5fd",
            400: "#60a5fa",
            500: "#3b82f6",
            600: "#2563eb",
            700: "#1d4ed8",
            800: "#1e40af",
            900: "#1e3a8a",
          },
          indigo: {
            50: "#eef2ff",
            100: "#e0e7ff",
            200: "#c3dafe",
            300: "#a5b4fc",
            400: "#818cf8",
            500: "#6366f1",
            600: "#4f46e5",
            700: "#4338ca",
            800: "#3730a3",
            900: "#312e81",
          },
          purple: {
            50: "#f5f3ff",
            100: "#ede9fe",
            200: "#ddd6fe",
            300: "#c4b5fd",
            400: "#a78bfa",
            500: "#8b5cf6",
            600: "#7c3aed",
            700: "#6d28d9",
            800: "#5b21b6",
            900: "#4c1d95",
          },
          pink: {
            50: "#fdf2f8",
            100: "#fce7f3",
            200: "#fbcfe8",
            300: "#f9a8d4",
            400: "#f472b6",
            500: "#ec4899",
            600: "#db2777",
            700: "#be185d",
            800: "#9d174d",
            900: "#831843",
          },
        },
        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",
          "32": "8rem",
          "36": "9rem",
          "40": "10rem",
          "44": "11rem",
          "48": "12rem",
          "52": "13rem",
          "56": "14rem",
          "60": "15rem",
          "64": "16rem",
          "72": "18rem",
          "80": "20rem",
          "96": "24rem",
          "128": "32rem",
          "160": "40rem",
          "192": "48rem",
        },
        backgroundColor: ({theme}) => ({
          ...theme("colors"),
          body: "#fff",
        }),
        backgroundPosition: {
          bottom: "bottom",
          center: "center",
          left: "left",
          "left-bottom": "left bottom",
          "left-top": "left top",
          right: "right",
          "right-bottom": "right bottom",
          "right-top": "right top",
          top: "top",
        },
        backgroundSize: {
          auto: "auto",
          cover: "cover",
          contain: "contain",
        },
        borderColor: ({theme}) => ({
          ...theme("colors"),
          DEFAULT: "#e5e7eb",
        }),
        borderRadius: {
          none: "0",
          sm: "0.125rem",
          DEFAULT: "6px",
          lg: "0.5rem",
          xl: "0.75rem",
          "2xl": "1rem",
          "3xl": "1.5rem",
          "4xl": "2rem",
          "6xl": "3rem",
          "12xl": "6rem",
          full: "9999px",
        },
        borderWidth: {
          DEFAULT: "1px",
          "0": "0",
          "2": "2px",
          "4": "4px",
          "8": "8px",
        },
        boxShadow: {
          sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
          DEFAULT:
            "0px 1px 2px rgba(148, 163, 184, 0.35), 0px 6px 6px rgba(203, 213, 225, 0.15)",
          md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
          lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
          xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
          "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
          inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
          none: "none",
        },
        container: {},
        cursor: {
          auto: "auto",
          DEFAULT: "default",
          pointer: "pointer",
          wait: "wait",
          text: "text",
          move: "move",
          "not-allowed": "not-allowed",
        },
        fill: {
          current: "currentColor",
        },
        flex: {
          "1": "1 1 0%",
          auto: "1 1 auto",
          initial: "0 1 auto",
          none: "none",
        },
        flexGrow: {
          "0": "0",
          DEFAULT: "1",
        },
        flexShrink: {
          "0": "0",
          DEFAULT: "1",
        },
        fontFamily: {
          body: '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
          heading:
            '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
          sans: '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
          serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
          mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
        },
        fontSize: {
          xs: "0.75rem",
          sm: "0.875rem",
          base: "1rem",
          lg: "1.125rem",
          xl: "1.25rem",
          "2xl": "1.5rem",
          "3xl": "1.875rem",
          "4xl": "2.25rem",
          "5xl": "3rem",
          "6xl": "3.75rem",
          "7xl": "4.5rem",
          "8xl": "6rem",
          "9xl": "8rem",
        },
        fontWeight: {
          hairline: "100",
          thin: "200",
          light: "300",
          normal: "400",
          medium: "500",
          semibold: "600",
          bold: "700",
          extrabold: "800",
          black: "900",
        },
        height: ({theme}) => ({
          auto: "auto",
          ...theme("spacing"),
          full: "100%",
          screen: "100vh",
        }),
        inset: {
          "0": "0",
          auto: "auto",
          "1/2": "50%",
        },
        letterSpacing: {
          tighter: "-0.05em",
          tight: "-0.025em",
          normal: "0",
          wide: "0.025em",
          wider: "0.05em",
          widest: "0.1em",
        },
        lineHeight: {
          none: "1",
          tight: "1.25",
          snug: "1.375",
          normal: "1.5",
          relaxed: "1.625",
          loose: "2",
        },
        listStyleType: {
          none: "none",
          disc: "disc",
          decimal: "decimal",
        },
        margin: ({theme}) => ({
          auto: "auto",
          ...theme("spacing"),
          // ...negative(theme("spacing")),
          "for-radius": "5.4rem",
        }),
        maxHeight: {
          full: "100%",
          screen: "100vh",
        },
        maxWidth: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          full: "100%",
          min: "min-content",
          max: "max-content",
          prose: "65ch",
        },
        minHeight: {
          "0": "0",
          full: "100%",
          screen: "100vh",
        },
        minWidth: {
          "0": "0",
          full: "100%",
        },
        objectPosition: {
          bottom: "bottom",
          center: "center",
          left: "left",
          "left-bottom": "left bottom",
          "left-top": "left top",
          right: "right",
          "right-bottom": "right bottom",
          "right-top": "right top",
          top: "top",
        },
        opacity: {
          "0": "0",
          "5": "0.05",
          "10": "0.1",
          "20": "0.2",
          "25": "0.25",
          "30": "0.3",
          "40": "0.4",
          "50": "0.5",
          "60": "0.6",
          "70": "0.7",
          "75": "0.75",
          "80": "0.8",
          "90": "0.9",
          "95": "0.95",
          "100": "1",
        },
        order: {
          first: "-9999",
          last: "9999",
          none: "0",
          "1": "1",
          "2": "2",
          "3": "3",
          "4": "4",
          "5": "5",
          "6": "6",
          "7": "7",
          "8": "8",
          "9": "9",
          "10": "10",
          "11": "11",
          "12": "12",
        },
        padding: ({theme}) => theme("spacing"),
        placeholderColor: ({theme}) => theme("colors"),
        stroke: {
          current: "currentColor",
        },
        textColor: ({theme}) => ({
          ...theme("colors"),
          body: "#111827",
        }),
        width: ({theme}) => ({
          auto: "auto",
          ...theme("spacing"),
          "1/2": "50%",
          "1/3": "33.333333%",
          "2/3": "66.666667%",
          "1/4": "25%",
          "2/4": "50%",
          "3/4": "75%",
          "1/5": "20%",
          "2/5": "40%",
          "3/5": "60%",
          "4/5": "80%",
          "1/6": "16.666667%",
          "2/6": "33.333333%",
          "3/6": "50%",
          "4/6": "66.666667%",
          "5/6": "83.333333%",
          "1/12": "8.333333%",
          "2/12": "16.666667%",
          "3/12": "25%",
          "4/12": "33.333333%",
          "5/12": "41.666667%",
          "6/12": "50%",
          "7/12": "58.333333%",
          "8/12": "66.666667%",
          "9/12": "75%",
          "10/12": "83.333333%",
          "11/12": "91.666667%",
          full: "100%",
          screen: "100vw",
        }),
        zIndex: {
          auto: "auto",
          "0": "0",
          "10": "10",
          "20": "20",
          "30": "30",
          "40": "40",
          "50": "50",
        },
      },
      variants: {
        accessibility: ["responsive", "focus-within", "focus"],
        alignContent: ["responsive"],
        alignItems: ["responsive"],
        alignSelf: ["responsive"],
        animation: ["responsive"],
        appearance: ["responsive"],
        backgroundAttachment: ["responsive"],
        backgroundClip: ["responsive"],
        backgroundColor: [
          "responsive",
          "dark",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        backgroundImage: ["responsive"],
        backgroundOpacity: [
          "responsive",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        backgroundPosition: ["responsive"],
        backgroundRepeat: ["responsive"],
        backgroundSize: ["responsive"],
        borderCollapse: ["responsive"],
        borderColor: [
          "responsive",
          "dark",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        borderOpacity: [
          "responsive",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        borderRadius: ["responsive"],
        borderStyle: ["responsive"],
        borderWidth: ["responsive"],
        boxShadow: [
          "responsive",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        boxSizing: ["responsive"],
        clear: ["responsive"],
        container: ["responsive"],
        cursor: ["responsive"],
        display: ["responsive"],
        divideColor: ["responsive", "dark"],
        divideOpacity: ["responsive"],
        divideStyle: ["responsive"],
        divideWidth: ["responsive"],
        fill: ["responsive"],
        flex: ["responsive"],
        flexDirection: ["responsive"],
        flexGrow: ["responsive"],
        flexShrink: ["responsive"],
        flexWrap: ["responsive"],
        float: ["responsive"],
        fontFamily: ["responsive"],
        fontSize: ["responsive"],
        fontSmoothing: ["responsive"],
        fontStyle: ["responsive"],
        fontVariantNumeric: ["responsive"],
        fontWeight: ["responsive"],
        gap: ["responsive"],
        gradientColorStops: ["responsive", "dark", "hover", "focus"],
        gridAutoColumns: ["responsive"],
        gridAutoFlow: ["responsive"],
        gridAutoRows: ["responsive"],
        gridColumn: ["responsive"],
        gridColumnEnd: ["responsive"],
        gridColumnStart: ["responsive"],
        gridRow: ["responsive"],
        gridRowEnd: ["responsive"],
        gridRowStart: ["responsive"],
        gridTemplateColumns: ["responsive"],
        gridTemplateRows: ["responsive"],
        height: ["responsive"],
        inset: ["responsive"],
        justifyContent: ["responsive"],
        justifyItems: ["responsive"],
        justifySelf: ["responsive"],
        letterSpacing: ["responsive"],
        lineHeight: ["responsive"],
        listStylePosition: ["responsive"],
        listStyleType: ["responsive"],
        margin: ["responsive"],
        maxHeight: ["responsive"],
        maxWidth: ["responsive"],
        minHeight: ["responsive"],
        minWidth: ["responsive"],
        objectFit: ["responsive"],
        objectPosition: ["responsive"],
        opacity: [
          "responsive",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        order: ["responsive"],
        outline: ["responsive", "focus-within", "focus"],
        overflow: ["responsive"],
        overscrollBehavior: ["responsive"],
        padding: ["responsive"],
        placeContent: ["responsive"],
        placeItems: ["responsive"],
        placeSelf: ["responsive"],
        placeholderColor: ["responsive", "dark", "focus"],
        placeholderOpacity: ["responsive", "focus"],
        pointerEvents: ["responsive"],
        position: ["responsive"],
        resize: ["responsive"],
        ringColor: ["responsive", "dark", "focus-within", "focus"],
        ringOffsetColor: ["responsive", "dark", "focus-within", "focus"],
        ringOffsetWidth: ["responsive", "focus-within", "focus"],
        ringOpacity: ["responsive", "focus-within", "focus"],
        ringWidth: ["responsive", "focus-within", "focus"],
        rotate: ["responsive", "hover", "focus"],
        scale: ["responsive", "hover", "focus"],
        skew: ["responsive", "hover", "focus"],
        space: ["responsive"],
        stroke: ["responsive"],
        strokeWidth: ["responsive"],
        tableLayout: ["responsive"],
        textAlign: ["responsive"],
        textColor: [
          "responsive",
          "dark",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        textDecoration: [
          "responsive",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        textOpacity: [
          "responsive",
          "group-hover",
          "focus-within",
          "hover",
          "focus",
        ],
        textOverflow: ["responsive"],
        textTransform: ["responsive"],
        transform: ["responsive"],
        transformOrigin: ["responsive"],
        transitionDelay: ["responsive"],
        transitionDuration: ["responsive"],
        transitionProperty: ["responsive"],
        transitionTimingFunction: ["responsive"],
        translate: ["responsive", "hover", "focus"],
        userSelect: ["responsive"],
        verticalAlign: ["responsive"],
        visibility: ["responsive"],
        whitespace: ["responsive"],
        width: ["responsive"],
        wordBreak: ["responsive"],
        zIndex: ["responsive", "focus-within", "focus"],
      },
      corePlugins: {},
      plugins: [require("@tailwindcss/typography")],
    },
  ],
};
export default config;