/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: "class",
    theme: {
        extend: {
            fontFamily: {
                sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                mono: ['var(--font-fira-code)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
                heading: ['var(--font-open-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
            },
            colors: {
                brand: {
                    50: 'rgb(var(--brand-rgb) / 0.05)',
                    100: 'rgb(var(--brand-rgb) / 0.1)',
                    200: 'rgb(var(--brand-rgb) / 0.2)',
                    300: 'rgb(var(--brand-rgb) / 0.4)',
                    400: 'rgb(var(--brand-rgb) / 0.8)',
                    500: 'rgb(var(--brand-rgb) / <alpha-value>)',
                    600: 'rgb(var(--brand-strong-rgb) / <alpha-value>)',
                    700: 'rgb(var(--brand-strong-rgb) / 0.8)',
                    800: 'rgb(var(--brand-strong-rgb) / 0.6)',
                    900: 'rgb(var(--brand-strong-rgb) / 0.4)',
                    950: 'rgb(var(--brand-strong-rgb) / 0.2)',
                    hover: 'rgb(var(--brand-hover-rgb) / <alpha-value>)',
                },
                surface: {
                    light: '#ffffff',
                    dark: '#0a0a0a',
                },
            },
            boxShadow: {
                glow: '0 0 20px rgba(255, 58, 5, 0.25)',
            },
        },
    },
};