/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.vue"],
  theme: {
    extend: {
      colors: {
        gray: {
          100: "#f7fafc",
          200: "#edf2f7",
          300: "#e2e8f0",
          400: "#cbd5e0",
          500: "#a0aec0",
          600: "#718096",
          700: "#4a5568",
          800: "#2d3748",
          900: "#1a202c",
        },
        edit: {
          DEFAULT: "hsl(20, 77%, 55%)",
        },
        primary: {
          DEFAULT: "var(--primary)",
        },
        primaryfg: {
          DEFAULT: "var(--primaryfg)",
        },
        secondary: {
          DEFAULT: "var(--secondary)",
        },
        font: {
          DEFAULT: "var(--font)",
        },
        circle: {
          DEFAULT: "var(--circle)",
        },
      },
      fontFamily: {
        arvo: ["Arvo"],
        nunito: ["Nunito"],
      },
      boxShadow: {
        button: "inset 0 -2px 0 rgba(255,255,255,0.2)",
      },
    },
  },
  plugins: [
    require("@tailwindcss/container-queries"),
    require("@tailwindcss/typography"),
  ],
};