/* eslint-disable @typescript-eslint/no-require-imports */
import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class"],
  content: ["./src/**/*.tsx"],
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
      screens: {
        sm: "588px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", ...fontFamily.sans],
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      screens: {
        sm: "588px",
      },
      colors: {
        accent: "#77ACA9", // Highlight/Selection
        "gruv-red": {
          fg: "#88403c",
          bg: "#EA6962",
        },
        "gruv-orange": {
          fg: "#855231",
          bg: "#E78A4E",
        },
        "gruv-yellow": {
          fg: "#795F34",
          bg: "#D8A657",
        },
        "gruv-green": {
          fg: "#585E36",
          bg: "#A9B665",
        },
        "gruv-blue": {
          fg: "#405852",
          bg: "#7DAEA3",
        },
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;