/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', 'class'],
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
  	fontFamily: {
  		sans: [
  			'var(--font-montserrat)',
  			'Montserrat',
  			'ui-sans-serif',
  			'system-ui',
  			'-apple-system',
  			'BlinkMacSystemFont',
  			'Segoe UI',
  			'Roboto',
  			'Helvetica Neue',
  			'Arial',
  			'Noto Sans',
  			'sans-serif'
  		],
  		body: [
  			'var(--font-open-sans)',
  			'Open Sans',
  			'ui-sans-serif',
  			'system-ui',
  			'-apple-system',
  			'BlinkMacSystemFont',
  			'Segoe UI',
  			'Roboto',
  			'Helvetica Neue',
  			'Arial',
  			'Noto Sans',
  			'sans-serif'
  		]
  	},
  	extend: {
  		colors: {
  			surface: {
  				'500': 'rgb(var(--surface-500))',
  				'600': 'rgb(var(--surface-600))',
  				'700': 'rgb(var(--surface-700))',
  				'800': 'rgb(var(--surface-800))',
  				'900': 'rgb(var(--surface-900))'
  			},
  			text: {
  				primary: 'rgb(var(--text-primary))',
  				secondary: 'rgb(var(--text-secondary))',
  				muted: 'rgb(var(--text-muted))',
  				disabled: 'rgb(var(--text-disabled))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				hover: 'rgb(var(--accent-hover))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			bg: {
  				DEFAULT: 'rgb(var(--surface-800))',
  				light: 'rgb(var(--surface-700))',
  				dark: 'rgb(var(--surface-900))'
  			},
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			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))'
  			}
  		},
  		fontSize: {
  			display: [
  				'6rem',
  				{
  					lineHeight: '1',
  					fontWeight: '200'
  				}
  			],
  			'display-sm': [
  				'4rem',
  				{
  					lineHeight: '1',
  					fontWeight: '300'
  				}
  			]
  		},
  		letterSpacing: {
  			tight: '-0.02em',
  			wide: '0.05em'
  		},
  		animation: {
  			'fade-in': 'fadeIn 0.2s ease-out',
  			'slide-up': 'slideUp 0.2s ease-out',
  			'horizontal-scroll': 'horizontalScroll 20s linear infinite'
  		},
  		keyframes: {
  			fadeIn: {
  				'0%': {
  					opacity: '0'
  				},
  				'100%': {
  					opacity: '1'
  				}
  			},
  			slideUp: {
  				'0%': {
  					opacity: '0',
  					transform: 'translateY(20px)'
  				},
  				'100%': {
  					opacity: '1',
  					transform: 'translateY(0)'
  				}
  			},
  			horizontalScroll: {
  				'0%': {
  					transform: 'translateX(0)'
  				},
  				'100%': {
  					transform: 'translateX(-50%)'
  				}
  			}
  		},
  		transitionTimingFunction: {
  			smooth: 'cubic-bezier(0.4, 0, 0.2, 1)'
  		},
  		maxWidth: {
  			'8xl': '90rem'
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		}
  	}
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
      require("tailwindcss-animate")
],
}