import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    darkMode: 'class', // Enable dark mode toggle

    /* TODO: Look into dark secondary, Will probs need to be some kinda grey */
    /* TODO: Looks into adding text colours and sub-text colours */
    /* TODO: We'll wants want to add something like a text colour, sub-text colour */

    /* Nexi Colours
        Black - 24, 24, 24 (#181818) - Pantone 'Neutral Black C'
        Red - 235, 49, 46 (#EB312E) - Pantone '1788C'
        Grey - 228, 228, 228 (#E4E4E4)
        Darker Grey - 210, 210, 210 (#D2D2D2)
        Green - 54, 234, 123 (#36EA7B)
        Cyan - 54, 233, 234 (#36E9EA)
        Purple - 166, 37, 234 (#A625EA)
        Orange - 241, 124, 37 (#F17C25)
    */
    theme: {
        extend: {
            colors: {
                'nexi-primary': "rgb(255,255 ,255)",
                'nexi-secondary': "rgb(24, 24, 24)",
                'nexi-primary-dark': "rgb(24, 24, 24)",
                'nexi-secondary-dark': "rgb(255,255 ,255)",
                'nexi-black': "rgb(24, 24, 24)",
                'nexi-red': "rgb( 235, 49, 46)",
                'nexi-grey': "rgb(228, 228, 228)",
                'nexi-darker-grey': "rgb(210, 210, 210)",
                'nexi-dark-grey': "rgb(98,98,98)",
                'nexi-green': "rgb(54, 234, 123)",
                'nexi-cyan': "rgb(54, 233, 234)",
                'nexi-purple': "rgb(166, 37, 234)",
                'nexi-orange': "rgb(241, 124, 37)",
            },
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};