import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
// App-global CSS overrides — imported AFTER vuetify/styles so equal-
// specificity rules (e.g. the tooltip readability fix) win by source order.
import './styles/app.css'

import App from './App.vue'
import router from './router.js'
import { fabledCuratorTheme } from './theme/vuetify-theme.js'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'fabledCurator',
    themes: { fabledCurator: fabledCuratorTheme }
  },
  defaults: {
    // FabledDesignSystem: pill shape for buttons
    VBtn: { rounded: 'pill' }
  }
})

createApp(App)
  .use(createPinia())
  .use(router)
  .use(vuetify)
  .mount('#app')