import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "vuetify/styles";
import "@mdi/font/css/materialdesignicons.css";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: "vsLight",
    themes: {
      vsLight: {
        dark: false,
        colors: {
          background: "#f0f4ff",
          surface:    "#ffffff",
          primary:    "#667eea",
          secondary:  "#b8860b",
          accent:     "#764ba2",
          error:      "#e53e3e",
          warning:    "#d69e2e",
          info:       "#667eea",
          success:    "#38a169",
        },
      },
      vsDark: {
        dark: true,
        colors: {
          background: "#0a0e27",
          surface:    "rgba(30, 41, 82, 0.4)",
          primary:    "#667eea",
          secondary:  "#d4af37",
          accent:     "#764ba2",
          error:      "#f5576c",
          warning:    "#d4af37",
          info:       "#667eea",
          success:    "#11bc9d",
        },
      },
    },
  },
  icons: { defaultSet: "mdi" },
});

createApp(App).use(vuetify).use(router).mount("#root");