/** @type {import('tailwindcss').Config} */
import baseTokens from './design-tokens/base.json' assert { type: 'json' };

export default {
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
  ],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      // Design token-driven color system
      colors: {
        // Semantic color system using CSS variables
        background: {
          primary: 'var(--color-bg-primary)',
          secondary: 'var(--color-bg-secondary)',
          tertiary: 'var(--color-bg-tertiary)',
          elevated: 'var(--color-bg-elevated)',
        },
        surface: {
          glass: 'var(--color-surface-glass)',
          'glass-hover': 'var(--color-surface-glass-hover)',
          'glass-focus': 'var(--color-surface-glass-focus)',
          muted: 'var(--color-surface-muted)',
          elevated: 'var(--color-surface-elevated)',
        },
        text: {
          primary: 'var(--color-text-primary)',
          secondary: 'var(--color-text-secondary)', 
          muted: 'var(--color-text-muted)',
          inverse: 'var(--color-text-inverse)',
          disabled: 'var(--color-text-disabled)',
          'on-color': 'var(--color-text-on-color)',
        },
        border: {
          default: 'var(--color-border-default)',
          muted: 'var(--color-border-muted)',
          strong: 'var(--color-border-strong)',
          focus: 'var(--color-border-focus)',
        },
        // Enhanced accent colors for visual variety
        accent: {
          emerald: {
            50: 'var(--color-accent-emerald-50)',
            100: 'var(--color-accent-emerald-100)',
            200: 'var(--color-accent-emerald-200)',
            300: 'var(--color-accent-emerald-300)',
            400: 'var(--color-accent-emerald-400)',
            500: 'var(--color-accent-emerald-500)',
            600: 'var(--color-accent-emerald-600)',
            700: 'var(--color-accent-emerald-700)',
            800: 'var(--color-accent-emerald-800)',
            900: 'var(--color-accent-emerald-900)',
            DEFAULT: 'var(--color-accent-emerald-text)',
          },
          amber: {
            50: 'var(--color-accent-amber-50)',
            100: 'var(--color-accent-amber-100)',
            200: 'var(--color-accent-amber-200)',
            300: 'var(--color-accent-amber-300)',
            400: 'var(--color-accent-amber-400)',
            500: 'var(--color-accent-amber-500)',
            600: 'var(--color-accent-amber-600)',
            700: 'var(--color-accent-amber-700)',
            800: 'var(--color-accent-amber-800)',
            900: 'var(--color-accent-amber-900)',
            DEFAULT: 'var(--color-accent-amber-text)',
          },
          rose: {
            50: 'var(--color-accent-rose-50)',
            100: 'var(--color-accent-rose-100)',
            200: 'var(--color-accent-rose-200)',
            300: 'var(--color-accent-rose-300)',
            400: 'var(--color-accent-rose-400)',
            500: 'var(--color-accent-rose-500)',
            600: 'var(--color-accent-rose-600)',
            700: 'var(--color-accent-rose-700)',
            800: 'var(--color-accent-rose-800)',
            900: 'var(--color-accent-rose-900)',
            DEFAULT: 'var(--color-accent-rose-text)',
          },
          violet: {
            50: 'var(--color-accent-violet-50)',
            100: 'var(--color-accent-violet-100)',
            200: 'var(--color-accent-violet-200)',
            300: 'var(--color-accent-violet-300)',
            400: 'var(--color-accent-violet-400)',
            500: 'var(--color-accent-violet-500)',
            600: 'var(--color-accent-violet-600)',
            700: 'var(--color-accent-violet-700)',
            800: 'var(--color-accent-violet-800)',
            900: 'var(--color-accent-violet-900)',
            DEFAULT: 'var(--color-accent-violet-text)',
          },
          cyan: {
            50: 'var(--color-accent-cyan-50)',
            100: 'var(--color-accent-cyan-100)',
            200: 'var(--color-accent-cyan-200)',
            300: 'var(--color-accent-cyan-300)',
            400: 'var(--color-accent-cyan-400)',
            500: 'var(--color-accent-cyan-500)',
            600: 'var(--color-accent-cyan-600)',
            700: 'var(--color-accent-cyan-700)',
            800: 'var(--color-accent-cyan-800)',
            900: 'var(--color-accent-cyan-900)',
            DEFAULT: 'var(--color-accent-cyan-text)',
          },
        },
        // Semantic status colors
        semantic: {
          success: 'var(--color-semantic-success-text)',
          'success-bg': 'var(--color-semantic-success-bg)',
          'success-border': 'var(--color-semantic-success-border)',
          warning: 'var(--color-semantic-warning-text)',
          'warning-bg': 'var(--color-semantic-warning-bg)',
          'warning-border': 'var(--color-semantic-warning-border)',
          error: 'var(--color-semantic-error-text)',
          'error-bg': 'var(--color-semantic-error-bg)',
          'error-border': 'var(--color-semantic-error-border)',
          info: 'var(--color-semantic-info-text)',
          'info-bg': 'var(--color-semantic-info-bg)',
          'info-border': 'var(--color-semantic-info-border)',
        },
        // Interactive elements
        interactive: {
          'primary-bg': 'var(--color-interactive-primary-bg)',
          'primary-text': 'var(--color-interactive-primary-text)',
          'secondary-bg': 'var(--color-interactive-secondary-bg)',
          'secondary-text': 'var(--color-interactive-secondary-text)',
          'accent-bg': 'var(--color-interactive-accent-bg)',
          'accent-text': 'var(--color-interactive-accent-text)',
        },
      },
      
      // Typography from design tokens
      fontFamily: {
        sans: baseTokens.typography.font.sans,
        serif: baseTokens.typography.font.serif,
        mono: baseTokens.typography.font.mono,
      },
      fontSize: Object.fromEntries(
        Object.entries(baseTokens.typography.size).map(([key, value]) => [
          key,
          Array.isArray(value) ? value : [value, { lineHeight: '1.5' }]
        ])
      ),
      fontWeight: baseTokens.typography.weight,
      
      // Spacing from design tokens
      spacing: {
        ...baseTokens.spacing,
      },
      
      // Border radius from design tokens
      borderRadius: baseTokens.radius,
      
      // Enhanced shadows with glassmorphism
      boxShadow: {
        ...baseTokens.shadow.glass,
        'glow-emerald': baseTokens.shadow.glow.emerald,
        'glow-amber': baseTokens.shadow.glow.amber,
        'glow-rose': baseTokens.shadow.glow.rose,
        'glow-violet': baseTokens.shadow.glow.violet,
        'glow-gold': baseTokens.shadow.glow.gold,
        'inner-light': baseTokens.shadow.inner.light,
        'inner-medium': baseTokens.shadow.inner.medium,
        'inner-strong': baseTokens.shadow.inner.strong,
      },
      
      // Enhanced backdrop blur
      backdropBlur: Object.fromEntries(
        Object.entries(baseTokens.blur).map(([key, value]) => [key, value])
      ),
      
      // Opacity utilities from design tokens
      opacity: baseTokens.opacity.glass,
      
      // Enhanced animations
      animation: {
        'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
        'slide-in': 'slideIn 0.5s ease-out forwards',
        'float': 'float 6s ease-in-out infinite',
        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
        'shimmer': 'shimmer 2s linear infinite',
      },
      
      // Enhanced keyframes
      keyframes: {
        fadeInUp: {
          '0%': {
            opacity: '0',
            transform: 'translateY(20px)',
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)',
          },
        },
        slideIn: {
          '0%': {
            opacity: '0',
            transform: 'translateX(-20px)',
          },
          '100%': {
            opacity: '1',
            transform: 'translateX(0)',
          },
        },
        float: {
          '0%, 100%': {
            transform: 'translateY(0px)',
          },
          '50%': {
            transform: 'translateY(-20px)',
          },
        },
        glowPulse: {
          '0%, 100%': {
            opacity: '1',
          },
          '50%': {
            opacity: '0.7',
          },
        },
        shimmer: {
          '0%': {
            transform: 'translateX(-100%)',
          },
          '100%': {
            transform: 'translateX(100%)',
          },
        },
      },
      
      // Transition timing from design tokens
      transitionDuration: baseTokens.transition.duration,
      transitionTimingFunction: baseTokens.transition.timing,
    },
  },
  plugins: [],
}