import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Gmail 2023 palette (M3 — “dynamic color” variant)
        gmail: {
          blue: '#0b57d0',
          'blue-light': '#c2e7ff',
          'blue-hover': '#e8f0fe',
          'blue-focus': '#d3e3fd',
          surface: '#f6f8fc',
          'surface-2': '#eef3fb',
          border: '#e8eaed',
          'border-strong': '#dadce0',
          'text-primary': '#202124',
          'text-secondary': '#5f6368',
          'text-muted': '#80868b',
          unread: '#202124',
          read: '#5f6368',
          selected: '#d3e3fd',
          hover: '#f2f6fc',
          'row-hover': '#f5f7fa',
          'compose-btn': '#c2e7ff',
          important: '#e37400',
          star: '#f9ab00',
        },
      },
      fontFamily: {
        sans: ['"Google Sans"', 'Roboto', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        'mail-xs': ['0.75rem', { lineHeight: '1rem' }],       // 12px
        'mail-sm': ['0.8125rem', { lineHeight: '1.125rem' }], // 13px
        'mail-base': ['0.875rem', { lineHeight: '1.25rem' }], // 14px
      },
      boxShadow: {
        'gmail-search': '0 1px 1px rgba(0,0,0,.1), 0 1px 3px 1px rgba(60,64,67,.08)',
        'gmail-compose': '0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)',
        'gmail-compose-hover': '0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15)',
        'gmail-row-hover': 'inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)',
      },
    },
  },
  plugins: [],
} satisfies Config;