const defaultTheme = require('tailwindcss/defaultTheme')

const round = (num) =>
  num
    .toFixed(7)
    .replace(/(\.[0-9]+?)0+$/, '$1')
    .replace(/\.0$/, '')
const rem = (px) => `${round(px / 16)}rem`
const em = (px, base) => `${round(px / base)}em`

const headerFont = {
  fontFamily: 'Oswald',
  fontWeight: 'normal',
};

module.exports = {
  purge: [
    './**/*.php'
  ],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Open Sans"', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        links: 'hsl(205, 50%, 50%)',
        footer: 'hsl(205, 50%, 60%)',
        footerLinks: 'hsl(205, 33%, 80%)',
      },
      screens: {
        ti: { min: '359px' },
        print: { raw: 'print' },
      },
    },
    typography: (theme) => ({
      default: {
        css: {
          h1: { ...headerFont, fontSize: defaultTheme.fontSize['4xl'], lineHeight: '0.7778em' },
          h2: { ...headerFont, fontSize: defaultTheme.fontSize['3xl'], lineHeight: '0.7778em' },
          h3: { ...headerFont, fontSize: defaultTheme.fontSize['2xl'], lineHeight: '0.9333em' },
          h4: { ...headerFont, fontSize: defaultTheme.fontSize['xl'], lineHeight: '1.1667em' },
          a: {
            textDecoration: 'none',
            color: theme('colors.links'),
          },
          img: {
            marginTop: rem(16),
            marginBottom: rem(16),
          }
        }
      },
    }),
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
  ],
  future: {
    removeDeprecatedGapUtilities: true,
  }
}