/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{ts,tsx}',
    '../../packages/ui-web/src/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Inter',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'Segoe UI',
          'Roboto',
          'Helvetica Neue',
          'Arial',
          'sans-serif',
        ],
        display: ['Outfit', 'Inter', 'system-ui', 'sans-serif'],
        mono: [
          'JetBrains Mono',
          'ui-monospace',
          'SFMono-Regular',
          'Menlo',
          'Monaco',
          'Consolas',
          'monospace',
        ],
      },
      colors: {
        ink: {
          950: '#050507',
          900: '#0A0A0F',
          800: '#111118',
          700: '#1A1A24',
          600: '#252533',
          500: '#3A3A4D',
        },
        brand: {
          50: '#EEF0FF',
          100: '#DDE0FF',
          200: '#BDC2FF',
          300: '#9198FF',
          400: '#6D73FF',
          500: '#4F46E5',
          600: '#4338CA',
          700: '#3730A3',
          800: '#312E81',
          900: '#1E1B4B',
        },
        // Clean-Rail design tokens. RGB-tuple form so alpha modifiers
        // (e.g. bg-surface/50) work under both themes.
        surface: 'rgb(var(--bg-rgb) / <alpha-value>)',
        'surface-2': 'rgb(var(--bg-2-rgb) / <alpha-value>)',
        'surface-3': 'rgb(var(--bg-3-rgb) / <alpha-value>)',
        fg: 'rgb(var(--fg-rgb) / <alpha-value>)',
        'fg-muted': 'rgb(var(--fg-muted-rgb) / <alpha-value>)',
        accent: 'rgb(var(--accent-rgb) / <alpha-value>)',
        'accent-fg': 'rgb(var(--accent-fg-rgb) / <alpha-value>)',
        // Line has baked-in theme-specific alpha — direct var, no modifier.
        line: 'var(--line)',
      },
      animation: {
        'blob-a': 'blob 22s ease-in-out infinite',
        'blob-b': 'blob 28s ease-in-out infinite reverse',
        'fade-in': 'fadeIn 400ms ease-out',
        'slide-up': 'slideUp 350ms ease-out',
        'pulse-ring': 'pulseRing 2s ease-out infinite',
        'audio-pulse': 'audioPulse 1.3s ease-out infinite',
        'live-dot': 'liveDotPulse 1.5s ease-in-out infinite',
        'slide-in-call': 'slideInCall 0.4s cubic-bezier(0.22,1,0.36,1)',
        'fs-hint': 'fsHintFade 3.5s ease-out forwards',
      },
      keyframes: {
        blob: {
          '0%, 100%': { transform: 'translate(0px, 0px) scale(1)' },
          '33%': { transform: 'translate(40px, -60px) scale(1.1)' },
          '66%': { transform: 'translate(-30px, 30px) scale(0.9)' },
        },
        fadeIn: {
          from: { opacity: '0' },
          to: { opacity: '1' },
        },
        slideUp: {
          from: { opacity: '0', transform: 'translateY(8px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        pulseRing: {
          '0%': { transform: 'scale(0.85)', opacity: '0.6' },
          '100%': { transform: 'scale(1.25)', opacity: '0' },
        },
        audioPulse: {
          '0%': { transform: 'scale(1)', opacity: '0.8' },
          '100%': { transform: 'scale(1.3)', opacity: '0' },
        },
        liveDotPulse: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.4' },
        },
        slideInCall: {
          from: { opacity: '0', transform: 'translateY(20px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        fsHintFade: {
          '0%': { opacity: '0', transform: 'translate(-50%, -6px)' },
          '15%, 75%': { opacity: '1', transform: 'translate(-50%, 0)' },
          '100%': { opacity: '0', transform: 'translate(-50%, -6px)' },
        },
      },
      boxShadow: {
        glow: '0 0 40px -8px rgba(99, 102, 241, 0.35)',
        'call-card': '0 20px 60px rgba(0,0,0,0.1)',
        'call-card-dark': '0 20px 60px rgba(0,0,0,0.5)',
        'pip-call': '0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15)',
        'accept-btn': '0 4px 14px rgba(22,163,74,0.3)',
      },
    },
  },
  plugins: [],
};