import withMT from '@snowballtools/material-tailwind-react-fork/utils/withMT';
import colors from 'tailwindcss/colors';
import { fontFamily } from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
export default withMT({
  darkMode: ["class"],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    '../../node_modules/@snowballtools/material-tailwind-react-fork/components/**/*.{js,ts,jsx,tsx}',
    '../../node_modules/@snowballtools/material-tailwind-react-fork/theme/components/**/*.{js,ts,jsx,tsx}',
    "./components/**/*.{ts,tsx}",
  ],
  theme: {
  	container: {
  		center: true,
  		padding: '2rem',
  		screens: {
  			'2xl': '1400px'
  		}
  	},
  	colors: {
  		background: '#0F0F0F',
  		overlay: '#18181A',
  		overlay2: '#29292E',
  		overlay3: '#48474F',
  		primary: '#0000F4',
  		'primary-hovered': '#0000F4AA',
  		foreground: '#FBFBFB',
  		'foreground-secondary': '#8E8E8E',
  		error: '#B20710',
  		border: 'hsl(var(--border))',
  		input: 'hsl(var(--input))',
  		ring: 'hsl(var(--ring))',
  		destructive: {
  			DEFAULT: 'hsl(var(--destructive))',
  			foreground: 'hsl(var(--destructive-foreground))'
  		},
  		muted: {
  			DEFAULT: 'hsl(var(--muted))',
  			foreground: 'hsl(var(--muted-foreground))'
  		},
  		accent: {
  			DEFAULT: 'hsl(var(--accent))',
  			foreground: 'hsl(var(--accent-foreground))'
  		},
  		popover: {
  			DEFAULT: 'hsl(var(--popover))',
  			foreground: 'hsl(var(--popover-foreground))'
  		},
  		card: {
  			DEFAULT: 'hsl(var(--card))',
  			foreground: 'hsl(var(--card-foreground))'
  		}
  	},
  	extend: {
  		screens: {
  			xxs: '400px',
  			xs: '480px'
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		letterSpacing: {
  			tight: '-0.084px'
  		},
  		fontFamily: {
  			sans: [
  				'var(--font-sans)',
                    ...fontFamily.sans
                ],
  			display: [
  				'Inter Display',
  				'sans-serif'
  			],
  			mono: [
  				'DM Mono',
  				'monospace'
  			]
  		},
  		fontSize: {
  			'2xs': '0.625rem',
  			'3xs': '0.5rem'
  		},
  		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',
  			spin: 'spin 3s linear infinite'
  		},
  		colors: {
  			sky: 'colors.sky',
  			slate: 'colors.slate',
  			emerald: {
  				'50': '#ecfdf5',
  				'100': '#d1fae5',
  				'200': '#a9f1d0',
  				'300': '#6ee7b7',
  				'400': '#34d399',
  				'500': '#10b981',
  				'600': '#059669',
  				'700': '#047857',
  				'800': '#065f46',
  				'900': '#064e3b'
  			},
  			gray: {
  				'0': '#ffffff',
  				'50': '#f8fafc',
  				'100': '#f1f5f9',
  				'200': '#e2e9f0',
  				'300': '#cbd6e1',
  				'400': '#94a7b8',
  				'500': '#60788f',
  				'600': '#475969',
  				'700': '#334555',
  				'800': '#1b2d3e',
  				'900': '#0b1d2e'
  			},
  			orange: {
  				'50': '#fff7ed',
  				'100': '#ffedd5',
  				'200': '#fed7aa',
  				'300': '#fdba74',
  				'400': '#fb923c',
  				'500': '#f97316',
  				'600': '#ea580c',
  				'700': '#c2410c',
  				'800': '#9a3412',
  				'900': '#7c2d12'
  			},
  			rose: {
  				'50': '#fff1f2',
  				'100': '#ffe4e6',
  				'200': '#fecdd3',
  				'300': '#fda4af',
  				'400': '#fb7185',
  				'500': '#f43f5e',
  				'600': '#e11d48',
  				'700': '#be123c',
  				'800': '#9f1239',
  				'900': '#881337'
  			},
  			snowball: {
  				'50': '#ecf6fe',
  				'100': '#e1f1fe',
  				'200': '#ddeefd',
  				'300': '#cfe6fc',
  				'400': '#74bafb',
  				'500': '#47a4fa',
  				'600': '#0f86f5',
  				'700': '#0977dc',
  				'800': '#075185',
  				'900': '#0a3a5c'
  			},
  			base: {
  				canvas: '#ECF6FE',
  				bg: '#ffffff',
  				'bg-alternate': '#f8fafc',
  				'bg-emphasized': '#f1f5f9',
  				'bg-emphasized-danger': '#fff1f2',
  				'bg-emphasized-info': '#ecf6fe',
  				'bg-emphasized-success': '#ecfdf5',
  				'bg-emphasized-warning': '#fff7ed'
  			},
  			border: 'hsl(var(--border))',
  			controls: {
  				danger: '#e11d48',
  				'danger-hovered': '#be123c',
  				disabled: '#e2e9f0',
  				'disabled-active': '#74bafb',
  				elevated: '#ffffff',
  				inset: '#e2e9f0',
  				'inset-hovered': '#cbd6e1',
  				primary: '#0f86f5',
  				'primary-hovered': '#0977dc',
  				secondary: '#ddeefd',
  				'secondary-hovered': '#cfe6fc',
  				tertiary: '#ffffff',
  				'tertiary-hovered': '#f8fafc'
  			},
  			elements: {
  				danger: '#e11d48',
  				disabled: '#94a7b8',
  				'high-em': '#0b1d2e',
  				info: '#0f86f5',
  				link: '#0f86f5',
  				'link-hovered': '#0977dc',
  				'low-em': '#60788f',
  				'mid-em': '#475969',
  				'on-danger': '#ffffff',
  				'on-disabled': '#60788f',
  				'on-disabled-active': '#0a3a5c',
  				'on-emphasized-danger': '#9f1239',
  				'on-emphasized-info': '#0a3a5c',
  				'on-emphasized-success': '#065f46',
  				'on-emphasized-warning': '#9a3412',
  				'on-high-contrast': '#ffffff',
  				'on-primary': '#ffffff',
  				'on-secondary': '#0977dc',
  				'on-secondary-tinted': '#075185',
  				'on-tertiary': '#1b2d3e',
  				success: '#059669',
  				warning: '#ea580c'
  			},
  			surface: {
  				card: '#ffffff',
  				'card-hovered': '#f8fafc',
  				floating: '#ffffff',
  				'floating-hovered': '#f1f5f9',
  				'high-contrast': '#0b1d2e'
  			},
  			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))'
  			},
  			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))'
  			}
  		},
  		boxShadow: {
  			button: '0px -2px 0px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset',
  			dropdown: '0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)',
  			field: '0px 1px 2px rgba(0, 0, 0, 0.04)',
  			inset: 'inset 0px 1px 0px rgba(8, 47, 86, 0.06)',
  			card: '0px 0px 0px 1px #E8F0F7, 0px 2px 4px rgba(8, 47, 86, 0.04)',
  			'card-sm': '0px 1px 2px -1px rgba(4, 25, 47, 0.08)'
  		},
  		spacing: {
  			'2.5': '0.625rem',
  			'3.25': '0.8125rem',
  			'3.5': '0.875rem',
  			'4.5': '1.125rem'
  		},
  		zIndex: {
  			tooltip: '52',
  			toast: '9999'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
});