module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
  theme: {
    extend: {
      colors: {
        navy: {
          50: '#eef1f8',
          100: '#d9dff0',
          200: '#b3bfe1',
          300: '#8d9fd2',
          400: '#677fc3',
          500: '#4a63a8',
          600: '#2a3f6b',
          700: '#1e2d50',
          800: '#141e38',
          900: '#0f1528',
          950: '#0a0e1a',
        },
        teal: {
          50: '#effefb',
          100: '#c7fff4',
          200: '#90ffe9',
          300: '#51f7d9',
          400: '#1de4c3',
          500: '#05c9aa',
          600: '#057a6c',
          700: '#04685e',
          800: '#07574f',
          900: '#0d544c',
          950: '#003330',
        },
        coral: {
          50: '#fff7ed',
          400: '#fb923c',
          500: '#c2410c',
          600: '#9a3412',
          700: '#7c2d12',
        },
        warm: {
          50: '#fafaf9',
          100: '#f5f5f4',
          200: '#e7e5e4',
          300: '#d6d3d1',
          400: '#a8a29e',
          500: '#78716c',
          600: '#57534e',
          700: '#44403c',
          800: '#292524',
          900: '#1c1917',
        },
      },
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'indeterminate-progress': {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(400%)' },
        },
      },
      animation: {
        'fade-in': 'fade-in 0.2s ease-out forwards',
        'indeterminate-progress': 'indeterminate-progress 1.1s ease-in-out infinite',
      },
    },
  },
  plugins: [],
};