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

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'class', // Enable class-based dark mode
    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],
            },
            colors: {
                // Primary and Secondary (keep existing, use as accents)
                primary: '#340080',
                secondary: '#ff2cff',
                
                // Design System Colors - Reference Dashboard Theme
                surface: {
                    DEFAULT: '#ffffff',      // Pure white for cards
                    muted: '#f8f9fa',        // Light gray for main background
                    hover: '#f1f3f5',        // Hover states
                },
                sidebar: {
                    DEFAULT: '#1e3a5f',      // Deep blue sidebar (similar to reference)
                    hover: 'rgba(255, 255, 255, 0.08)', // Subtle hover overlay
                    active: '#ff2cff',       // Active state (using secondary)
                },
                border: {
                    DEFAULT: '#e5e7eb',      // Soft gray borders
                    light: '#f1f3f5',        // Very light borders
                    muted: '#f3f4f6',        // Muted borders
                },
                text: {
                    primary: '#111418',      // Main text
                    secondary: '#617589',    // Secondary text
                    muted: '#9ca3af',        // Muted text
                },
            },
            boxShadow: {
                'card': '0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03)',
                'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)',
                'soft': '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
            },
            borderRadius: {
                'card': '0.75rem',           // Standard card radius
            },
        },
    },

    plugins: [forms],
};
