const withMT = require("@material-tailwind/react/utils/withMT");
const colors = require("tailwindcss/colors");

module.exports = withMT({
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        sky: colors.sky,
        green: colors.green,
        slate: colors.slate,
        orange: colors.orange, // falls du z. B. text-orange-300 brauchst
        // Zusätzliche Farben
        arcticBlue: {
          50: '#f2f9fd',
          100: '#e6f3fb',
          200: '#cce6f7',
          300: '#99ceef',
          400: '#66b6e7',
          500: '#339ede',
          600: '#1f86c3',
          700: '#16699b',
          800: '#0f4b6f',
          900: '#082d43',
        },
        roseQuartz: {
          50: '#fdf7f9',
          100: '#faeff3',
          200: '#f5dfe6',
          300: '#ecbfd0',
          400: '#e08dad',
          500: '#d45b89',
          600: '#b94771',
          700: '#8e3556',
          800: '#63233b',
          900: '#391324',
        },
        citrusPunch: {
          50: '#fffdf6',
          100: '#fffbe9',
          200: '#fff5cc',
          300: '#ffeb99',
          400: '#ffe066',
          500: '#ffd633',
          600: '#e6bd00',
          700: '#b39300',
          800: '#806900',
          900: '#4d3f00',
        },
        midnightPlum: {
          50: '#faf7fb',
          100: '#f4ecf6',
          200: '#e4cfee',
          300: '#cba0de',
          400: '#a869cc',
          500: '#8431b9',
          600: '#6d299b',
          700: '#521f74',
          800: '#38154d',
          900: '#1f0b28',
        },
        sandstone: {
          50: '#fbf9f7',
          100: '#f6f2ee',
          200: '#ece3da',
          300: '#d8c6b3',
          400: '#c0a27f',
          500: '#a87e4b',
          600: '#906a3e',
          700: '#6b4f2f',
          800: '#47341f',
          900: '#241a10',
        },
        emeraldMist: {
          50: '#f3faf7',
          100: '#e7f6ef',
          200: '#ccecdc',
          300: '#9ddabf',
          400: '#6ec8a3',
          500: '#3fb586',
          600: '#359771',
          700: '#2a765a',
          800: '#1f5442',
          900: '#13332a',
        },
        velvetRed: {
          50: '#fdf7f7',
          100: '#faeeee',
          200: '#f4d6d6',
          300: '#e7a8a8',
          400: '#d56666',
          500: '#c32424',
          600: '#a61e1e',
          700: '#801717',
          800: '#590f0f',
          900: '#330808',
        },
        stormGrey: {
          50: '#f7f8fa',
          100: '#eef0f3',
          200: '#d9dce2',
          300: '#b6bbc8',
          400: '#8b91a4',
          500: '#606780',
          600: '#4f556b',
          700: '#3e4456',
          800: '#2c313f',
          900: '#1b1e29',
        },
        neonLime: {
          50: '#f7ffe6',
          100: '#eeffc9',
          200: '#dbff96',
          300: '#c2ff52',
          400: '#a8ff0e',
          500: '#8de600',
          600: '#74bf00',
          700: '#5b9900',
          800: '#426f00',
          900: '#294600',
        },
        skyMauve: {
          50: '#faf8fc',
          100: '#f4f0f9',
          200: '#e5dbf2',
          300: '#c9b2e6',
          400: '#a27dd4',
          500: '#7b48c2',
          600: '#633aa0',
          700: '#4b2b7c',
          800: '#341d58',
          900: '#1e1035',
        }
      },
    },
  },
  plugins: [],
});