import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  darkMode: "class", // Enable class-based dark mode for "Mood Mode"
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", "sans-serif"],
        display: ["var(--font-space)", "sans-serif"],
      },
      colors: {
        // 2026 Fintech Palette
        "cloud-dancer": "#F0EEE9", // Base Light
        "teal": {
          DEFAULT: "#316263", // Primary Brand
          50: "#EBF5F5",
          100: "#D6EBEB",
          200: "#ADD6D6",
          300: "#85C2C2",
          400: "#5CADAD",
          500: "#316263", // Base
          600: "#274E4F",
          700: "#1D3B3B",
          800: "#142727",
          900: "#0A1414",
        },
        "neon-lime": "#B6FF3B", // Accent / Success
        "charcoal": "#121212", // Dark Mode Base
        "electric-cyan": "#00FFFF", // Dark Mode Accent

        // Semantic mappings
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: "var(--primary)",
        "primary-foreground": "var(--primary-foreground)",
        secondary: "var(--secondary)",
        "secondary-foreground": "var(--secondary-foreground)",
        muted: "var(--muted)",
        "muted-foreground": "var(--muted-foreground)",
        accent: "var(--accent)",
        "accent-foreground": "var(--accent-foreground)",
        border: "var(--border)",
      },
      boxShadow: {
        "glass": "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
        "glow": "0 0 20px rgba(182, 255, 59, 0.3)",
        "glow-teal": "0 0 30px rgba(49, 98, 99, 0.2)",
      },
      animation: {
        "pulse-slow": "pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
        "float": "float 6s ease-in-out infinite",
        "mesh": "mesh 20s infinite linear",
      },
      keyframes: {
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-10px)" },
        },
        mesh: {
          "0%": { backgroundPosition: "0% 50%" },
          "50%": { backgroundPosition: "100% 50%" },
          "100%": { backgroundPosition: "0% 50%" },
        }
      },
    },
  },
  plugins: [],
};

export default config;