/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        // Primary colors
        primary: {
          DEFAULT: "#f58700",
          50: "#fef3e6",
          100: "#fde7cc",
          200: "#fbcf99",
          300: "#f9b766",
          400: "#f79f33",
          500: "#f58700",
          600: "#c46c00",
          700: "#935100",
          800: "#623600",
          900: "#311b00",
          dark: "#c46c00",
        },
        // Dark colors
        dark: {
          DEFAULT: "#0f1923",
          50: "#e6e7e9",
          100: "#cdd0d3",
          200: "#9ba1a7",
          300: "#69727b",
          400: "#37434f",
          500: "#0f1923",
          600: "#0c141c",
          700: "#090f15",
          800: "#060a0e",
          900: "#030507",
        },
        // Surface colors
        surface: {
          DEFAULT: "#151d28",
          light: "#1a2332",
          lighter: "#1f2a3c",
          dark: "#0f1519",
        },
        // Text colors
        "text-secondary": "#94a3b8",
        // Accent colors
        accent: {
          blue: "#3b82f6",
          green: "#10b981",
          red: "#ef4444",
          yellow: "#f59e0b",
          purple: "#8b5cf6",
        },
        // Utility colors
        success: "#10b981",
        warning: "#f59e0b",
        danger: "#ef4444",
        "danger-hover": "#dc2626",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        display: ["Montserrat", "sans-serif"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        "mesh-gradient":
          "linear-gradient(135deg, #0f1923 0%, #151d28 50%, #1a2332 100%)",
      },
      boxShadow: {
        glow: "0 0 20px rgba(245, 135, 0, 0.3)",
        "glow-lg": "0 0 30px rgba(245, 135, 0, 0.4)",
        "inner-glow": "inset 0 0 20px rgba(245, 135, 0, 0.1)",
      },
      animation: {
        "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
        shimmer: "shimmer 2s linear infinite",
        "slide-up": "slideUp 0.3s ease-out",
        "slide-down": "slideDown 0.3s ease-out",
        "fade-in": "fadeIn 0.3s ease-in",
      },
      keyframes: {
        shimmer: {
          "0%": { backgroundPosition: "-1000px 0" },
          "100%": { backgroundPosition: "1000px 0" },
        },
        slideUp: {
          "0%": { transform: "translateY(10px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
        slideDown: {
          "0%": { transform: "translateY(-10px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
    },
  },
  plugins: [],
};