const { fontFamily } = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors"); // Correctly import colors

module.exports = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    // Path to Tremor module
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
  	transparent: 'transparent',
  	current: 'currentColor',
  	container: {
  		center: true,
  		padding: '2rem',
  		screens: {
  			'2xl': '1400px'
  		}
  	},
  	extend: {
  		backgroundImage: {
  			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
  			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
  		},
  		colors: {
  			tremor: {
  				brand: {
  					faint: 'colors.blue[50]',
  					muted: 'colors.blue[200]',
  					subtle: 'colors.blue[400]',
  					DEFAULT: 'colors.blue[500]',
  					emphasis: 'colors.blue[700]',
  					inverted: 'colors.white'
  				},
  				background: {
  					muted: 'colors.gray[50]',
  					subtle: 'colors.gray[100]',
  					DEFAULT: 'colors.white',
  					emphasis: 'colors.gray[700]'
  				},
  				border: {
  					DEFAULT: 'colors.gray[200]'
  				},
  				ring: {
  					DEFAULT: 'colors.gray[200]'
  				},
  				content: {
  					subtle: 'colors.gray[400]',
  					DEFAULT: 'colors.gray[500]',
  					emphasis: 'colors.gray[700]',
  					strong: 'colors.gray[900]',
  					inverted: 'colors.white'
  				}
  			},
  			'dark-tremor': {
  				brand: {
  					faint: '#0B1229',
  					muted: 'colors.blue[950]',
  					subtle: 'colors.blue[800]',
  					DEFAULT: 'colors.blue[500]',
  					emphasis: 'colors.blue[400]',
  					inverted: 'colors.blue[950]'
  				},
  				background: {
  					muted: '#131A2B',
  					subtle: 'colors.gray[800]',
  					DEFAULT: 'colors.gray[900]',
  					emphasis: 'colors.gray[300]'
  				},
  				border: {
  					DEFAULT: 'colors.gray[800]'
  				},
  				ring: {
  					DEFAULT: 'colors.gray[800]'
  				},
  				content: {
  					subtle: 'colors.gray[600]',
  					DEFAULT: 'colors.gray[500]',
  					emphasis: 'colors.gray[200]',
  					strong: 'colors.gray[50]',
  					inverted: 'colors.gray[950]'
  				}
  			},
  			epc_a: '#117d58',
  			epc_b: '#2da55c',
  			epc_c: '#8dbd40',
  			epc_d: '#f7cd14',
  			epc_e: '#f3a96a',
  			epc_f: '#ef8026',
  			epc_g: '#e41e3b',
  			brandblue: '#14163d',
  			hoverblue: '#3e4073',
  			brandtan: '#d3b488',
  			hovertan: '#947750',
  			brandgold: '#f1bb06',
  			hovergold: '#c79d12',
  			brandbrown: '#c4a47c',
  			brandmidblue: '#3943b7',
  			brandlightblue: '#00a9f4',
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			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))'
  			}
  		},
  		textColor: {
  			brandblue: '#14163d',
  			hoverblue: '#3e4073',
  			brandtan: '#d3b488',
  			hovertan: '#947750',
  			brandbrown: '#c4a47c',
  			brandmidblue: '#3943b7',
  			brandlightblue: '#00a9f4'
  		},
  		borderRadius: {
  			'tremor-small': '0.375rem',
  			'tremor-default': '0.5rem',
  			'tremor-full': '9999px'
  		},
  		fontFamily: {
  			sans: [
  				'var(--font-sans)',
                    ...fontFamily.sans
                ]
  		},
  		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
  				}
  			},
  			'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',
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out'
  		},
  		maxWidth: {
  			'8xl': '90rem'
  		},
  		boxShadow: {
  			'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  			'tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  			'tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
  			'dark-tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  			'dark-tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  			'dark-tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
  		},
  		fontSize: {
  			'tremor-label': [
  				'0.75rem',
  				{
  					lineHeight: '1rem'
  				}
  			],
  			'tremor-default': [
  				'0.875rem',
  				{
  					lineHeight: '1.25rem'
  				}
  			],
  			'tremor-title': [
  				'1.125rem',
  				{
  					lineHeight: '1.75rem'
  				}
  			],
  			'tremor-metric': [
  				'1.875rem',
  				{
  					lineHeight: '2.25rem'
  				}
  			]
  		}
  	}
  },
  variants: {
    extend: {
      visibility: ["group-hover"],
    },
  },
  safelist: [
    {
      pattern:
        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    {
      pattern:
        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    {
      pattern:
        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    // This enables the EPC colours for tremor. They're listed from EPC G -> A
    "bg-[#e41e3b]",
    "border-[#e41e3b]",
    "hover:bg-[#e41e3b]",
    "hover:border-[#e41e3b]",
    "hover:text-[#e41e3b]",
    "fill-[#e41e3b]",
    "ring-[#e41e3b]",
    "stroke-[#e41e3b]",
    "text-[#e41e3b]",
    "ui-selected:bg-[#e41e3b]",
    "ui-selected:border-[#e41e3b]",
    "ui-selected:text-[#e41e3b]",
    "bg-[#ef8026]",
    "border-[#ef8026]",
    "hover:bg-[#ef8026]",
    "hover:border-[#ef8026]",
    "hover:text-[#ef8026]",
    "fill-[#ef8026]",
    "ring-[#ef8026]",
    "stroke-[#ef8026]",
    "text-[#ef8026]",
    "ui-selected:bg-[#ef8026]",
    "ui-selected:border-[#ef8026]",
    "ui-selected:text-[#ef8026]",
    "bg-[#f3a96a]",
    "border-[#f3a96a]",
    "hover:bg-[#f3a96a]",
    "hover:border-[#f3a96a]",
    "hover:text-[#f3a96a]",
    "fill-[#f3a96a]",
    "ring-[#f3a96a]",
    "stroke-[#f3a96a]",
    "text-[#f3a96a]",
    "ui-selected:bg-[#f3a96a]",
    "ui-selected:border-[#f3a96a]",
    "ui-selected:text-[#f3a96a]",
    "bg-[#f7cd14]",
    "border-[#f7cd14]",
    "hover:bg-[#f7cd14]",
    "hover:border-[#f7cd14]",
    "hover:text-[#f7cd14]",
    "fill-[#f7cd14]",
    "ring-[#f7cd14]",
    "stroke-[#f7cd14]",
    "text-[#f7cd14]",
    "ui-selected:bg-[#f7cd14]",
    "ui-selected:border-[#f7cd14]",
    "ui-selected:text-[#f7cd14]",
    "bg-[#8dbd40]",
    "border-[#8dbd40]",
    "hover:bg-[#8dbd40]",
    "hover:border-[#8dbd40]",
    "hover:text-[#8dbd40]",
    "fill-[#8dbd40]",
    "ring-[#8dbd40]",
    "stroke-[#8dbd40]",
    "text-[#8dbd40]",
    "ui-selected:bg-[#8dbd40]",
    "ui-selected:border-[#8dbd40]",
    "ui-selected:text-[#8dbd40]",
    "bg-[#2da55c]",
    "border-[#2da55c]",
    "hover:bg-[#2da55c]",
    "hover:border-[#2da55c]",
    "hover:text-[#2da55c]",
    "fill-[#2da55c]",
    "ring-[#2da55c]",
    "stroke-[#2da55c]",
    "text-[#2da55c]",
    "ui-selected:bg-[#2da55c]",
    "ui-selected:border-[#2da55c]",
    "ui-selected:text-[#2da55c]",
    "bg-[#117d58]",
    "border-[#117d58]",
    "hover:bg-[#117d58]",
    "hover:border-[#117d58]",
    "hover:text-[#117d58]",
    "fill-[#117d58]",
    "ring-[#117d58]",
    "stroke-[#117d58]",
    "text-[#117d58]",
    "ui-selected:bg-[#117d58]",
    "ui-selected:border-[#117d58]",
    "ui-selected:text-[#117d58]",
  ],
  plugins: [
    function ({ addVariant }) {
      addVariant("important", ({ container }) => {
        container.walkRules((rule) => {
          rule.selector = `.\\!${rule.selector.slice(1)}`;
          rule.walkDecls((decl) => {
            decl.important = true;
          });
        });
      });
    },
    require("@tailwindcss/forms"),
  ],
};