import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";

export default {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        slate: {
          50: "#f4f7f8",
          100: "#e4e9eb",
          200: "#c6d0d4",
          300: "#a7b5bb",
          400: "#88999f",
          500: "#687a82",
          600: "#4d5d64",
          700: "#38464c",
          800: "#293338",
          900: "#191f22",
          950: "#0b0d0f",
        },
        blue: {
          50: "#effbff",
          100: "#d9f6ff",
          200: "#b5ebff",
          300: "#8be2ff",
          400: "#71dcff",
          500: "#35c2e8",
          600: "#087e9d",
          700: "#06677f",
          800: "#0a5263",
          900: "#10434f",
          950: "#062f3a",
        },
        emerald: {
          50: "#effdf8",
          100: "#d4f8ea",
          200: "#aaf0d6",
          300: "#70e5be",
          400: "#4fddaf",
          500: "#22c99a",
          600: "#087b60",
          700: "#09624f",
          800: "#0a6855",
          900: "#0b5547",
          950: "#033127",
        },
        amber: {
          50: "#fff9eb",
          100: "#ffefc7",
          200: "#ffde8a",
          300: "#ffca5a",
          400: "#f2b84b",
          500: "#de9824",
          600: "#bf7418",
          700: "#995316",
          800: "#7d4218",
          900: "#673817",
          950: "#3b1d08",
        },
        rose: {
          50: "#fff3f1",
          100: "#ffe1dd",
          200: "#ffc5be",
          300: "#ff9e93",
          400: "#ff7568",
          500: "#f84f40",
          600: "#d93327",
          700: "#b5251d",
          800: "#95231d",
          900: "#7b241f",
          950: "#420e0b",
        },
        indigo: {
          50: "#effcfa",
          100: "#d6f7f1",
          200: "#afece2",
          300: "#7fded1",
          400: "#4dcbbb",
          500: "#2eafa1",
          600: "#238d84",
          700: "#21716b",
          800: "#205b57",
          900: "#1e4b48",
          950: "#0c2c2b",
        },
        purple: {
          50: "#fff8ed",
          100: "#ffebcf",
          200: "#ffd39d",
          300: "#ffb764",
          400: "#f39a3d",
          500: "#de7b1f",
          600: "#ba5d17",
          700: "#954416",
          800: "#783719",
          900: "#622f18",
          950: "#371508",
        },
        orange: {
          50: "#fff8ed",
          100: "#ffebcf",
          200: "#ffd39d",
          300: "#ffb764",
          400: "#f39a3d",
          500: "#de7b1f",
          600: "#ba5d17",
          700: "#954416",
          800: "#783719",
          900: "#622f18",
          950: "#371508",
        },
        violet: {
          50: "#effcfa",
          100: "#d6f7f1",
          200: "#afece2",
          300: "#7fded1",
          400: "#4dcbbb",
          500: "#2eafa1",
          600: "#238d84",
          700: "#21716b",
          800: "#205b57",
          900: "#1e4b48",
          950: "#0c2c2b",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 3px)",
        xl: "0.5rem",
        "2xl": "0.5rem",
        "3xl": "0.5rem",
      },
      letterSpacing: {
        tighter: "0",
        tight: "0",
        normal: "0",
        wide: "0",
        wider: "0",
        widest: "0",
      },
      fontFamily: {
        sans: ["Manrope", "Segoe UI", "sans-serif"],
        display: ["Space Grotesk", "Manrope", "sans-serif"],
        mono: ["JetBrains Mono", "Cascadia Code", "monospace"],
      },
      keyframes: {
        "accordion-down": {
          from: {
            height: "0",
          },
          to: {
            height: "var(--radix-accordion-content-height)",
          },
        },
        "accordion-up": {
          from: {
            height: "var(--radix-accordion-content-height)",
          },
          to: {
            height: "0",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [tailwindcssAnimate],
} satisfies Config;