import type { Config } from 'tailwindcss';

const rgb = (variable: string) => `rgb(var(${variable}) / <alpha-value>)`;

const config: Config = {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: rgb('--color-primary'),
          fg: rgb('--color-primary-fg'),
          soft: rgb('--color-primary-soft'),
        },
        secondary: {
          DEFAULT: rgb('--color-secondary'),
          fg: rgb('--color-secondary-fg'),
        },
        accent: rgb('--color-accent'),
        bg: {
          DEFAULT: rgb('--color-bg'),
          muted: rgb('--color-bg-muted'),
          inverse: rgb('--color-bg-inverse'),
        },
        fg: {
          DEFAULT: rgb('--color-fg'),
          muted: rgb('--color-fg-muted'),
          inverse: rgb('--color-fg-inverse'),
        },
        border: {
          DEFAULT: rgb('--color-border'),
          strong: rgb('--color-border-strong'),
        },
        badge: {
          fg: rgb('--color-badge-fg'),
        },
      },
      borderRadius: {
        sm: 'var(--radius-sm)',
        DEFAULT: 'var(--radius-md)',
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
        xl: 'var(--radius-xl)',
        '2xl': 'var(--radius-2xl)',
      },
      fontFamily: {
        sans: ['var(--font-sans)'],
        display: ['var(--font-display)'],
      },
      boxShadow: {
        sm: 'var(--shadow-sm)',
        md: 'var(--shadow-md)',
        lg: 'var(--shadow-lg)',
        glow: 'var(--shadow-glow)',
      },
      maxWidth: {
        container: 'var(--container-max)',
      },
      spacing: {
        section: 'var(--space-section-y)',
        gutter: 'var(--space-container)',
      },
      transitionTimingFunction: {
        smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
    },
  },
  plugins: [],
};

export default config;