/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  darkMode: 'class',
  corePlugins: { preflight: false },
  theme: {
    extend: {
      colors: {
        'app-bg': 'var(--app-bg)',
        'app-fg': 'var(--app-fg)',
        'card-bg': 'var(--card-bg)',
        'link': 'var(--link-color)',
        'link-hover': 'var(--link-color-hover)',
        'logo-bg': 'var(--app-logo-bg)',
      },
      maxWidth: {
        'app': 'var(--app-maxWidth)',
      },
      borderRadius: {
        'card': 'var(--card-radius)',
      },
      fontFamily: {
        'sans': ['Inter', 'Roboto', 'Arial', 'sans-serif'],
      },
      spacing: {
        'fluid-sm': 'clamp(0.5rem, 2vw, 1rem)',
        'fluid-md': 'clamp(1rem, 3vw, 1.5rem)',
        'fluid-lg': 'clamp(1rem, 4vw, 2rem)',
      },
      screens: {
        'mobile': { 'max': '760px' },
        'sm-dialog': { 'max': '600px' },
        'tablet': { 'max': '900px' },
      },
    },
  },
};