tailwind.config.ts

import { on } from "events";
import type { Config } from "tailwindcss";

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    fontFamily: {
      mono: ["var(--font-mono)", "monospace"],
      inter: ["var(--font-inter)", "sans-serif"],
    },
    extend: {
      colors: {
        primary: "#24b47e",
        primary_dark: "#00997B",
        danger: "#EB5757",

        light: {
          DEFAULT: "#ffffff",
          base: "#646464",
          100: "#f9f9f9",
          200: "#f2f2f2",
          300: "#ededed",
          400: "#e6e6e6",
          500: "#dadada",
          600: "#d2d2d2",
          800: "#bcbcbc",
          900: "#a8a8a8",
        },
        dark: {
          DEFAULT: "#000000",
          base: "#a5a5a5",
          100: "#181818",
          200: "#212121",
          300: "#2a2a2a",
          350: "#2b2b2b",
          400: "#323232",
          500: "#3e3e3e",
          600: "#4a4a4a",
          700: "#6e6e6e",
          800: "#808080",
          900: "#999999",
        },
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "fit-content" },
        },
        "accordion-up": {
          from: { height: "fit-content" },
          to: { height: "0" },
        },
        "fade-in": {
          "0%": {
            opacity: "0",
          },
          "100%": {
            opacity: `1`,
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-in": "fade-in 0.8s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;