import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// Imported AFTER element-plus css so our :root token overrides
// (--el-color-primary, radii, font, ...) win the cascade at equal specificity.
import './styles/theme.css'
import App from './App.vue'

// Apply the saved theme BEFORE mount so the first paint already uses the
// correct palette (no white→pink/blue flash). :root is the white default, so
// only blue/pink need an explicit data-theme attribute.
(function applyThemeEarly() {
  try {
    const saved = localStorage.getItem('w4f-theme')
    if (saved === 'blue' || saved === 'pink') {
      document.documentElement.setAttribute('data-theme', saved)
    }
  } catch {
    /* localStorage unavailable (private mode) — stay on the white default */
  }
})()

const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
app.mount('#app')