/** @type {import('tailwindcss').Config} */
const additionalSizes = [
  112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 272, 288, 304, 320, 336,
  432, 480,
];

const newSizes: { [key: number]: string } = {};
for (const size of additionalSizes) {
  newSizes[size] = `${size / 4}rem`;
}

export default {
  darkMode: "class",
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  plugins: [],
  theme: {
    extend: {
      spacing: newSizes,
      fontFamily: {
        heading: ["houschka-pro", "sans-serif"],
        body: ["forma-djr-micro", "sans-serif"],
      },
      colors: {
        primary: { base: "#287CEB", middle: "#7DACEB", light: "#C9DAF2" },
        secondary: { base: "#042244", middle: "#7790AE", light: "#D1DEEC" },
        accent1: { base: "#27C988", middle: "#97E6C6", light: "#DFF5EC" },
        accent2: { base: "#ECA414", middle: "#F5D89D", light: "#F9EFDA" },
        accent3: { base: "#D24E39", middle: "#E6A197", light: "#F5DDD9" },
        accent4: { base: "#984BF1", middle: "#B589E8", light: "#DECDF2" },
      },
      transitionProperty: {
        width: "width",
      },
    },
  },
};