const colors = require("tailwindcss/colors")

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        display: ["Old Standard TT", "serif"],
        body: ["Kanit", "sans"]
      },
      colors: {
        background: colors.amber[50],
        foreground: colors.zinc[800],
        fg_light: colors.zinc[600],
        accent: colors.emerald[900],
      },
      screens: {
        md: "850px",
      },
      dropShadow: {
        accent: [
          '0 10px 8px rgba(6, 78, 59, 0.1)',
          '0 4px 3px rgba(6, 78, 59, 0.2)'
        ],
      },
    },
  },
  future: {
    hoverOnlyWhenSupported: true,
  },
  plugins: [],
}