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

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