import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { MantineProvider } from '@mantine/core'
import '@mantine/core/styles.css'
import '@fontsource/libre-baskerville/latin-400.css'
import '@fontsource/libre-baskerville/latin-700.css'
import '@fontsource/source-serif-4/latin-400.css'
import '@fontsource/source-serif-4/latin-600.css'
import App from './App.tsx'
import { CookieProvider } from './context/CookieContext'
import { ThemeProvider } from './context/ThemeContext'
import './styles/main.css'

createRoot(document.getElementById('mount')!).render(
  <StrictMode>
    <MantineProvider
      defaultColorScheme="light"
      theme={{
        fontFamily: 'Source Serif 4, Libre Baskerville, serif',
        headings: { fontFamily: 'Libre Baskerville, Source Serif 4, serif' },
        primaryColor: 'brown',
        colors: {
          brown: [
            '#f5ede0',
            '#ead8c0',
            '#d8b898',
            '#c49a72',
            '#b88860',
            '#8a6040',
            '#6a4828',
            '#4a3018',
            '#2c1c10',
            '#1a1410',
          ],
        },
      }}
    >
      <ThemeProvider>
        <CookieProvider>
          <App />
        </CookieProvider>
      </ThemeProvider>
    </MantineProvider>
  </StrictMode>,
)