/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
      extend: {
          fontFamily: {
              sans: ["Roboto", "sans-serif"],
              secondary: ["\"Exo 2 Variable\"", "sans-serif"],
          },
          fontSize: {
              "2xs": ".625rem",
          },
          colors: {
            primary: {
                '50': '#f3f7f8',
                '100': '#e0e9ed',
                '200': '#c4d5dd',
                '300': '#9bb8c5',
                '400': '#6b93a5',
                '500': '#4b7083',
                '600': '#456375',
                '700': '#3c5362',
                '800': '#374753',
                '900': '#313e48',
                '950': '#1d272f',
            },
            white: "#f5f2f1",
            
            // neutral: {
            //     50: "#F7F7F7",
            //     100: "#E1E1E1",
            //     200: "#CFCFCF",
            //     300: "#B1B1B1",
            //     400: "#9E9E9E",
            //     500: "#7E7E7E",
            //     600: "#626262",
            //     700: "#515151",
            //     800: "#3B3B3B",
            //     900: "#222222",
            // },
            //white: "neutral.50",
            black: "neutral.900",
            "primary-yellow": {
                50: "#FFFBEA",
                100: "#FFF3C4",
                200: "#FCE588",
                300: "#FADB5F",
                400: "#F7C948",
                500: "#F0B429",
                600: "#DE911D",
                700: "#CB6E17",
                800: "#B44D12",
                900: "#8D2B0B",
            },

            "primary-blue": {
                50: "#E3F8FF",
                100: "#B3ECFF",
                200: "#81DEFD",
                300: "#5ED0FA",
                400: "#40C3F7",
                500: "#2BB0ED",
                600: "#1992D4",
                700: "#127FBF",
                800: "#0B69A3",
                900: "#035388",
            },

            

            "support-red": {
                50: "#FFE3E3",
                100: "#FFBDBD",
                200: "#FF9B9B",
                300: "#F86A6A",
                400: "#EF4E4E",
                500: "#E12D39",
                600: "#CF1124",
                700: "#AB091E",
                800: "#8A041A",
                900: "#610316",
            },

            "support-teal": {
                50: "#EFFCF6",
                100: "#C6F7E2",
                200: "#8EEDC7",
                300: "#65D6AD",
                400: "#3EBD93",
                500: "#27AB83",
                600: "#199473",
                700: "#147D64",
                800: "#0C6B58",
                900: "#014D40",
            },
          },
      },
  },
  plugins: [],
};