/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      fontFamily: {
        display: ['"Epilogue Variable"', 'Epilogue', 'system-ui', 'sans-serif'],
        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
      },
      colors: {
        teal: {
          DEFAULT: '#0D9488',
          50: '#F0FDFA',
          100: '#CCFBF1',
          400: '#2DD4BF',
          500: '#14B8A6',
          600: '#0D9488',
          700: '#0F766E',
          800: '#115E59',
          900: '#134E4A',
        },
        surface: {
          DEFAULT: '#F8FAFC',
          2: '#F1F5F9',
          3: '#E2E8F0',
        },
        ink: {
          DEFAULT: '#0F172A',
          muted: '#334155',
          faint: '#64748B',
        },
        dark: {
          bg: '#0B1120',
          surface: '#111827',
          surface2: '#1F2937',
          surface3: '#374151',
          border: '#374151',
          text: '#F9FAFB',
          muted: '#9CA3AF',
          faint: '#6B7280',
        },
      },
      maxWidth: {
        content: '72ch',
      },
    },
  },
  plugins: [],
};
