import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    '../../packages/lewooogo-ui/src/**/*.{js,ts,jsx,tsx}',
  ],
  // 移除 darkMode - 全面採用明亮主題
  theme: {
    extend: {
      // ==================== Nothing.tech Light Theme Colors ====================
      colors: {
        // 核心色彩 - 明亮主題
        nothing: {
          black: '#111111',      // 主文字色
          white: '#FFFFFF',      // 純白背景
          cream: '#FAFAFA',      // 極淺灰背景
          red: '#FF3300',        // 警示橘紅 (高對比)
          gray: {
            50: '#FAFAFA',
            100: '#F5F5F5',
            200: '#E5E5E5',
            300: '#D4D4D4',
            400: '#A3A3A3',
            500: '#737373',
            600: '#525252',
            700: '#404040',
            800: '#333333',       // 次要文字
            900: '#111111',       // 主要文字
          },
        },
        status: {
          healthy: '#22C55E',     // 綠色 - 健康
          thinking: '#8B5CF6',    // 紫色 - AI 思考中
          syncing: '#3B82F6',     // 藍色 - 同步中
          warning: '#F59E0B',     // 黃色 - 警告
          critical: '#FF3300',    // 橘紅 - 嚴重
          idle: '#A3A3A3',        // 灰色 - 閒置
        },
        // 智慧之眼 - OpenClaw 品牌藍
        claw: {
          blue: '#4A90D9',        // 智慧之眼核心藍
          'blue-light': '#6BA3E0', // 淺藍光暈
          'blue-glow': 'rgba(74, 144, 217, 0.3)', // 發光效果
        },
        // ==================== Anthropic Warmth (AI中心 v6) ====================
        'ai-center': {
          'bg-base':     '#f5f4ed',   // 頁面底色（米色）
          'bg-surface':  '#faf9f3',   // 表面色（暖白）
          'bg-feed':     '#f0efe8',   // 事件列底色
          border:        '#e0ddd4',   // 邊框（暖灰）
          'text-primary':  '#141413', // 主文字
          'text-secondary':'#87867f', // 次要文字
          'text-muted':  '#b0ad9f',   // 標籤文字
          accent:        '#d97757',   // 橘紅 Accent（active/hover/badge）
          'accent-light':'rgba(217,119,87,0.08)', // active 背景
        },
      },

      // ==================== Typography ====================
      fontFamily: {
        heading: ['var(--font-heading)', 'Syne', 'system-ui', 'sans-serif'],
        body:    ['var(--font-body)', 'DM Mono', 'monospace'],
        display: ['var(--font-heading)', 'Syne', 'system-ui', 'sans-serif'],
        mono:    ['var(--font-mono)', 'JetBrains Mono', 'monospace'],
        // DSEG7 點陣字體 - 用於核心指標數字顯示
        'dot-matrix': ['DSEG7-Classic', 'var(--font-mono)', 'monospace'],
      },

      // Nothing.tech 文字層級系統
      textColor: {
        ink: '#111111',
        'ink-secondary': '#525252',
        // 5層文字層級
        primary:   '#111111',   // 主標題、最重要資訊
        secondary: '#333333',   // 大/中標題、正文
        tertiary:  '#525252',   // 小標題、說明文字
        muted:     '#737373',   // 輔助標籤、時間戳
        disabled:  '#A3A3A3',   // 停用狀態
      },

      fontSize: {
        'display-xl': ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-lg': ['2.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-md': ['1.75rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
        'display-sm': ['1.25rem', { lineHeight: '1.3', letterSpacing: '0' }],
      },

      // ==================== Light Glassmorphism ====================
      backdropBlur: {
        glass: '16px',
        'glass-heavy': '24px',
      },

      backgroundColor: {
        'glass-white': 'rgba(255, 255, 255, 0.70)',
        'glass-light': 'rgba(250, 250, 250, 0.80)',
      },

      borderColor: {
        'glass-border': 'rgba(0, 0, 0, 0.08)',
        'glass-border-hover': 'rgba(0, 0, 0, 0.15)',
      },

      // ==================== Animations ====================
      // Phase 19.A: Terminal Animation System
      // @see lib/constants/animations.ts
      animation: {
        'breathe': 'breathe 2s ease-in-out infinite',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'pulse-3s': 'pulse3s 0.5s ease-in-out 6', // 6 iterations x 0.5s = 3s total
        'fade-in': 'fadeIn 200ms ease-out',
        'slide-in-right': 'slideInRight 300ms cubic-bezier(0.16, 1, 0.3, 1)',
        'slide-in-up': 'slideInUp 300ms cubic-bezier(0.16, 1, 0.3, 1)',
        'scan': 'scan 2s linear infinite',
        // Magic UI Effects
        'border-beam': 'border-beam var(--duration, 6s) linear infinite',
        'ripple': 'ripple 600ms linear',
        'shimmer': 'shimmer 2s linear infinite',
        // Phase 19: Terminal Animations
        'terminal-open': 'terminal-open 250ms cubic-bezier(0.16, 1, 0.3, 1)',
        'terminal-close': 'terminal-close 200ms ease-out',
        'typing-cursor': 'typing-cursor 530ms ease-in-out infinite',
        'thinking-dot': 'thinking-dot 1200ms ease-in-out infinite',
        'message-slide-in': 'message-slide-in 200ms cubic-bezier(0.16, 1, 0.3, 1)',
        'stream-char': 'stream-char 100ms ease-out',
      },

      keyframes: {
        breathe: {
          '0%, 100%': { opacity: '0.5' },
          '50%': { opacity: '1' },
        },
        // Timeline 最新項目閃爍 (3秒後停止)
        pulse3s: {
          '0%, 100%': { opacity: '1', backgroundColor: 'transparent' },
          '50%': { opacity: '0.7', backgroundColor: 'rgba(139, 92, 246, 0.05)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideInRight: {
          '0%': { transform: 'translateX(100%)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        slideInUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        scan: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(100%)' },
        },
        // Magic UI Border Beam
        'border-beam': {
          '0%': { '--start': '0' },
          '100%': { '--start': '1' },
        },
        // Ripple effect for button clicks
        ripple: {
          '0%': { transform: 'scale(0)', opacity: '0.5' },
          '100%': { transform: 'scale(4)', opacity: '0' },
        },
        // Shimmer effect
        shimmer: {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' },
        },
        // Phase 19: Terminal Keyframes
        'terminal-open': {
          '0%': { opacity: '0', transform: 'translateY(20px) scale(0.98)' },
          '100%': { opacity: '1', transform: 'translateY(0) scale(1)' },
        },
        'terminal-close': {
          '0%': { opacity: '1', transform: 'translateY(0) scale(1)' },
          '100%': { opacity: '0', transform: 'translateY(20px) scale(0.98)' },
        },
        'typing-cursor': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0' },
        },
        'thinking-dot': {
          '0%, 80%, 100%': { opacity: '0.3', transform: 'scale(0.8)' },
          '40%': { opacity: '1', transform: 'scale(1)' },
        },
        'message-slide-in': {
          '0%': { opacity: '0', transform: 'translateX(-10px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
        'stream-char': {
          '0%': { opacity: '0', transform: 'translateY(2px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },

      // ==================== Spacing & Layout ====================
      borderRadius: {
        'wooo-xs': 'var(--wooo-radius-xs)',
        'wooo-sm': 'var(--wooo-radius-sm)',
        'glass': 'var(--wooo-radius-panel)',
        'card': 'var(--wooo-radius-card)',
        'button': 'var(--wooo-radius-control)',
        'pill': 'var(--wooo-radius-pill)',
      },

      boxShadow: {
        'glass': 'var(--wooo-shadow-panel)',
        'glass-hover': '0 8px 32px rgba(0, 0, 0, 0.10)',
        'card': 'var(--wooo-shadow-card)',
        'card-hover': '0 4px 20px rgba(0, 0, 0, 0.08)',
        'glow-red': '0 0 16px rgba(255, 51, 0, 0.3)',
        'glow-green': '0 0 16px rgba(34, 197, 94, 0.3)',
        'glow-blue': '0 0 16px rgba(59, 130, 246, 0.3)',
        'glow-purple': '0 0 16px rgba(139, 92, 246, 0.3)',
      },

      // ==================== Z-Index Scale ====================
      // Phase 19: 已遷移至 lib/constants/z-index.ts
      // 使用 inline style={{ zIndex: Z_INDEX.XXX }} 取代 Tailwind classes
      // @see lib/constants/z-index.ts
    },
  },
  plugins: [
    // Custom plugin for light glass effect
    function ({ addUtilities }: { addUtilities: Function }) {
      addUtilities({
        // 白色磨砂玻璃 (主要卡片)
        '.glass-card': {
          background: 'rgba(255, 255, 255, 0.70)',
          backdropFilter: 'blur(16px)',
          '-webkit-backdrop-filter': 'blur(16px)',
          border: '1px solid rgba(0, 0, 0, 0.08)',
          borderRadius: 'var(--wooo-radius-panel)',
          boxShadow: 'var(--wooo-shadow-panel)',
        },
        '.glass-card-hover': {
          background: 'rgba(255, 255, 255, 0.80)',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.10)',
          borderColor: 'rgba(0, 0, 0, 0.12)',
        },
        // 頂部導航列
        '.glass-header': {
          background: 'rgba(255, 255, 255, 0.85)',
          backdropFilter: 'blur(20px)',
          '-webkit-backdrop-filter': 'blur(20px)',
          borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
        },
        // Copilot 面板
        '.glass-copilot': {
          background: 'rgba(250, 250, 250, 0.90)',
          backdropFilter: 'blur(20px)',
          '-webkit-backdrop-filter': 'blur(20px)',
          border: '1px solid rgba(139, 92, 246, 0.2)',
          borderRadius: 'var(--wooo-radius-panel)',
          boxShadow: '0 4px 24px rgba(139, 92, 246, 0.1)',
        },
        // AI 思考指示器
        '.ai-indicator': {
          animation: 'breathe 2s ease-in-out infinite',
        },
        // 狀態指示點
        '.status-dot': {
          width: '8px',
          height: '8px',
          borderRadius: '50%',
        },
      })
    },
  ],
}

export default config