import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
  	extend: {
  		colors: {
			background: 'var(--color-background)',
			foreground: 'var(--color-foreground)',
			card: {
				DEFAULT: 'var(--color-surface-elevated)',
				foreground: 'var(--color-foreground)'
			},
			popover: {
				DEFAULT: 'var(--color-surface-elevated)',
				foreground: 'var(--color-foreground)'
			},
			primary: {
				DEFAULT: 'var(--color-accent)',
				foreground: 'var(--color-foreground)'
			},
			secondary: {
				DEFAULT: 'var(--color-border)',
				foreground: 'var(--color-foreground)'
			},
			muted: {
				DEFAULT: 'var(--color-muted)',
				foreground: 'var(--color-foreground-muted)'
			},
			accent: {
				DEFAULT: 'var(--color-accent)',
				foreground: 'var(--color-foreground)'
			},
			destructive: {
				DEFAULT: 'hsl(var(--destructive))',
				foreground: 'hsl(var(--destructive-foreground))'
			},
			border: 'var(--color-border)',
			input: 'var(--color-border)',
			ring: 'var(--color-accent)',
			chart: {
				'1': 'hsl(var(--chart-1))',
				'2': 'hsl(var(--chart-2))',
				'3': 'hsl(var(--chart-3))',
				'4': 'hsl(var(--chart-4))',
				'5': 'hsl(var(--chart-5))'
			},
			// Custom colors for your existing components
			surface: 'var(--color-surface)',
			'surface-elevated': 'var(--color-surface-elevated)',
			'border-subtle': 'var(--color-border-subtle)',
			'accent-glow': 'var(--color-accent-glow)',
			'accent-dim': 'var(--color-accent-dim)',
			subtle: 'var(--color-subtle)',
			'foreground-muted': 'var(--color-foreground-muted)',
			'foreground-subtle': 'var(--color-foreground-subtle)',
		},
  		fontFamily: {
  			sans: [
  				'var(--font-sans)',
  				'system-ui',
  				'sans-serif'
  			],
  			mono: [
  				'var(--font-mono)',
  				'monospace'
  			],
  			display: [
  				'var(--font-display)',
  				'system-ui',
  				'sans-serif'
  			]
  		},
  		animation: {
  			'gradient-x': 'gradient-x 15s ease infinite',
  			'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
  			float: 'float 6s ease-in-out infinite'
  		},
  		keyframes: {
  			'gradient-x': {
  				'0%, 100%': {
  					'background-position': '0% 50%'
  				},
  				'50%': {
  					'background-position': '100% 50%'
  				}
  			},
  			float: {
  				'0%, 100%': {
  					transform: 'translateY(0px)'
  				},
  				'50%': {
  					transform: 'translateY(-20px)'
  				}
  			}
  		},
  		backgroundImage: {
			'grid-pattern': 'url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\' width=\'32\' height=\'32\' fill=\'none\' stroke=\'rgb(71 85 105 / 0.5)\'%3e%3cpath d=\'M0 .5H31.5V32\'/%3e%3c/svg%3e")'
		},
  		boxShadow: {
			glow: '0 0 30px var(--color-accent-glow)',
			'glow-lg': '0 0 60px var(--color-accent-glow)',
			card: '0 4px 24px rgb(0 0 0 / 0.4)',
			'card-hover': '0 8px 48px rgb(0 0 0 / 0.6)'
		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
};

export default config;