client/tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        display: ['var(--font-fredoka)', 'sans-serif'], // Headings
        body: ['var(--font-nunito)', 'sans-serif'],    // Text
      },
      colors: {
        // The Void
        space: {
          950: '#0B0C15', // Deepest background
          900: '#131426', // Panel background
          800: '#232442', // Card background
        },
        // Action Colors (The Juice)
        neon: {
          purple: '#A020F0',
          pink: '#FF007F',
          cyan: '#00FFFF', 
          yellow: '#FFD700',
          danger: '#FF3333',
          success: '#00FF7F',
        }
      },
      borderRadius: {
        'xl': '1rem',
        '2xl': '1.5rem',
        '3xl': '2rem',
        'pills': '9999px',
      },
      boxShadow: {
        'neon-purple': '0 0 10px rgba(160, 32, 240, 0.5), 0 0 20px rgba(160, 32, 240, 0.3)',
        'neon-cyan': '0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3)',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      }
    },
  },
  plugins: [],
};
export default config;