/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");

module.exports = {
  darkMode: 'class',
  content: [
    './templates/**/*.html',
    './static/css/src/**/*.css',
    './backend/apps/**/templates/**/*.html',
    './backend/static/**/*.js',
    './static/js/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        border: "var(--color-border)",
        input: "var(--color-input)",
        ring: "var(--color-ring)",
        background: "var(--color-background)",
        foreground: "var(--color-foreground)",
        primary: {
          DEFAULT: "var(--color-primary)",
          foreground: "var(--color-primary-foreground)",
          50: "var(--color-primary-50)",
          100: "var(--color-primary-100)",
          200: "var(--color-primary-200)",
          300: "var(--color-primary-300)",
          400: "var(--color-primary-400)",
          500: "var(--color-primary-500)",
          600: "var(--color-primary-600)",
          700: "var(--color-primary-700)",
          800: "var(--color-primary-800)",
          900: "var(--color-primary-900)",
          950: "var(--color-primary-950)",
        },
        secondary: {
          DEFAULT: "var(--color-secondary)",
          foreground: "var(--color-secondary-foreground)",
          50: "var(--color-secondary-50)",
          100: "var(--color-secondary-100)",
          200: "var(--color-secondary-200)",
          300: "var(--color-secondary-300)",
          400: "var(--color-secondary-400)",
          500: "var(--color-secondary-500)",
          600: "var(--color-secondary-600)",
          700: "var(--color-secondary-700)",
          800: "var(--color-secondary-800)",
          900: "var(--color-secondary-900)",
          950: "var(--color-secondary-950)",
        },
        accent: {
          DEFAULT: "var(--color-accent)",
          foreground: "var(--color-accent-foreground)",
        },
        destructive: {
          DEFAULT: "var(--color-destructive)",
          foreground: "var(--color-destructive-foreground)",
        },
        muted: {
          DEFAULT: "var(--color-muted)",
          foreground: "var(--color-muted-foreground)",
        },
        popover: {
          DEFAULT: "var(--color-popover)",
          foreground: "var(--color-popover-foreground)",
        },
        card: {
          DEFAULT: "var(--color-card)",
          foreground: "var(--color-card-foreground)",
        },
        success: {
           50: "var(--color-success-50)",
           100: "var(--color-success-100)",
           200: "var(--color-success-200)",
           300: "var(--color-success-300)",
           400: "var(--color-success-400)",
           500: "var(--color-success-500)",
           600: "var(--color-success-600)",
           700: "var(--color-success-700)",
           800: "var(--color-success-800)",
           900: "var(--color-success-900)",
           950: "var(--color-success-950)",
        },
        warning: {
           50: "var(--color-warning-50)",
           100: "var(--color-warning-100)",
           200: "var(--color-warning-200)",
           300: "var(--color-warning-300)",
           400: "var(--color-warning-400)",
           500: "var(--color-warning-500)",
           600: "var(--color-warning-600)",
           700: "var(--color-warning-700)",
           800: "var(--color-warning-800)",
           900: "var(--color-warning-900)",
           950: "var(--color-warning-950)",
        },
        error: {
           50: "var(--color-error-50)",
           100: "var(--color-error-100)",
           200: "var(--color-error-200)",
           300: "var(--color-error-300)",
           400: "var(--color-error-400)",
           500: "var(--color-error-500)",
           600: "var(--color-error-600)",
           700: "var(--color-error-700)",
           800: "var(--color-error-800)",
           900: "var(--color-error-900)",
           950: "var(--color-error-950)",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-family-sans)"],
        serif: ["var(--font-family-serif)"],
        mono: ["var(--font-family-mono)"],
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/container-queries"),
    require("tailwindcss-animate"),
    plugin(function ({ addVariant }) {
      addVariant("htmx-settling", ["&.htmx-settling", ".htmx-settling &"]);
      addVariant("htmx-request", ["&.htmx-request", ".htmx-request &"]);
      addVariant("htmx-swapping", ["&.htmx-swapping", ".htmx-swapping &"]);
      addVariant("htmx-added", ["&.htmx-added", ".htmx-added &"]);
    }),
  ],
}