/**
 * EN: Tailwind CSS 4 Configuration
 * VI: Cấu hình Tailwind CSS 4
 *
 * Note: Tailwind CSS 4 uses CSS-first configuration with @theme directive in CSS files.
 * This config file extends the theme with additional utility classes based on CSS variables.
 * The main theme tokens are defined in src/styles/theme.css.
 *
 * Lưu ý: Tailwind CSS 4 sử dụng cấu hình CSS-first với @theme directive trong file CSS.
 * File config này mở rộng theme với các utility classes bổ sung dựa trên CSS variables.
 * Các theme tokens chính được định nghĩa trong src/styles/theme.css.
 */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './src/stories/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      // EN: Colors from CSS variables (theme.css)
      // VI: Màu sắc từ CSS variables (theme.css)
      colors: {
        bg: {
          primary: 'var(--bg-primary)',
          secondary: 'var(--bg-secondary)',
          tertiary: 'var(--bg-tertiary)',
          elevated: 'var(--bg-elevated)',
        },
        text: {
          primary: 'var(--text-primary)',
          secondary: 'var(--text-secondary)',
          tertiary: 'var(--text-tertiary)',
          inverse: 'var(--text-inverse)',
        },
        accent: {
          primary: 'var(--accent-primary)',
          secondary: 'var(--accent-secondary)',
          success: 'var(--accent-success)',
          warning: 'var(--accent-warning)',
          error: 'var(--accent-error)',
          info: 'var(--accent-info)',
        },
        chat: {
          'user-bubble': 'var(--chat-user-bubble)',
          'ai-bubble': 'var(--chat-ai-bubble)',
          'user-text': 'var(--chat-user-text)',
          'ai-text': 'var(--chat-ai-text)',
          timestamp: 'var(--chat-timestamp)',
          divider: 'var(--chat-divider)',
        },
        border: {
          primary: 'var(--border-primary)',
          secondary: 'var(--border-secondary)',
          focus: 'var(--border-focus)',
        },
        // EN: Brand colors for easy access / VI: Màu thương hiệu dễ sử dụng
        brand: {
          primary: {
            DEFAULT: 'var(--brand-primary)',
            light: 'var(--brand-primary-light)',
            dark: 'var(--brand-primary-dark)',
            contrast: 'var(--brand-primary-contrast)',
          },
          secondary: {
            DEFAULT: 'var(--brand-secondary)',
            light: 'var(--brand-secondary-light)',
            dark: 'var(--brand-secondary-dark)',
          },
          accent: {
            DEFAULT: 'var(--brand-accent)',
            light: 'var(--brand-accent-light)',
            dark: 'var(--brand-accent-dark)',
          },
        },
        // EN: Glassmorphism utilities (subtle x.ai style)
        // VI: Utilities glassmorphism (phong cách x.ai tinh tế)
        glass: {
          // Backgrounds
          bg: 'var(--glass-bg-default)',
          'bg-subtle': 'var(--glass-bg-subtle)',
          'bg-default': 'var(--glass-bg-default)',
          'bg-medium': 'var(--glass-bg-medium)',
          'bg-hover': 'var(--glass-bg-hover)',
          'bg-active': 'var(--glass-bg-active)',
          // Borders
          border: 'var(--glass-border-default)',
          'border-subtle': 'var(--glass-border-subtle)',
          'border-default': 'var(--glass-border-default)',
          'border-hover': 'var(--glass-border-hover)',
          'border-focus': 'var(--glass-border-focus)',
        },
      },
      // EN: Glass background colors
      // VI: Màu nền glass
      backgroundColor: {
        'glass-subtle': 'var(--glass-bg-subtle)',
        'glass': 'var(--glass-bg-default)',
        'glass-medium': 'var(--glass-bg-medium)',
        'glass-hover': 'var(--glass-bg-hover)',
        'glass-active': 'var(--glass-bg-active)',
      },
      // EN: Glass border colors
      // VI: Màu viền glass
      borderColor: {
        'glass-subtle': 'var(--glass-border-subtle)',
        'glass': 'var(--glass-border-default)',
        'glass-hover': 'var(--glass-border-hover)',
        'glass-focus': 'var(--glass-border-focus)',
      },
      // EN: Font families from CSS variables
      // VI: Font families từ CSS variables
      fontFamily: {
        sans: ['var(--font-sans)', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      // EN: Font sizes from CSS variables (for utility classes)
      // VI: Kích thước chữ từ CSS variables (cho utility classes)
      fontSize: {
        '6xl': ['var(--text-6xl)', { lineHeight: '1' }],
        '5xl': ['var(--text-5xl)', { lineHeight: '1' }],
        '4xl': ['var(--text-4xl)', { lineHeight: '1.1' }],
        '3xl': ['var(--text-3xl)', { lineHeight: '1.2' }],
        '2xl': ['var(--text-2xl)', { lineHeight: '1.3' }],
        'xl': ['var(--text-xl)', { lineHeight: '1.4' }],
        'lg': ['var(--text-lg)', { lineHeight: '1.5' }],
        'base': ['var(--text-base)', { lineHeight: '1.5' }],
        'sm': ['var(--text-sm)', { lineHeight: '1.5' }],
        'xs': ['var(--text-xs)', { lineHeight: '1.5' }],
      },
      // EN: Font weights from CSS variables
      // VI: Độ đậm chữ từ CSS variables
      fontWeight: {
        light: 'var(--font-light)',
        normal: 'var(--font-normal)',
        medium: 'var(--font-medium)',
        semibold: 'var(--font-semibold)',
        bold: 'var(--font-bold)',
      },
      // EN: Spacing from CSS variables (extends default Tailwind spacing)
      // VI: Khoảng cách từ CSS variables (mở rộng spacing mặc định của Tailwind)
      spacing: {
        'sidebar': 'var(--sidebar-width)',
        'chat-max': 'var(--chat-max-width)',
        // EN: Additional spacing utilities using CSS variables
        // VI: Các utility spacing bổ sung sử dụng CSS variables
        '0': 'var(--space-0)',
        '1': 'var(--space-1)',
        '2': 'var(--space-2)',
        '3': 'var(--space-3)',
        '4': 'var(--space-4)',
        '5': 'var(--space-5)',
        '6': 'var(--space-6)',
        '8': 'var(--space-8)',
        '10': 'var(--space-10)',
        '12': 'var(--space-12)',
        '16': 'var(--space-16)',
        '20': 'var(--space-20)',
      },
      // EN: Border radius from CSS variables
      // VI: Bo góc từ CSS variables
      borderRadius: {
        sm: 'var(--radius-sm)',
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
        xl: 'var(--radius-xl)',
        '2xl': 'var(--radius-2xl)',
        full: 'var(--radius-full)',
      },
      // EN: Box shadows from CSS variables
      // VI: Đổ bóng từ CSS variables
      // EN: Brand gradients / VI: Gradients thương hiệu
      backgroundImage: {
        'brand-gradient': 'var(--brand-gradient-primary)',
        'brand-gradient-accent': 'var(--brand-gradient-accent)',
        'brand-gradient-vertical': 'var(--brand-gradient-vertical)',
      },
      // EN: Extended shadows (including glass shadows)
      // VI: Shadows mở rộng (bao gồm glass shadows)
      boxShadow: {
        sm: 'var(--shadow-sm)',
        md: 'var(--shadow-md)',
        lg: 'var(--shadow-lg)',
        xl: 'var(--shadow-xl)',
        glow: 'var(--shadow-glow)',
        brand: 'var(--shadow-brand)',
        'brand-lg': 'var(--shadow-brand-lg)',
        colored: 'var(--shadow-colored)',
        // Glass shadows
        'glass-sm': 'var(--glass-shadow-sm)',
        'glass': 'var(--glass-shadow-md)',
        'glass-md': 'var(--glass-shadow-md)',
        'glass-lg': 'var(--glass-shadow-lg)',
        'glass-inset': 'var(--glass-shadow-inset)',
      },
      // EN: Glass backdrop blur levels / VI: Các mức backdrop blur cho glass
      backdropBlur: {
        'glass-sm': 'var(--glass-blur-sm)',
        'glass': 'var(--glass-blur-md)',
        'glass-md': 'var(--glass-blur-md)',
        'glass-lg': 'var(--glass-blur-lg)',
        'glass-xl': 'var(--glass-blur-xl)',
      },
      // EN: Animation timing functions (including motion easing)
      // VI: Hàm thời gian animation (bao gồm motion easing)
      transitionTimingFunction: {
        'in': 'var(--ease-in)',
        'out': 'var(--ease-out)',
        'in-out': 'var(--ease-in-out)',
        spring: 'var(--ease-spring)',
        // Motion easing (x.ai inspired)
        smooth: 'var(--motion-ease-smooth)',
        glide: 'var(--motion-ease-glide)',
      },
      // EN: Animation durations (including motion durations)
      // VI: Thời lượng animation (bao gồm motion durations)
      transitionDuration: {
        fast: 'var(--duration-fast)',
        normal: 'var(--duration-normal)',
        slow: 'var(--duration-slow)',
        slower: 'var(--duration-slower)',
        // Motion durations (x.ai style)
        instant: 'var(--motion-duration-instant)',
        quick: 'var(--motion-duration-quick)',
        'motion-normal': 'var(--motion-duration-normal)',
        'motion-smooth': 'var(--motion-duration-smooth)',
      },
      // EN: Max widths for containers
      // VI: Chiều rộng tối đa cho containers
      maxWidth: {
        'container-sm': 'var(--container-sm)',
        'container-md': 'var(--container-md)',
        'container-lg': 'var(--container-lg)',
        'container-xl': 'var(--container-xl)',
        'container-2xl': 'var(--container-2xl)',
        'chat-max': 'var(--chat-max-width)',
      },
      // EN: Safe area utilities for mobile
      // VI: Utilities safe area cho mobile
      padding: {
        'safe-top': 'var(--mobile-safe-area-top)',
        'safe-bottom': 'var(--mobile-safe-area-bottom)',
      },
      margin: {
        'safe-top': 'var(--mobile-safe-area-top)',
        'safe-bottom': 'var(--mobile-safe-area-bottom)',
      },
      // EN: Screen breakpoints (matching CSS variables)
      // VI: Điểm ngắt màn hình (khớp với CSS variables)
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      // EN: Line heights from CSS variables
      // VI: Chiều cao dòng từ CSS variables
      lineHeight: {
        none: 'var(--leading-none)',
        tight: 'var(--leading-tight)',
        snug: 'var(--leading-snug)',
        normal: 'var(--leading-normal)',
        relaxed: 'var(--leading-relaxed)',
        loose: 'var(--leading-loose)',
      },
    },
  },
  plugins: [
    // Custom glass utilities for Tailwind CSS 4
    function({ addUtilities }) {
      const glassUtilities = {
        '.glass-panel': {
          background: 'var(--glass-bg-default)',
          'backdrop-filter': 'blur(var(--glass-blur-md))',
          '-webkit-backdrop-filter': 'blur(var(--glass-blur-md))',
          border: '1px solid var(--glass-border-default)',
          'box-shadow': 'var(--glass-shadow-md), var(--glass-shadow-inset)',
        },
        '.glass-panel:hover': {
          background: 'var(--glass-bg-hover)',
          'border-color': 'var(--glass-border-hover)',
          transition: 'all var(--motion-duration-quick) var(--motion-ease-smooth)',
        },
      };
      addUtilities(glassUtilities);
    },
    // Mobile safe area utilities
    function({ addUtilities }) {
      const mobileUtilities = {
        '.safe-area-inset-top': {
          'padding-top': 'var(--mobile-safe-area-top)',
        },
        '.safe-area-inset-bottom': {
          'padding-bottom': 'var(--mobile-safe-area-bottom)',
        },
        '.pb-safe-bottom': {
          'padding-bottom': 'calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom))',
        },
        '.mobile-layout': {
          'min-height': '100vh',
          'min-height': '100dvh', // Dynamic viewport height for mobile
        },
      };
      addUtilities(mobileUtilities);
    },
  ],
};