import type { Config } from 'tailwindcss'

const mintPreset = {
  theme: {
    extend: {
      colors: {
        mint: {
          primary: 'var(--color-primary)',
          'primary-hover': 'var(--color-primary-hover)',
          'primary-light': 'var(--color-primary-light)',
          cta: 'var(--color-cta)',
          'cta-hover': 'var(--color-cta-hover)',
          danger: 'var(--mint-error)',
          'danger-hover': 'var(--mint-error-hover)',
          success: 'var(--mint-success)',
          'success-hover': 'var(--mint-success-hover)',
          warning: 'var(--mint-warning)',
          'warning-hover': 'var(--mint-warning-hover)',
          brand: 'var(--mint-brand)',
          'brand-hover': 'var(--mint-brand-hover)',
          experiment: 'var(--color-experiment)',
          'experiment-hover': 'var(--color-experiment-hover)',
          project: 'var(--color-project)',
          'project-hover': 'var(--color-project-hover)',
        },
        bg: {
          primary: 'var(--mint-bg-primary)',
          secondary: 'var(--mint-bg-secondary)',
          card: 'var(--mint-bg-card)',
          hover: 'var(--mint-bg-hover)',
          input: 'var(--mint-bg-input)',
        },
        text: {
          primary: 'var(--mint-text-primary)',
          secondary: 'var(--mint-text-secondary)',
          muted: 'var(--mint-text-muted)',
          inverse: 'var(--mint-text-inverse)',
        },
        border: {
          DEFAULT: 'var(--mint-border)',
          focus: 'var(--mint-border-focus)',
        },
      },
      fontFamily: {
        sans: ['Fira Sans', 'system-ui', '-apple-system', 'sans-serif'],
        mono: ['Fira Code', 'ui-monospace', 'SFMono-Regular', 'monospace'],
      },
      borderRadius: {
        mint: '0.5rem',
        'mint-sm': '0.375rem',
        'mint-lg': '0.75rem',
      },
      boxShadow: {
        mint: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
        'mint-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
        'mint-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
        'mint-card': 'var(--card-shadow)',
      },
      transitionDuration: {
        mint: '150ms',
      },
    },
  },
} satisfies Partial<Config>

export default mintPreset