import type { Config } from 'tailwindcss'

export default {
  content: ['./app/**/*.{js,vue,ts}', './layers/**/*.{js,vue,ts}'],
  theme: {
    extend: {
      screens: {
        xs: '360px', // Mobile: 360px ~ 767px
        sm: '768px', // Tablet: 768px ~ 1023px
        md: '1024px', // PC: 1024px ~ 1439px
        lg: '1440px', // Large PC: 1440px+
      },
      spacing: {},
      colors: {
        'theme-foreground': 'var(--foreground)',
        'theme-foreground-10': 'var(--foreground-10)',

        'theme-foreground-reversal': 'var(--foreground-reversal)',
        'theme-foreground-reversal-10': 'var(--foreground-reversal-10)',
        'theme-foreground-reversal-30': 'var(--foreground-reversal-30)',
        'theme-foreground-reversal-40': 'var(--foreground-reversal-40)',
        'theme-foreground-reversal-70': 'var(--foreground-reversal-70)',

        // "theme-primary": "var(--light-primary)",
        // "theme-secondary": "var(--light-secondary)",
        // "theme-surface": "var(--light-surface)",
        // "theme-text-secondary": "var(--light-textSecondary)",
        // "theme-accent": "var(--light-accent)",
        // "theme-border": "var(--light-border)",
      },
    },
  },
} satisfies Config