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

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'class',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
                display: ['Caprasimo', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                surface: 'rgb(var(--color-surface) / <alpha-value>)',
                'surface-alt': 'rgb(var(--color-surface-alt) / <alpha-value>)',
                text: 'rgb(var(--color-text) / <alpha-value>)',
                'text-muted': 'rgb(var(--color-text-muted) / <alpha-value>)',
                border: {
                    DEFAULT: 'rgb(var(--color-border) / <alpha-value>)',
                    strong: 'rgb(var(--color-border-strong) / <alpha-value>)',
                },
                brand: {
                    DEFAULT: 'rgb(var(--color-brand) / <alpha-value>)',
                    emphasis: 'rgb(var(--color-brand-emphasis) / <alpha-value>)',
                },
                positive: {
                    DEFAULT: 'rgb(var(--color-positive) / <alpha-value>)',
                    surface: 'rgb(var(--color-positive-surface) / <alpha-value>)',
                    fill: 'rgb(var(--color-positive-fill) / <alpha-value>)',
                },
                negative: {
                    DEFAULT: 'rgb(var(--color-negative) / <alpha-value>)',
                    surface: 'rgb(var(--color-negative-surface) / <alpha-value>)',
                    fill: 'rgb(var(--color-negative-fill) / <alpha-value>)',
                },
                info: {
                    DEFAULT: 'rgb(var(--color-info) / <alpha-value>)',
                    surface: 'rgb(var(--color-info-surface) / <alpha-value>)',
                    fill: 'rgb(var(--color-info-fill) / <alpha-value>)',
                },
                danger: {
                    DEFAULT: 'rgb(var(--color-danger) / <alpha-value>)',
                    surface: 'rgb(var(--color-danger-surface) / <alpha-value>)',
                    fill: 'rgb(var(--color-danger-fill) / <alpha-value>)',
                },
                'focus-ring': 'rgb(var(--color-focus-ring) / <alpha-value>)',
            },
        },
    },

    plugins: [forms],
};