import { Html, Head, Main, NextScript } from 'next/document'
import theme from '@/styles/theme'

export default function Document() {
  return (
    <Html lang="en" className="bg-negative text-positive mt-8 mb-16 md:mt-16 md:mb-32 tracking-normal font-semi-expanded">
      <Head className="block">
        <style
          dangerouslySetInnerHTML={{
            __html: `
              :root {
                ${Object.entries(theme).map(([name, value]) => `--${name}: ${value};`).join('\n')}
              }
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
