import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

// The frozen design contract (ADR 0013 §1): 1,269 lines, 93 tokens, dual
// themes, WCAG 2.1 AA verified across 23 routes. Content-frozen — new CSS may
// only use existing var(--…) tokens.
import './styles/styles.css'
import './styles/auth.css'

import App from './App'
import ThemeProvider, { initTheme } from './theme/ThemeProvider'
import ToastProvider from './ui/Toast'
import { queryClient } from './lib/queryClient'
import { initializeCache } from './data/seedQueries'

// Before render: theme first so there is no light-mode flash, then the cache so
// the shell's badges and dropdowns paint with real counts on the first frame
// instead of popping in once a query resolves.
initTheme()
initializeCache(queryClient)

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <ToastProvider>
          <App />
        </ToastProvider>
      </ThemeProvider>
      {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
    </QueryClientProvider>
  </StrictMode>,
)