/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      typography: {
        DEFAULT: {
          css: {
            color: '#ffffff',
            maxWidth: '100%',
            a: {
              color: '#22d3ee',
              '&:hover': {
                color: '#06b6d4',
                textDecoration: 'underline',
              },
            },
            h1: {
              color: '#ffffff',
              fontWeight: '800',
              fontSize: '2.5rem',
              marginTop: '0',
              marginBottom: '1.5rem',
              lineHeight: '1.2',
            },
            h2: {
              color: '#ffffff',
              fontWeight: '700',
              fontSize: '2rem',
              marginTop: '2rem',
              marginBottom: '1rem',
              lineHeight: '1.3',
            },
            h3: {
              color: '#ffffff',
              fontWeight: '600',
              fontSize: '1.5rem',
              marginTop: '1.5rem',
              marginBottom: '0.75rem',
              lineHeight: '1.4',
            },
            h4: {
              color: '#ffffff',
              fontWeight: '600',
              fontSize: '1.25rem',
              marginTop: '1.25rem',
              marginBottom: '0.5rem',
            },
            h5: {
              color: '#ffffff',
              fontWeight: '600',
              fontSize: '1.125rem',
              marginTop: '1rem',
              marginBottom: '0.5rem',
            },
            h6: {
              color: '#ffffff',
              fontWeight: '600',
              fontSize: '1rem',
              marginTop: '1rem',
              marginBottom: '0.5rem',
            },
            strong: {
              color: '#ffffff',
            },
            code: {
              color: '#22d3ee',
              backgroundColor: '#1e293b',
              padding: '0.2em 0.4em',
              borderRadius: '0.25rem',
              fontWeight: '400',
              fontFamily: 'monospace',
            },
            'code::before': {
              content: '""',
            },
            'code::after': {
              content: '""',
            },
            pre: {
              backgroundColor: '#1e293b',
              borderRadius: '0.5rem',
              padding: '1rem',
              overflowX: 'auto',
            },
            blockquote: {
              color: '#94a3b8',
              borderLeftColor: '#22d3ee',
              borderLeftWidth: '4px',
              paddingLeft: '1rem',
              fontStyle: 'italic',
              marginTop: '1.5rem',
              marginBottom: '1.5rem',
            },
            hr: {
              borderColor: '#334155',
              marginTop: '2rem',
              marginBottom: '2rem',
            },
            table: {
              width: '100%',
              marginTop: '1.5rem',
              marginBottom: '1.5rem',
              borderCollapse: 'collapse',
              overflowX: 'auto',
              display: 'block',
            },
            thead: {
              borderBottomColor: '#334155',
              borderBottomWidth: '2px',
            },
            'thead th': {
              color: '#ffffff',
              fontWeight: '600',
              textAlign: 'left',
              padding: '0.5rem',
            },
            'tbody tr': {
              borderBottomColor: '#1e293b',
              borderBottomWidth: '1px',
            },
            'tbody td': {
              padding: '0.5rem',
            },
            ul: {
              marginTop: '1rem',
              marginBottom: '1rem',
              paddingLeft: '1.5rem',
            },
            ol: {
              marginTop: '1rem',
              marginBottom: '1rem',
              paddingLeft: '1.5rem',
            },
            'ul li': {
              marginTop: '0.25rem',
              marginBottom: '0.25rem',
            },
            'ol li': {
              marginTop: '0.25rem',
              marginBottom: '0.25rem',
            },
            'ul li::before': {
              color: '#22d3ee',
            },
            'ol li::before': {
              color: '#22d3ee',
            },
            img: {
              borderRadius: '0.5rem',
              marginTop: '1rem',
              marginBottom: '1rem',
            },
          },
        },
      },
    },
  },
  plugins: [
    require("tailwindcss-animate"),
    require('@tailwindcss/typography'),
  ],
}