ca-grow-ops-manager/frontend/tailwind.config.ts

import colors from 'tailwindcss/colors';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: 'class',
    theme: {
        // Mobile-first breakpoints
        screens: {
            'xs': '375px',
            'sm': '640px',
            'md': '768px',
            'lg': '1024px',
            'xl': '1280px',
            '2xl': '1536px',
        },
        container: {
            center: true,
            padding: {
                DEFAULT: '1rem',
                sm: '1.5rem',
                md: '2rem',
                lg: '3rem',
            },
            screens: {
                "2xl": "1400px",
            },
        },
        extend: {
            // Design OS Palette (Stone & Lime)
            colors: {
                // Neutral scale (Stone = warmth + utility)
                neutral: {
                    ...colors.stone,
                    // Map legacy specifics if needed, but prefer stone-950 for blacks
                    850: '#1c1917', // stone-900ish
                    950: '#0c0a09', // stone-950
                },
                // Primary Accent (Lime = fresh + technical)
                accent: {
                    ...colors.lime,
                    DEFAULT: colors.lime[500], // Was Linear Purple
                    hover: colors.lime[400],
                    muted: 'rgba(132, 204, 22, 0.15)', // Lime-500 alpha
                    foreground: colors.stone[950], // Dark text on lime
                },
                // Semantic colors
                success: {
                    DEFAULT: colors.emerald[500],
                    muted: 'rgba(16, 185, 129, 0.15)',
                    foreground: '#FFFFFF',
                },
                warning: {
                    DEFAULT: colors.amber[500],
                    muted: 'rgba(245, 158, 11, 0.15)',
                    foreground: '#171717',
                },
                destructive: {
                    DEFAULT: colors.red[500],
                    muted: 'rgba(239, 68, 68, 0.15)',
                    foreground: '#FFFFFF',
                },
                // Mappings
                border: colors.stone[200],
                input: colors.stone[200],
                ring: colors.lime[500],
                background: colors.stone[50], // Slightly warm background
                foreground: colors.stone[950],
                primary: {
                    DEFAULT: colors.lime[500],
                    foreground: colors.stone[950],
                },
                secondary: {
                    DEFAULT: colors.stone[100],
                    foreground: colors.stone[900],
                },
                muted: {
                    DEFAULT: colors.stone[100],
                    foreground: colors.stone[500],
                },
                popover: {
                    DEFAULT: "#FFFFFF",
                    foreground: colors.stone[950],
                },
                card: {
                    DEFAULT: "#FFFFFF",
                    foreground: colors.stone[950],
                },
            },
            borderRadius: {
                'xs': '4px',
                'sm': '6px',
                'md': '8px',
                'lg': '12px',
                'xl': '16px',
            },
            // Touch-friendly spacing
            spacing: {
                'touch': '44px',
                'touch-lg': '56px',
            },
            // Linear-inspired typography
            fontFamily: {
                sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
                display: ['Space Grotesk', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
                mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'],
            },
            fontSize: {
                'xs': ['11px', { lineHeight: '1.4', letterSpacing: '0.01em' }],
                'sm': ['13px', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
                'base': ['14px', { lineHeight: '1.6', letterSpacing: '-0.01em' }],
                'lg': ['16px', { lineHeight: '1.5', letterSpacing: '-0.02em', fontWeight: '500' }],
                'xl': ['18px', { lineHeight: '1.4', letterSpacing: '-0.02em', fontWeight: '600' }],
                '2xl': ['24px', { lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '600' }],
                '3xl': ['30px', { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '700' }],
                '4xl': ['36px', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }],
            },
            // Animation timing (Linear-style)
            transitionTimingFunction: {
                'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
                'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)',
                'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
            },
            transitionDuration: {
                'instant': '50ms',
                'fast': '100ms',
                'normal': '150ms',
                'slow': '250ms',
                'slower': '400ms',
            },
            // Keyframe animations
            keyframes: {
                'fade-in': {
                    '0%': { opacity: '0' },
                    '100%': { opacity: '1' },
                },
                'fade-out': {
                    '0%': { opacity: '1' },
                    '100%': { opacity: '0' },
                },
                'slide-up': {
                    '0%': { opacity: '0', transform: 'translateY(8px)' },
                    '100%': { opacity: '1', transform: 'translateY(0)' },
                },
                'slide-down': {
                    '0%': { opacity: '0', transform: 'translateY(-8px)' },
                    '100%': { opacity: '1', transform: 'translateY(0)' },
                },
                'scale-in': {
                    '0%': { opacity: '0', transform: 'scale(0.95)' },
                    '100%': { opacity: '1', transform: 'scale(1)' },
                },
                'scale-out': {
                    '0%': { opacity: '1', transform: 'scale(1)' },
                    '100%': { opacity: '0', transform: 'scale(0.95)' },
                },
                'shimmer': {
                    '0%': { backgroundPosition: '-200% 0' },
                    '100%': { backgroundPosition: '200% 0' },
                },
                'pulse-subtle': {
                    '0%, 100%': { opacity: '1' },
                    '50%': { opacity: '0.7' },
                },
                'spin-slow': {
                    '0%': { transform: 'rotate(0deg)' },
                    '100%': { transform: 'rotate(360deg)' },
                },
            },
            animation: {
                'fade-in': 'fade-in 150ms ease-out',
                'fade-out': 'fade-out 150ms ease-out',
                'slide-up': 'slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1)',
                'slide-down': 'slide-down 200ms cubic-bezier(0.16, 1, 0.3, 1)',
                'scale-in': 'scale-in 150ms cubic-bezier(0.16, 1, 0.3, 1)',
                'scale-out': 'scale-out 150ms cubic-bezier(0.16, 1, 0.3, 1)',
                'shimmer': 'shimmer 2s linear infinite',
                'pulse-subtle': 'pulse-subtle 2s ease-in-out infinite',
                'spin-slow': 'spin-slow 3s linear infinite',
            },
            // Box shadows (subtle, Linear-style)
            boxShadow: {
                'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
                'sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
                'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
                'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
                'focus': '0 0 0 3px rgba(94, 106, 210, 0.25)',
                'focus-destructive': '0 0 0 3px rgba(239, 68, 68, 0.25)',
            },
        },
    },
},
plugins: [],
}