import {
  defineConfig,
  presetIcons,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno({ dark: 'class' }),
    presetIcons({
      scale: 1.2,
      collections: {
        lucide: () => import('@iconify-json/lucide/icons.json').then(i => i.default),
        ph: () => import('@iconify-json/ph/icons.json').then(i => i.default),
      },
    }),
    presetWebFonts({
      provider: 'bunny',
      fonts: {
        display: 'Syne:400,500,600,700,800',
        sans: 'Space Grotesk:300,400,500,600,700',
        mono: 'JetBrains Mono:400,500,700',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  theme: {
    colors: {
      primary: {
        DEFAULT: 'hsl(12, 76%, 48%)',
        50: 'hsl(12, 76%, 95%)',
        100: 'hsl(12, 76%, 88%)',
        200: 'hsl(12, 76%, 76%)',
        300: 'hsl(12, 76%, 64%)',
        400: 'hsl(12, 76%, 56%)',
        500: 'hsl(12, 76%, 48%)',
        600: 'hsl(12, 76%, 40%)',
        700: 'hsl(12, 76%, 33%)',
        800: 'hsl(12, 76%, 26%)',
        900: 'hsl(12, 76%, 18%)',
      },
      accent: {
        DEFAULT: 'hsl(36, 80%, 52%)',
        50: 'hsl(36, 80%, 95%)',
        100: 'hsl(36, 80%, 88%)',
        200: 'hsl(36, 80%, 76%)',
        300: 'hsl(36, 80%, 66%)',
        400: 'hsl(36, 80%, 58%)',
        500: 'hsl(36, 80%, 52%)',
        600: 'hsl(36, 80%, 44%)',
        700: 'hsl(36, 80%, 36%)',
        800: 'hsl(36, 80%, 28%)',
        900: 'hsl(36, 80%, 20%)',
      },
      surface: {
        DEFAULT: 'hsl(20, 8%, 8%)',
        50: 'hsl(20, 8%, 22%)',
        100: 'hsl(20, 8%, 18%)',
        200: 'hsl(20, 8%, 13%)',
        300: 'hsl(20, 8%, 10%)',
        400: 'hsl(20, 8%, 8%)',
        500: 'hsl(20, 8%, 6%)',
        600: 'hsl(20, 8%, 4%)',
        bg: 'hsl(20, 8%, 3.5%)',
      },
    },
  },
  shortcuts: {
    'btn-primary': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-display font-semibold tracking-wide transition-all duration-200 hover:bg-primary-600 hover:scale-105 active:scale-95',
    'btn-accent': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-surface-bg font-display font-semibold tracking-wide transition-all duration-200 hover:bg-accent-600 hover:scale-105 active:scale-95',
    'btn-ghost': 'inline-flex items-center justify-center px-4 py-2 rounded-lg text-white/70 font-sans transition-all duration-200 hover:bg-white/10 hover:text-white',
    'card-surface': 'rounded-xl bg-surface border border-white/8 p-6 transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5',
    'text-gradient': 'bg-gradient-to-r from-primary-300 to-accent bg-clip-text text-transparent',
    'text-muted': 'text-white/60',
    'section-padding': 'px-4 py-16 md:px-8 lg:px-16 lg:py-24',
    'container-content': 'mx-auto max-w-7xl w-full',
    'heading-kicker': 'inline-block mb-2 font-mono text-sm tracking-widest uppercase',
  },
})