feat: added sass globals and variables

src/resources/js/app.js

@@ -2,6 +2,8 @@ import './bootstrap';
 import { createApp, h } from 'vue'
 import { createPinia } from 'pinia'
 import { createInertiaApp } from '@inertiajs/vue3'
+import '../vue/scss/global.scss'
+import '../vue/scss/variables.scss'
 
 createInertiaApp({
     resolve: name => {

src/resources/vue/scss/global.scss

@@ -0,0 +1,11 @@
+@import './variables.scss';
+
+html, body {
+    font-family: $font-main;
+    background-color: $color-dark-blue-100;
+    color: $color-white;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+}

src/resources/vue/scss/variables.scss

@@ -0,0 +1,16 @@
+$font-main: 'Outfit', sans-serif;
+
+$color-white: #F7F4F3;
+$color-black: #000;
+$color-black-100: #343434;
+$color-black-200: #424B54;
+
+$color-dark-blue-100: #1D243A;
+$color-dark-blue-200: #445E93;
+
+$color-blue-100: #00BBF9;
+
+$color-green-100: #45CB85;
+$color-green-200: #A7C957;
+
+$color-red-100: #FF8360;