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

// Design contract (ADR 0013 §1), amended 2026-08-25: the COLOR palette and
// color tokens remain frozen. Typography and spacing were re-tokenized in the
// ui-polish pass (--fs-*/--lh-*/--space-*/--gap); new CSS must use var(--…)
// tokens only — no raw font sizes, spacing, or colors.
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>,
)