refactor(Style): add SASS to reduce style repetition

- Use list, maps and loops to reduce code duplication with small variations
- Use SASS functions for some extreme cases
- Keep native CSS variables to allow overriding/reference in other
  styles

refactor(Style): change css theme variables to SASS

add sass files from catppuccin to the project instead of importing it from NPM

refactor(Style): use SASS functions to reduce code boilerplate

src/assets/style/global.css

@@ -1,165 +0,0 @@
-@import url('./themes.css');
-@import url('./utils.css');
-
-html {
-  background-color: var(--prj-bg);
-  color: var(--prj-text);
-
-  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
-  font-size: calc(15px + 0.390625vw);
-}
-
-body {
-  max-width: 95vw; /* leave some space in the end by default */
-  margin: auto;
-  padding: 15px 0;
-}
-
-section:not(.clean) {
-  /* outline: 1px solid var(--prj-accent-bg); */
-  padding: var(--prj-spacing-3);
-  background-color: var(--prj-surface-1);
-  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
-  border-radius: var(--prj-border-radious);
-}
-
-section:not(:first-child) {
-  margin-top: var(--prj-spacing-4);
-}
-
-h1,
-.fs-1 {
-  font-size: 3rem !important;
-  margin-bottom: var(--prj-spacing-4);
-}
-h2,
-.fs-2 {
-  font-size: 2.5rem !important;
-  margin-bottom: var(--prj-spacing-3);
-}
-h3,
-.fs-3 {
-  font-size: 2rem !important;
-  margin-bottom: var(--prj-spacing-2);
-}
-h4,
-.fs-4 {
-  font-size: 1.5rem !important;
-  margin-bottom: var(--prj-spacing-2);
-}
-h5,
-.fs-5 {
-  font-size: 1.25rem !important;
-  margin-bottom: var(--prj-spacing-1);
-}
-h6,
-.fs-6 {
-  font-size: 1rem !important;
-  margin-bottom: var(--prj-spacing-1);
-}
-
-p {
-  margin-bottom: var(--prj-spacing-2);
-}
-
-p:last-child {
-  margin-bottom: 0;
-}
-
-/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
-
-@media screen and (min-width: 640px) {
-  body {
-    max-width: 640px;
-  }
-}
-@media screen and (min-width: 768px) {
-  body {
-    max-width: 768px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  body {
-    max-width: 1024px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  body {
-    max-width: 1280px;
-  }
-}
-@media screen and (min-width: 1536px) {
-  body {
-    max-width: 1536px;
-  }
-}
-
-a {
-  color: var(--prj-link-text);
-}
-
-ul {
-  /* Make the marker position is inside the container */
-  list-style-position: inside;
-  margin: 0;
-}
-
-.list-unstyle {
-  list-style: none;
-}
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-img.respect-width,
-video.respect-width {
-  max-width: 100%;
-  height: auto;
-}
-
-img.respect-height,
-video.respect-height {
-  max-height: 100%;
-  width: auto;
-}
-
-li:not(:last-child) {
-  margin-bottom: var(--prj-spacing-1);
-}
-
-.btn {
-  padding: var(--prj-spacing-1);
-}
-
-.btn-primary {
-  background-color: var(--prj--primary-bg);
-  color: var(--prj--primary-text);
-}
-
-/* Lightgallery iframe fix */
-.lg-has-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  .lg-object {
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
-
-.d-none {
-  display: none;
-}
-
-.bg-image {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    var(--bg-image);
-  background-position: center;
-  background-size: cover;
-  color: var(--prj-bg);
-
-  padding: var(--prj-spacing-3);
-}