import type { Config } from 'tailwindcss';

const PRIMARY = '#275354';

const config: Config = {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    borderRadius: {
      none: '0px',
      sm: '2px',
      DEFAULT: '4px',
      md: '6px',
      lg: '8px',
      xl: '12px',
      '2xl': '16px',
      full: '9999px',
    },
    boxShadow: {
      sm: '0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 1px -1px rgba(15, 23, 42, 0.06)',
      DEFAULT: '0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05)',
      md: '0 4px 6px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -3px rgba(15, 23, 42, 0.05)',
      lg: '0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05)',
      xl: '0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06)',
      none: 'none',
    },
    colors: {
      ink: '#0F172A',
      white: '#FFFFFF',
      paper: '#F6F8F9',
      primary: {
        50: '#EFF6F6',
        100: '#D8E8E8',
        200: '#B1D1D1',
        300: '#82B1B2',
        400: '#558A8B',
        500: PRIMARY,
        600: '#1E4041',
        700: '#173334',
        800: '#102626',
        900: '#0B1B1B',
      },
      gray: {
        50: '#F8FAFC',
        100: '#F1F5F9',
        200: '#E2E8F0',
        300: '#CBD5E1',
        400: '#94A3B8',
        500: '#64748B',
        600: '#475569',
        700: '#334155',
        800: '#1E293B',
        900: '#0F172A',
      },
      red: {
        400: '#F87171',
        500: '#EF4444',
        600: '#DC2626',
        700: '#B91C1C',
      },
      green: {
        400: '#4ADE80',
        500: '#22C55E',
        600: '#16A34A',
        700: '#15803D',
      },
      amber: {
        400: '#FBBF24',
        500: '#F59E0B',
        600: '#D97706',
        700: '#B45309',
      },
    },
    fontFamily: {
      sans: [
        '"Noto Sans SC"', '"PingFang SC"', '"Microsoft YaHei"',
        'ui-sans-serif', 'system-ui', 'sans-serif',
      ],
      mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
    },
    extend: {
      keyframes: {
        'fade-in-up': {
          '0%': { opacity: '0', transform: 'translateY(6px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        'fade-in-up': 'fade-in-up 0.25s ease-out both',
      },
    },
  },
  plugins: [],
};

export default config;