import { createApp } from "vue";
import App from "./App.vue";

// Vuetify
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 themeDefault = {
  dark: false,
  colors: {
    //Primary Color
    primary: "#146C43",
    "primary-dark": "#0F5132",
    "primary-light": "#D2F4EA",

    //Secondary Color
    secondary: "#6C757D",
    "secondary-dark": "#54595E",
    "secondary-light": "#ABB5BE",

    //Status Color
    success: "#28A745",
    error: "#DC3545",
    warning: "#FFC107",
    info: "#17A2B8",

    //Gray Color
    "gray-100": "#F8F9FA",
    "gray-200": "#E9ECEF",
    "gray-300": "#DEE2E6",
    "gray-400": "#CED4DA",
    "gray-500": "#ADB5BD",
    "gray-600": "#6C757D",
    "gray-700": "#495057",
    "gray-800": "#343A40",
    "gray-900": "#212529",

    //blue Color
    "blue-100": "#CFE2FF",
    "blue-200": "#9EC5FE",
    "blue-300": "#6EA8FE",
    "blue-400": "#3D8BFD",
    "blue-500": "#0D6EFD",
    "blue-600": "#0A58CA",
    "blue-700": "#084298",
    "blue-800": "#052C65",
    "blue-900": "#031633",

    //Indigo Color
    "indigo-100": "#E0CFFC",
    "indigo-200": "#C29FFA",
    "indigo-300": "#A370F7",
    "indigo-400": "#8540F5",
    "indigo-500": "#6610F2",
    "indigo-600": "#520DC2",
    "indigo-700": "#3D0A91",
    "indigo-800": "#290661",
    "indigo-900": "#140330",

    //Purple Color
    "purple-100": "#E2D9F3",
    "purple-200": "#C5B3E6",
    "purple-300": "#A98EDA",
    "purple-400": "#8C68CD",
    "purple-500": "#6F42C1",
    "purple-600": "#59359A",
    "purple-700": "#432874",
    "purple-800": "#2C1A4D",
    "purple-900": "#160D27",

    //Pink Color
    "pink-100": "#F7D6E6",
    "pink-200": "#EFADCE",
    "pink-300": "#E685B5",
    "pink-400": "#DE5C9D",
    "pink-500": "#D63384",
    "pink-600": "#AB296A",
    "pink-700": "#801F4F",
    "pink-800": "#561435",
    "pink-900": "#2B0A1A",

    //Red Color
    "red-100": "#F8D7DA",
    "red-200": "#F1AEB5",
    "red-300": "#EA868F",
    "red-400": "#E35D6A",
    "red-500": "#DC3545",
    "red-600": "#B02A37",
    "red-700": "#842029",
    "red-800": "#58151C",
    "red-900": "#2C0B0E",

    //Orange Color
    "orange-100": "#FFE5D0",
    "orange-200": "#FECBA1",
    "orange-300": "#FEB272",
    "orange-400": "#FD9843",
    "orange-500": "#FD7E14",
    "orange-600": "#CA6510",
    "orange-700": "#984C0C",
    "orange-800": "#653208",
    "orange-900": "#331904",

    //Yellow Color
    "yellow-100": "#FFF3CD",
    "yellow-200": "#FFE69C",
    "yellow-300": "#FFDA6A",
    "yellow-400": "#FFCD39",
    "yellow-500": "#FFC107",
    "yellow-600": "#CC9A06",
    "yellow-700": "#997404",
    "yellow-800": "#664D03",
    "yellow-900": "#664D03",

    //Green Color
    "green-100": "#D1E7DD",
    "green-200": "#A3CFBB",
    "green-300": "#75B798",
    "green-400": "#479F76",
    "green-500": "#198754",
    "green-600": "#146C43",
    "green-700": "#0F5132",
    "green-800": "#0A3622",
    "green-900": "#051B11",

    //Teal Color
    "teal-100": "#D2F4EA",
    "teal-200": "#A6E9D5",
    "teal-300": "#79DFC1",
    "teal-400": "#4DD4AC",
    "teal-500": "#20C997",
    "teal-600": "#1AA179",
    "teal-700": "#13795B",
    "teal-800": "#0D503C",
    "teal-900": "#06281E",

    //Cyan Color
    "cyan-100": "#CFF4FC",
    "cyan-200": "#9EEAF9",
    "cyan-300": "#6EDFF6",
    "cyan-400": "#3DD5F3",
    "cyan-500": "#0DCAF0",
    "cyan-600": "#0AA2C0",
    "cyan-700": "#087990",
    "cyan-800": "#055160",
    "cyan-900": "#032830",
  },
};

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: "themeDefault",
    themes: {
      themeDefault,
    },
  },
});

createApp(App).use(vuetify).mount("#app");