import plugin from 'tailwindcss/plugin';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,ts}'],
  theme: {
    extend: {
      colors: {
        'fa-navy':      '#1A1F5C',
        'fa-navy-deep': '#0F1340',
        'fa-blue':      '#6B8FD4',
        'fa-blue-light':'#A8C0E8',
        'fa-blue-pale': '#EEF3FB',
        'fa-off-white': '#F7F8FC',
        'fa-mid':       '#6B7280',
      },
      fontFamily: {
        syne: ['Syne', 'sans-serif'],
        dm:   ['DM Sans', 'sans-serif'],
      },
      screens: {
        'xs': '480px',
        'sm': '720px',
        'md': '900px',
        'lg': '1100px',
        'xl': '1280px',
        '2xl': '1500px',
      },
      letterSpacing: {
        'widest2': '2px',
        'widest3': '3px',
      },
    },
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.px-content': {
          paddingLeft:  'var(--content-pad)',
          paddingRight: 'var(--content-pad)',
        },
      });
    }),
  ],
};