import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        cream: {
          50: '#FDFAF5',
          100: '#FAF4EA',
          200: '#F4E8D7',
          300: '#EBD9C0',
          400: '#DFC5A3',
        },
        cocoa: {
          400: '#8A6B52',
          600: '#5A4032',
          700: '#463022',
          800: '#33231A',
          900: '#241811',
        },
        gold: {
          400: '#D2A75C',
          500: '#B98A3C',
          600: '#9C722E',
        },
      },
      fontFamily: {
        display: ['var(--font-display)', 'Georgia', 'serif'],
        body: ['var(--font-body)', 'system-ui', 'sans-serif'],
      },
      boxShadow: {
        soft: '0 1px 2px rgba(52,35,26,.04), 0 8px 24px -12px rgba(52,35,26,.18)',
        lift: '0 2px 4px rgba(52,35,26,.06), 0 18px 40px -18px rgba(52,35,26,.28)',
      },
      maxWidth: {
        page: '78rem',
      },
    },
  },
  plugins: [],
};

export default config;