/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./content/**/*.{js,ts,jsx,tsx,mdx}",
    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: ["class", '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        background: "var(--bg)",
        foreground: "var(--text)",
        card: {
          DEFAULT: "var(--card-bg)",
          foreground: "var(--text)",
        },
        popover: {
          DEFAULT: "var(--surface-3)",
          foreground: "var(--text)",
        },
        surface: {
          DEFAULT: "var(--surface)",
          2: "var(--surface-2)",
          3: "var(--surface-3)",
        },
        muted: {
          DEFAULT: "var(--surface-2)",
          foreground: "var(--muted)",
        },
        accent: {
          DEFAULT: "var(--surface-3)",
          foreground: "var(--text)",
        },
        primary: {
          DEFAULT: "var(--brand)",
          foreground: "#ffffff",
        },
        secondary: {
          DEFAULT: "var(--button-secondary)",
          foreground: "var(--text)",
        },
        destructive: {
          DEFAULT: "#dc2626",
          foreground: "#ffffff",
        },
        border: {
          DEFAULT: "var(--line)",
          strong: "var(--line-strong)",
        },
        input: "var(--line)",
        ring: "var(--brand-2)",
        brand: {
          DEFAULT: "var(--brand)",
          2: "var(--brand-2)",
          3: "var(--brand-3)",
        },
      },
      boxShadow: {
        theme: "var(--shadow)",
      },
      fontFamily: {
        sans: ['"Space Grotesk"', '"IBM Plex Sans Arabic"', "Cairo", "sans-serif"],
      },
      borderRadius: {
        panel: "24px",
        card: "18px",
        pill: "999px",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};