import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        // Light Theme Colors ("Classic Heritage & Soft Sand")
        yotripLight: {
          bg: '#f6f0ed',        // Parchment - Global Page Backgrounds
          text: '#28536b',      // Yale Blue - Primary Text & Main Titles
          steel: '#7ea8be',     // Steel Blue - Active Navigation & Secondary Actions
          khaki: '#bbb193',     // Khaki Beige - Borders, Dividers, Muted States
          rosy: '#c2948a',      // Rosy Taupe - Special Highlight Badges, Notifications
        },
        // Dark Theme Colors ("Vintage Velvet & Aquatic Zest")
        yotripDark: {
          bg: '#513b56',        // Vintage Grape - Global Page Backgrounds
          surface: '#525174',   // Dusty Grape - Component Surfaces (Cards, Bubbles)
          lime: '#bce784',      // Lime Cream - Brand Text Highlights, Active Icons
          bondi: '#348aa7',     // Bondi Blue - Primary Action Buttons, Links
          emerald: '#5dd39e',   // Emerald - Success Utilities & "Tối ưu" badges
        },
        // CSS Variable based colors for smooth theme support
        theme: {
          bg: 'var(--background)',
          'bg-alt': 'var(--background-alt)',
          surface: 'var(--surface)',
          'surface-muted': 'var(--surface-muted)',
          'surface-hover': 'var(--surface-hover)',
          border: 'var(--border)',
          'border-light': 'var(--border-light)',
          'text': 'var(--text-primary)',
          'text-secondary': 'var(--text-secondary)',
          'text-accent': 'var(--text-accent)',
          'text-muted': 'var(--text-muted)',
          'text-disabled': 'var(--text-disabled)',
          primary: 'var(--primary)',
          'primary-hover': 'var(--primary-hover)',
          'primary-light': 'var(--primary-light)',
          secondary: 'var(--secondary)',
          'secondary-light': 'var(--secondary-light)',
          success: 'var(--success)',
          'success-light': 'var(--success-light)',
          danger: 'var(--danger)',
          'danger-light': 'var(--danger-light)',
          warning: 'var(--warning)',
          'warning-light': 'var(--warning-light)',
          info: 'var(--info)',
          'info-light': 'var(--info-light)',
        }
      },
      boxShadow: {
        'theme-sm': 'var(--shadow-sm)',
        'theme-md': 'var(--shadow-md)',
      }
    },
  },
  plugins: [],
};

export default config;