import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: 'class',
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Deep panel graphite — base dark surface, like a cell array at dusk
        graphite: {
          950: '#0B1220',
          900: '#101A2E',
          800: '#14284B',
          700: '#1C3A63'
        },
        // Warm neutral — paper/off-white, not the cream+terracotta cliché
        paper: {
          50: '#F7F5F0',
          100: '#EFEBE2',
          200: '#E2DCCF'
        },
        // Brand green — renewable-energy primary accent (lime-green, solar/eco)
        copper: {
          400: '#9EBF57',
          500: '#8CB23B',
          600: '#7A9B34'
        },
        // Cyan — the energy / live-data layer (production curve, monitoring)
        volt: {
          400: '#5FD3D9',
          500: '#3FC1C9',
          600: '#2A9CA3'
        },
        // Leaf green — the renewables layer (eco-identity secondary accent)
        leaf: {
          300: '#A2C25E',
          400: '#9EBF57',
          500: '#8CB23B',
          600: '#7A9B34',
          700: '#6A8828'
        },
        ink: '#101826'
      },
      fontFamily: {
        display: ['var(--font-display)', 'sans-serif'],
        'display-ar': ['var(--font-display-ar)', 'sans-serif'],
        body: ['var(--font-body)', 'sans-serif'],
        'body-ar': ['var(--font-body-ar)', 'sans-serif']
      },
      backgroundImage: {
        'curve-grid':
          'linear-gradient(to right, rgba(63,193,201,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(63,193,201,0.08) 1px, transparent 1px)'
      },
      backgroundSize: {
        grid: '40px 40px'
      },
      keyframes: {
        drawCurve: {
          '0%': { strokeDashoffset: '1000' },
          '100%': { strokeDashoffset: '0' }
        },
        pulseDot: {
          '0%, 100%': { opacity: '1', transform: 'scale(1)' },
          '50%': { opacity: '0.4', transform: 'scale(0.8)' }
        },
        'fade-up': {
          '0%': { opacity: '0', transform: 'translateY(18px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' }
        },
        'fade-down': {
          '0%': { opacity: '0', transform: 'translateY(-14px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' }
        },
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        'scale-in': {
          '0%': { opacity: '0', transform: 'scale(0.92)' },
          '100%': { opacity: '1', transform: 'scale(1)' }
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' }
        },
        'float-slow': {
          '0%, 100%': { transform: 'translateY(0) rotate(-2deg)' },
          '50%': { transform: 'translateY(-16px) rotate(2deg)' }
        },
        'ray-spin': {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' }
        },
        shimmer: {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' }
        },
        'bolt-blink': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.25' }
        }
      },
      animation: {
        drawCurve: 'drawCurve 2.4s ease-out forwards',
        pulseDot: 'pulseDot 2s ease-in-out infinite',
        'fade-up': 'fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both',
        'fade-down': 'fade-down 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both',
        'fade-in': 'fade-in 0.9s ease-out both',
        'scale-in': 'scale-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both',
        float: 'float 5s ease-in-out infinite',
        'float-slow': 'float-slow 8s ease-in-out infinite',
        'ray-spin': 'ray-spin 36s linear infinite',
        shimmer: 'shimmer 3s linear infinite',
        'bolt-blink': 'bolt-blink 2.2s ease-in-out infinite'
      }
    }
  },
  plugins: []
};

export default config;