/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./App.tsx",
  ],
  theme: {
    colors: {
      // Custom color palette
      'background': 'var(--c-background)',
      'background-light': 'var(--c-background-light)',
      'boxes': 'var(--c-boxes)',
      'lines': 'var(--c-lines)',
      'text': 'var(--c-text)',
      'other': 'var(--c-other)',
      
      // Essential utility colors
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000000',
      white: '#ffffff',
      
      // Add gray scale for borders, shadows, etc (using your lines color as base)
      gray: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827',
      },
    },
    extend: {
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}