/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: "0", opacity: 0 },
          to: { height: "var(--radix-accordion-content-height)", opacity: 1 },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)", opacity: 1 },
          to: { height: "0", opacity: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.4s ease-in-out",
        "accordion-up": "accordion-up 0.4s ease-in-out",
      },
      maxWidth: {
        72.75: "291px",
      },
      lineHeight: {
        4.5: "18px",
      },
      height: {
        13.5: "54px",
        15: "60px",
      },
      padding: {
        1.25: "5px",
        4.5: "18px",
        5.5: "22px",
      },
      fontFamily: {
        body: ["Manrope", "sans-serif"],
        inter: ["Inter", "sans-serif"],
        manrope: "Manrope",
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          10: "#DCF2EF",
          25: "#F4FAFF",
          50: "#E2F1FF",
          100: "#CCE5FE",
          200: "#AAD4FE",
          300: "#80BEFD",
          500: "#007DFC",
          600: "#0068D2",
          700: "#0053A8",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        hover: {
          DEFAULT: "hsl(var(--color-hover))",
          foreground: "hsl(var(--color-hover-foreground))",
        },
        mono: {
          10: "#F4FBFA",
          25: "#FCFCFD",
          50: "#F9FAFB",
          100: "#F2F4F7",
          200: "#EAECF0",
          400: "#98A2B3",
          500: "#667085",
          600: "#475467",
          700: "#344054",
          800: "#1D2939",
          900: "#101828",
        },
        error: {
          50: "#FEF3F2",
          100: "#FBD2CF",
          200: "#FECDCA",
          300: "#FDA29B",
          500: "#D92D20",
          600: "#C8392F",
          700: "#B42318",
          800: "#912018",
        },
        gray: {
          100: "#F2F4F7",
          200: "#EAECF0",
          400: "#98A2B3",
          500: "#667085",
          600: "#475467",
          700: "#344054",
        },
        warning: {
          50: "#FFFAEB",
          200: "#FEDF89",
          700: "#B54708",
        },
        success: {
          50: "#ECFDF3",
          200: "#ABEFC6",
          500: "#17B26A",
          700: "#067647",
        },
        green: {
          500: "#2CAFA4",
        },
        grayBlue: {
          50: "#F8F9FC",
          200: "#D5D9EB",
          700: "#363F72",
        },
        blueLight: {
          50: "#F0F9FF",
          200: "#B9E6FE",
          700: "#026AA2",
        },
        blue: {
          50: "#EFF8FF",
          200: "#B2DDFF",
          700: "#175CD3",
        },
        indigo: {
          50: "#EEF4FF",
          200: "#C7D7FE",
          700: "#3538CD",
        },
        purple: {
          50: "#F4F3FF",
          200: "#D9D6FE",
          700: "#5925DC",
        },
        pink: {
          50: "#FDF2FA",
          200: "#FCCEEE",
          700: "#C11574",
        },
        orange: {
          50: "#FEF6EE",
          200: "#F9DBAF",
          700: "#B93815",
        },
        zinc: {
          900: "#3A3A3A",
          700: "#565656",
          500: "#6A6A6A",
          300: "#686868",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      boxShadow: {
        "3xl": "0px 0px 24px 0px rgba(0, 0, 0, 0.05)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};
