import type {Config} from 'tailwindcss'

import {BRAND_COLOR_VIOLET, BRAND_COLOR_YELLOW} from './lib/constants'

export default {
	darkMode: ['class'],
	content: [
		'./pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./components/**/*.{js,ts,jsx,tsx,mdx}',
		'./app/**/*.{js,ts,jsx,tsx,mdx}'
	],
	mode: 'jit',
	theme: {
		screens: {
			xs: '475px',
			sm: '576px',
			md: '768px',
			lg: '992px',
			xl: '1200px'
		},
		extend: {
			container: {
				center: true,
				screens: {
					DEFAULT: '100%',
					xl: '1200px'
				},
				padding: {
					DEFAULT: '15px',
					xl: 'unset'
				}
			},
			fontFamily: {
				heading: ['var(--font-myriad)']
			},
			colors: {
				stone: {
					'50': '#f6f6f6',
					'100': '#e7e7e7',
					'200': '#d1d1d1',
					'300': '#b0b0b0',
					'400': '#888888',
					'500': '#666666',
					'600': '#5d5d5d',
					'700': '#4f4f4f',
					'800': '#454545',
					'900': '#3d3d3d',
					'950': '#262626',
					DEFAULT: '#666666'
				},
				brand: {
					yellow: {
						'50': '#fffbeb',
						'100': '#fff4c6',
						'200': '#ffe788',
						'300': '#ffd139',
						'400': '#ffc120',
						'500': '#f99f07',
						'600': '#dd7702',
						'700': '#b75306',
						'800': '#943f0c',
						'900': '#7a350d',
						'950': '#461a02',
						DEFAULT: BRAND_COLOR_YELLOW
					},
					violet: {
						'50': '#edeeff',
						'100': '#dfdfff',
						'200': '#c6c5ff',
						'300': '#a6a2ff',
						'400': '#8d7dfc',
						'500': '#7c5ff5',
						'600': '#7041ea',
						'700': '#6034ce',
						'800': '#4e2da6',
						'900': '#442d88',
						'950': '#281a4c',
						DEFAULT: BRAND_COLOR_VIOLET
					}
				},
				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))'
				},
				accent: {
					DEFAULT: 'hsl(var(--accent))',
					foreground: 'hsl(var(--accent-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))'
				},
				sidebar: {
					DEFAULT: 'hsl(var(--sidebar-background))',
					foreground: 'hsl(var(--sidebar-foreground))',
					primary: 'hsl(var(--sidebar-primary))',
					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
					accent: 'hsl(var(--sidebar-accent))',
					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
					border: 'hsl(var(--sidebar-border))',
					ring: 'hsl(var(--sidebar-ring))'
				}
			},
			borderRadius: {
				lg: 'var(--radius)',
				md: 'calc(var(--radius) - 2px)',
				sm: 'calc(var(--radius) - 4px)'
			},
			boxShadow: {
				'dd-menu': '7px 7px 11px 0 rgba(213,212,212,.75)'
			},
			aspectRatio: {
				univisium: '2 / 1',
				card: '850 / 834',
				yt: '1903 / 784'
			},
			keyframes: {
				'accordion-down': {
					from: {
						height: '0'
					},
					to: {
						height: 'var(--radix-accordion-content-height)'
					}
				},
				'accordion-up': {
					from: {
						height: 'var(--radix-accordion-content-height)'
					},
					to: {
						height: '0'
					}
				}
			},
			animation: {
				'accordion-down': 'accordion-down 0.2s ease-out',
				'accordion-up': 'accordion-up 0.2s ease-out'
			}
		}
	},
	plugins: [
		require('tailwindcss-animate'),
		require('tailwind-scrollbar'),
		require('@tailwindcss/typography')
	]
} satisfies Config