/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Roboto', 'sans-serif'],
            },
            fontSize: {
                'display-lg': ['57px', '64px'],
                'display-md': ['45px', '52px'],
                'display-sm': ['36px', '44px'],
                'headline-lg': ['32px', '40px'],
                'headline-md': ['28px', '36px'],
                'headline-sm': ['24px', '32px'],
                'title-lg': ['22px', '28px'],
                'title-md': ['16px', '24px'],
                'title-sm': ['14px', '20px'],
                'label-lg': ['14px', '20px'],
                'label-md': ['12px', '16px'],
                'label-sm': ['11px', '16px'],
                'body-lg': ['16px', '24px'],
                'body-md': ['14px', '20px'],
                'body-sm': ['12px', '16px'],
            },
            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 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
                'elevation-2': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
                'elevation-3': '0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)',
                'elevation-4': '0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)',
                'elevation-5': '0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
            },
            keyframes: {
                ripple: {
                    '0%': { transform: 'scale(0)', opacity: '0.4' },
                    '100%': { transform: 'scale(4)', opacity: '0' },
                }
            },
            animation: {
                ripple: 'ripple 600ms linear',
            }
        },
    },
    plugins: [],
}