awoooi/apps/web/tailwind.config.ts

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)', // 發光效果
        },
      },

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

      // Nothing.tech 高對比墨水色
      textColor: {
        ink: '#111111',
        'ink-secondary': '#525252',
      },

      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 ====================
      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',
      },

      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' },
        },
      },

      // ==================== Spacing & Layout ====================
      borderRadius: {
        'glass': '12px',
        'card': '10px',
        'button': '6px',
      },

      boxShadow: {
        'glass': '0 4px 24px rgba(0, 0, 0, 0.06)',
        'glass-hover': '0 8px 32px rgba(0, 0, 0, 0.10)',
        'card': '0 2px 12px rgba(0, 0, 0, 0.04)',
        '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 ====================
      zIndex: {
        'modal': '100',
        'overlay': '90',
        'dropdown': '80',
        'header': '70',
        'sidebar': '60',
        'copilot': '50',
      },
    },
  },
  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: '12px',
          boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
        },
        '.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: '12px',
          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