/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      /* ========================================
         SEQUENSY COLOR SYSTEM
         ======================================== */
      colors: {
        // shadcn/ui base tokens
        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))'
        },

        // Sequensy Slate - Primary Neutrals
        slate: {
          50: 'var(--seq-slate-50)',
          100: 'var(--seq-slate-100)',
          200: 'var(--seq-slate-200)',
          300: 'var(--seq-slate-300)',
          400: 'var(--seq-slate-400)',
          500: 'var(--seq-slate-500)',
          600: 'var(--seq-slate-600)',
          700: 'var(--seq-slate-700)',
          800: 'var(--seq-slate-800)',
          900: 'var(--seq-slate-900)',
          950: 'var(--seq-slate-950)',
        },

        // Sequensy Cyan - Accent Color
        cyan: {
          50: 'var(--seq-cyan-50)',
          100: 'var(--seq-cyan-100)',
          300: 'var(--seq-cyan-300)',
          400: 'var(--seq-cyan-400)',
          500: 'var(--seq-cyan-500)',
          600: 'var(--seq-cyan-600)',
          700: 'var(--seq-cyan-700)',
        },

        // Workflow Node Types
        trigger: {
          DEFAULT: 'var(--seq-trigger)',
          muted: 'var(--seq-trigger-muted)',
          text: 'var(--seq-trigger-text)',
        },
        action: {
          DEFAULT: 'var(--seq-action)',
          muted: 'var(--seq-action-muted)',
          text: 'var(--seq-action-text)',
        },
        operator: {
          DEFAULT: 'var(--seq-operator)',
          muted: 'var(--seq-operator-muted)',
          text: 'var(--seq-operator-text)',
        },

        // Status Colors
        success: {
          DEFAULT: 'var(--seq-success)',
          muted: 'var(--seq-success-muted)',
          text: 'var(--seq-success-text)',
        },
        warning: {
          DEFAULT: 'var(--seq-warning)',
          muted: 'var(--seq-warning-muted)',
          text: 'var(--seq-warning-text)',
        },
        error: {
          DEFAULT: 'var(--seq-error)',
          muted: 'var(--seq-error-muted)',
          text: 'var(--seq-error-text)',
        },
        info: {
          DEFAULT: 'var(--seq-info)',
          muted: 'var(--seq-info-muted)',
          text: 'var(--seq-info-text)',
        },
      },

      /* ========================================
         TYPOGRAPHY
         ======================================== */
      fontFamily: {
        display: ['Plus Jakarta Sans', 'system-ui', '-apple-system', 'sans-serif'],
        body: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },

      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      },

      letterSpacing: {
        tighter: '-0.05em',
        tight: '-0.025em',
        normal: '0',
        wide: '0.025em',
        wider: '0.05em',
      },

      /* ========================================
         BORDER RADIUS
         ======================================== */
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
        xl: 'var(--radius-xl)',
      },

      /* ========================================
         SHADOWS
         ======================================== */
      boxShadow: {
        'xs': 'var(--shadow-xs)',
        'sm': 'var(--shadow-sm)',
        'md': 'var(--shadow-md)',
        'lg': 'var(--shadow-lg)',
        'xl': 'var(--shadow-xl)',
        'focus': 'var(--shadow-focus)',
        'error': 'var(--shadow-error)',
        'glow-trigger': 'var(--glow-trigger)',
        'glow-action': 'var(--glow-action)',
        'glow-operator': 'var(--glow-operator)',
        'glow-cyan': 'var(--glow-cyan)',
      },

      /* ========================================
         SPACING
         ======================================== */
      spacing: {
        '0.5': 'var(--space-0-5)',
        '1.5': 'var(--space-1-5)',
        '2.5': 'var(--space-2-5)',
        '3.5': 'var(--space-3-5)',
        '18': '4.5rem',
        '22': '5.5rem',
      },

      /* ========================================
         ANIMATIONS
         ======================================== */
      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' }
        },
        'fade-slide-up': {
          from: { opacity: '0', transform: 'translateY(8px)' },
          to: { opacity: '1', transform: 'translateY(0)' }
        },
        'fade-in': {
          from: { opacity: '0' },
          to: { opacity: '1' }
        },
        'slide-in-right': {
          from: { transform: 'translateX(100%)', opacity: '0' },
          to: { transform: 'translateX(0)', opacity: '1' }
        },
        'subtle-pulse': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.6' }
        },
        'flow-pulse': {
          '0%, 100%': { strokeDashoffset: '0' },
          '50%': { strokeDashoffset: '8' }
        },
        'shimmer': {
          '100%': { transform: 'translateX(100%)' }
        },
      },

      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'fade-slide-up': 'fade-slide-up 0.3s ease-out forwards',
        'fade-in': 'fade-in 0.3s ease-out forwards',
        'slide-in-right': 'slide-in-right 0.3s ease-out forwards',
        'subtle-pulse': 'subtle-pulse 2s ease-in-out infinite',
        'flow-pulse': 'flow-pulse 2s linear infinite',
        'shimmer': 'shimmer 1.5s infinite',
      },

      /* ========================================
         TRANSITIONS
         ======================================== */
      transitionDuration: {
        'instant': '50ms',
        'fast': '150ms',
        'normal': '200ms',
        'slow': '300ms',
        'slower': '500ms',
      },

      transitionTimingFunction: {
        'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
        'in': 'cubic-bezier(0.4, 0, 1, 1)',
        'out': 'cubic-bezier(0, 0, 0.2, 1)',
        'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      },
    }
  },
  plugins: [],
}
