import { defineConfig } from 'windicss/helpers'
const typography = require('windicss/plugin/typography')
const lineClamp = require('windicss/plugin/line-clamp')

export default defineConfig({
  darkMode: 'class', // or 'media'
  theme: {
    container: {
      center: true,
    },
    screens: {
      sm: '320px',
      tiny: '576px',
      md: '768px',
      lg: '930px',
      xl: '1024px',
      '2xl': '1280px',
      '3xl': '1536px'
    },
    extend: {
      colors: {
        brand: {
          /** 品牌色/主色 */
          0: '#1460F3',
          /** 品牌色/H1 */
          1: '#18191B',
          /** 品牌色/H2 */
          2: '#43474D',
          /** 品牌色/H3 */
          3: '#6A6F77',
          /** 品牌色/H4 */
          4: '#AAAEB2',
          /** 品牌色/H5 */
          5: '#BABABA'
        }
      },
      lineHeight: {
        'snug': '1.33',
        'normal': '1.50',
        'relaxed': '1.56'
      },
      fontSize: {
        'xs': ['14px', '18px'],
        'sm': ['16px', '24px'],
        'tiny': ['18px', '28px'],
        'base': ['24px', '32px'],
        'lg': ['30px', '40px'],
        'xl': ['36px', '48px'],
        '2xl': ['50px', '64px']
      }
    }
  },
  plugins: [typography, lineClamp]
})