/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Roboto', 'sans-serif'],
            },
            colors: {
                // Material 3 Dark Theme approximation
                'surface': '#141218', // Very dark background
                'surface-container-low': '#1D1B20',
                'surface-container': '#211F26', // Cards
                'surface-container-high': '#2B2930', // Input fields
                'on-surface': '#E6E0E9',
                'on-surface-variant': '#CAC4D0',

                // Using the Emerald scheme from previous request but mapped to M3 tokens
                'primary': '#6EE7B7', // Emerald 300 (Light for dark mode)
                'on-primary': '#003828', // Emerald 900
                'primary-container': '#00513B', // Emerald 800
                'on-primary-container': '#6EE7B7', // Emerald 300

                'secondary': '#CCC2DC',
                'secondary-container': '#4A4458',
                'on-secondary-container': '#E8DEF8',

                'tertiary': '#EFB8C8',
                'tertiary-container': '#633B48',

                'error': '#F2B8B5',
                'error-container': '#8C1D18',
                'on-error': '#601410',
                'on-error-container': '#F9DEDC',

                'outline': '#938F99',
                'outline-variant': '#49454F'
            },
            boxShadow: {
                'elevation-1': '0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
                'elevation-2': '0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
                'elevation-3': '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30)',
            }
        },
    },
    plugins: [],
}