import type { Config } from "tailwindcss";

const config = {
  darkMode: ["class"],
  content: [
    "./apps/desktop/src/renderer/index.html",
    "./apps/desktop/src/renderer/src/**/*.{ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        surface: "hsl(var(--surface))",
        card: "hsl(var(--card))",
        border: "hsl(var(--border))",
        foreground: "hsl(var(--foreground))",
        muted: "hsl(var(--muted))",
        accent: "hsl(var(--accent))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))"
        },
        success: "hsl(var(--success))",
        warning: "hsl(var(--warning))",
        danger: "hsl(var(--danger))"
      },
      borderRadius: {
        xl: "1.25rem",
        "2xl": "1.75rem"
      },
      boxShadow: {
        panel: "0 24px 64px rgba(15, 23, 42, 0.24)",
        glow: "0 10px 40px rgba(37, 99, 235, 0.25)"
      },
      backdropBlur: {
        xs: "2px"
      },
      keyframes: {
        "fade-up": {
          "0%": { opacity: "0", transform: "translateY(10px)" },
          "100%": { opacity: "1", transform: "translateY(0)" }
        }
      },
      animation: {
        "fade-up": "fade-up 0.28s ease-out"
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
} satisfies Config;

export default config;