/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./src/**/*.{html,ts}",
  ],
  safelist: [
    'w-16',
    'w-64',
    'ml-16',
    'ml-64',
    '-translate-x-full',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'ui-sans-serif', 'system-ui', '-apple-system', 'Helvetica Neue', 'Arial', 'sans-serif'],
      },
      fontSize: {
        // Tooltips / Helper Text
        '2xs': ['0.6875rem', { lineHeight: '1rem' }],      // 11px
        'xs':  ['0.75rem',   { lineHeight: '1rem' }],      // 12px  Labels/Captions
        // Body / Buttons / Navigation
        'sm':  ['0.875rem',  { lineHeight: '1.375rem' }],  // 14px  Desktop standard
        'base':['0.9375rem', { lineHeight: '1.5rem' }],    // 15px  Mobile Body
        // Headings
        'h3':  ['1.125rem',  { lineHeight: '1.75rem' }],   // 18px
        'h2':  ['1.375rem',  { lineHeight: '2rem' }],      // 22px
        'h1':  ['1.75rem',   { lineHeight: '2.25rem' }],   // 28px  Desktop
      },
    },
  },
  plugins: [],
}