/**
 * Shared Tailwind CSS Configuration
 * Designed for Enchun Digital Marketing website migration
 *
 * Source: Webflow CSS extraction
 * Date: 2026-01-31
 */

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: 'class', // Can use 'media' preference-based later
  content: [],
  theme: {
    extend: {
      // ============================================
      // 🎨 COLORS - From Webflow Extraction
      // ============================================

      colors: {
        // Primary Colors (主要色)
        primary: {
          DEFAULT: '#3898EC',
          dark: '#0082F3',
          light: '#67AEE1',
          hover: '#2895F7',
          DEFAULTContrast: '#FFFFFF',
        },
        secondary: {
          DEFAULT: '#F39C12',
          light: '#F6C456',
          dark: '#D84038',
          hover: '#E08E0B',
        },
        accent: {
          DEFAULT: '#D84038',
          light: '#F6C456',
          dark: '#EA384C',
        },

        // Neutral Colors (中性色 - Mapped to Tailwind defaults)
        white: '#FFFFFF',
        black: '#000000',
        slate: {
          50: '#FAFAFA',   // --color-gray-50
          100: '#F5F5F5',  // --color-gray-100
          200: '#F3F3F3',  // --color-gray-200
          300: '#EEEEEE',  // --color-gray-300
          400: '#DDDDDD',  // --color-gray-400
          500: '#C8C8C8',  // --color-gray-500
          600: '#999999',  // --color-gray-600 (text-muted)
          700: '#828282',  // --color-gray-700
          800: '#758696',  // --color-gray-800
          900: '#5D6C7B',  // --color-gray-900
          950: '#4F4F4F',  // --color-gray-950
        },

        // Text Colors (文字色)
        text: {
          primary: '#333333',    // --color-text-primary
          secondary: '#222222',  // --color-text-secondary
          muted: '#999999',      // --color-text-muted
          light: '#758696',      // --color-text-light
          inverse: '#FFFFFF',    // --color-text-inverse
        },

        // Link Colors (連結色)
        link: {
          DEFAULT: '#3083BF',
          hover: '#23608C',
        },

        // Border & Divider (邊框與分隔線)
        border: '#E2E8F0',
        divider: '#DDDDDD',

        // Category Colors (文章分類)
        category: {
          google: '#67AEE1',      // Google小學堂
          meta: '#8974DE',        // Meta小學堂
          news: '#3083BF',         // 行銷時事最前線
          enchun: '#3898EC',       // 恩群數位最新公告
        },

        // Badge Colors (標籤)
        badge: {
          hot: '#EA384C',         // Hot 標籤 (紅)
          new: '#67AEE1',         // New 標籤 (淡藍)
        },

        // Special Colors
        background: '#F2F2F2', // Grey 6 - Main background from Webflow
        surface: '#FAFAFA',
        surface2: '#F3F3F3',
      },

      // ============================================
      // 🔤 TYPOGRAPHY - From Webflow
      // ============================================

      fontFamily: {
        sans: [
          'Noto Sans TC',
          'Quicksand',
          'Arial',
          'sans-serif',
        ],
        heading: [
          'Noto Sans TC',
          'Quicksand',
          'Arial',
          'sans-serif',
        ],
        accent: [
          'Quicksand',
          'Noto Sans TC',
          'sans-serif',
        ],
      },

      fontSize: {
        // Webflow-based scale
        'xs': ['0.75rem', { lineHeight: '1.5' }],      // 12px
        'sm': ['0.875rem', { lineHeight: '1.5' }],    // 14px
        'base': ['1rem', { lineHeight: '1.5' }],       // 16px
        'lg': ['1.125rem', { lineHeight: '1.5' }],     // 18px
        'xl': ['1.25rem', { lineHeight: '1.5' }],      // 20px
        '2xl': ['1.5rem', { lineHeight: '1.5' }],       // 24px
        '3xl': ['1.875rem', { lineHeight: '1.5' }],     // 30px
        '4xl': ['2.25rem', { lineHeight: '1.5' }],      // 36px
        '5xl': ['3rem', { lineHeight: '1.5' }],         // 48px
        // Extra sizes
        '6xl': ['3.75rem', { lineHeight: '1' }],      // 60px
        '7xl': ['4.5rem', { lineHeight: '1' }],        // 72px
      },

      fontWeight: {
        light: '300',
        normal: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
      },

      lineHeight: {
        tight: '1.25',
        snug: '1.375',
        normal: '1.5',
        relaxed: '1.625',
        loose: '2',
      },

      // ============================================
      // 📏 SPACING - Tailwind Default + Custom
      // ============================================

      spacing: {
        '18': '4.5rem',     // 72px - container padding
        '20': '5rem',        // 80px - section padding
        '24': '6rem',        // 96px - large section
        '32': '8rem',        // 128px - extra large section
      },

      // ============================================
      // 📱 BREAKPOINTS - Webflow Original
      // ============================================

      screens: {
        // Webflow breakpoints (max-width based)
        'xs': '479px',     // < 479px (small mobile)
        'sm': '640px',     // 640px+ (mobile landscape)
        'md': '768px',     // 768px+ (tablet)
        'lg': '992px',     // 992px+ (desktop - matches 991px closely)
        'xl': '1024px',    // 1024px+ (large desktop)
        '2xl': '1280px',    // 1280px+ (xlarge desktop)
        '3xl': '1536px',    // 1536px+ (xxlarge desktop)
      },

      // ============================================
      // 🔲 BORDER RADIUS
      // ============================================

      borderRadius: {
        DEFAULT: '0.375rem', // 6px
        'none': '0',
        'sm': '0.125rem',    // 2px
        DEFAULT: '0.375rem', // 6px
        'md': '0.5rem',       // 8px
        'lg': '0.75rem',      // 12px
        'xl': '1rem',         // 16px
        '2xl': '1.5rem',      // 24px
        '3xl': '2rem',        // 32px
        'full': '9999px',
      },

      // ============================================
      // 💫 SHADOWS
      // ============================================

      boxShadow: {
        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06)',
        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
        '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
      },

      // ============================================
      // ⏱ TRANSITIONS
      // ============================================

      transitionDuration: {
        '150': '150ms',
        '200': '200ms',
        '250': '250ms',
        '300': '300ms',
        '350': '350ms',
        '400': '400ms',
        '500': '500ms',
        '600': '600ms',
        '700': '700ms',
        '1000': '1000ms',
      },

      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)',
        'in-out': 'cubic-bezier(0.4, 0, 0.6, 1)',
      },

      // ============================================
      // 🎯 Z-INDEX LAYERS
      // ============================================

      zIndex: {
        dropdown: 1000,
        sticky: 1020,
        modal: 1040,
        popover: 1060,
        tooltip: 1080,
      },

      // ============================================
      // 📐 LAYOUT
      // ============================================

      maxWidth: {
        'container': '1200px',    // Max content width
        'container-sm': '640px',
        'container-md': '768px',
        'container-lg': '1024px',
        'container-xl': '1280px',
      },

      // Container padding
      padding: {
        'container': '1.5rem',      // 24px mobile
        'container-lg': '2rem',       // 32px desktop
      },

      // Grid (Webflow uses 12-column grid)
      gridTemplateColumns: {
        12: 'repeat(12, minmax(0, 1fr))',
      },
      gap: {
        'DEFAULT': '1.25rem',     // 20px - Webflow grid gap
        '0': '0',
        'px': '1px',
      },

      // ============================================
      // 🎨 COMPONENT SPECIFIC
      // ============================================

      // Button styles
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(1rem)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },

      animation: {
        'fade-in': 'fadeIn 150ms ease-in-out',
        'slide-up': 'slideUp 250ms ease-in-out',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

export default config;