import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,vue,ts}',
    './layers/**/*.{js,vue,ts}',
    './layers/assets/css/**/*.css',
  ],
  theme: {
    extend: {
      screens: {
        xxs: '0px', // 0px+
        xs: '360px', // Mobile: 360px+
        sm: '768px', // Tablet: 768px+
        md: '1024px', // PC: 1024px+
        lg: '1440px', // Large PC: 1440px+
        xl: '1920px', // Extra Large PC: 1920px+
      },
      colors: {
        'theme-foreground': 'var(--foreground)',
        'theme-foreground-10': 'var(--foreground-10)',

        'theme-foreground-reversal': 'var(--foreground-reversal)',
        'theme-foreground-reversal-4': 'var(--foreground-reversal-4)',
        'theme-foreground-reversal-6': 'var(--foreground-reversal-6)',
        'theme-foreground-reversal-8': 'var(--foreground-reversal-8)',
        'theme-foreground-reversal-10': 'var(--foreground-reversal-10)',
        'theme-foreground-reversal-15': 'var(--foreground-reversal-15)',

        'theme-foreground-gray-750': 'var(--foreground-gray-750)',
        'theme-foreground-gray-500': 'var(--foreground-gray-500)',
      },
      transitionTimingFunction: {
        spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
      },
    },
  },
} satisfies Config