client/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Cyberpunk palette
        ui: {
          // Light UI surface colors
          bg: '#F5F7FB',        // light page background
          panel: '#FFFFFF',     // light panels/cards/topbar/sidebar
          border: '#E6E8F0',    // subtle borders

          // Text for light background
          text: '#1F2238',      // primary text (ink)
          textDim: '#5B618A',   // secondary text

          // Neon accents (unchanged)
          neonPink: '#FF2DAC',  // neon primary
          neonCyan: '#14BBD2',  // darker cyan for better contrast
          neonBlue: '#0EA5E9',  // further darkened option for solid fills
          neonCyanDark: '#0F94A8', // darker cyan for active glows
          neonLime: '#C7FF41',  // highlights
          magenta: '#D700FF',   // accents
          warning: '#FFB020',   // warnings
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-in': 'slideIn 0.3s ease-out',
        'bounce-in': 'bounceIn 0.6s ease-out',
        'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        slideIn: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
        bounceIn: {
          '0%': { transform: 'scale(0.3)', opacity: '0' },
          '50%': { transform: 'scale(1.05)' },
          '70%': { transform: 'scale(0.9)' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        pulseGlow: {
          '0%, 100%': { boxShadow: '0 0 0px rgba(255, 45, 172, 0.0)' },
          '50%': { boxShadow: '0 0 24px rgba(255, 45, 172, 0.6)' },
        },
      },
    },
  },
  plugins: [],
}