pn-new-crm/tailwind.config.ts

import type { Config } from 'tailwindcss';
import tailwindcssAnimate from 'tailwindcss-animate';

export default {
  darkMode: ['class', 'class'],
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        brand: {
          '50': '#d8e5f4',
          '100': '#b1cbe9',
          '200': '#89b0de',
          '300': '#6196d3',
          '400': '#3a7bc8',
          '500': '#2f6ab5',
          '600': '#255a9e',
          '700': '#1c4a87',
          DEFAULT: '#3a7bc8',
          dark: '#1e2844',
        },
        navy: {
          '50': '#cdcfd6',
          '100': '#9ea1af',
          '200': '#71768a',
          '300': '#474e66',
          '400': '#1e2844',
          '500': '#171f35',
          '600': '#101625',
          DEFAULT: '#1e2844',
        },
        sage: {
          DEFAULT: '#dae3c1',
          light: '#edf1e2',
          dark: '#b8c49e',
        },
        mint: {
          DEFAULT: '#add5b3',
          light: '#d6ead9',
          dark: '#7dba85',
        },
        teal: {
          DEFAULT: '#83aab1',
          light: '#b1cdd2',
          dark: '#5a8a92',
        },
        purple: {
          DEFAULT: '#685aa3',
          light: '#a49ac6',
          dark: '#4d4280',
        },
        success: {
          DEFAULT: '#2d8a4e',
          bg: '#e8f5e9',
          border: '#a5d6a7',
        },
        warning: {
          DEFAULT: '#e6a817',
          bg: '#fff8e1',
          border: '#ffe082',
        },
        error: {
          DEFAULT: '#d32f2f',
          bg: '#ffebee',
          border: '#ef9a9a',
        },
        sidebar: {
          DEFAULT: '#1e2844',
          text: '#cdcfd6',
          hover: '#171f35',
          active: '#3a7bc8',
          divider: '#474e66',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'Arial', 'sans-serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
        serif: ['Georgia', 'Times New Roman', 'serif'],
      },
      boxShadow: {
        xs: '0 1px 2px 0 rgb(15 23 42 / 0.04)',
        sm: '0 2px 4px -1px rgb(15 23 42 / 0.06)',
        DEFAULT: '0 1px 3px rgba(30, 40, 68, 0.10), 0 1px 2px rgba(30, 40, 68, 0.06)',
        md: '0 4px 12px -2px rgb(15 23 42 / 0.08)',
        lg: '0 12px 32px -8px rgb(15 23 42 / 0.12)',
        xl: '0 20px 25px rgba(30, 40, 68, 0.10), 0 8px 10px rgba(30, 40, 68, 0.04)',
        glow: '0 0 0 4px rgb(58 123 200 / 0.12)',
      },
      borderRadius: {
        sm: '0.375rem',
        DEFAULT: '0.375rem',
        md: '0.5rem',
        lg: '0.625rem',
        xl: '0.875rem',
      },
      backgroundImage: {
        'gradient-brand': 'linear-gradient(135deg, #3a7bc8 0%, #2f6ab5 100%)',
        'gradient-brand-soft': 'linear-gradient(135deg, #d8e5f4 0%, #ffffff 100%)',
        'gradient-success': 'linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%)',
        'gradient-warning': 'linear-gradient(135deg, #fef3c7 0%, #ffffff 100%)',
      },
      transitionTimingFunction: {
        spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
      width: {
        sidebar: '256px',
        'sidebar-collapsed': '64px',
      },
      transitionDuration: {
        sidebar: '200ms',
        fast: '150ms',
        base: '200ms',
        slow: '300ms',
      },
      spacing: {
        safe: 'env(safe-area-inset-bottom)',
        'safe-top': 'env(safe-area-inset-top)',
        'safe-bottom': 'env(safe-area-inset-bottom)',
        'safe-left': 'env(safe-area-inset-left)',
        'safe-right': 'env(safe-area-inset-right)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
        'badge-pop': {
          '0%': { transform: 'scale(0.5)', opacity: '0' },
          '60%': { transform: 'scale(1.18)', opacity: '1' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'badge-pop': 'badge-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)',
      },
    },
  },
  plugins: [tailwindcssAnimate],
} satisfies Config;