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/_variables.scss

@@ -0,0 +1,67 @@
+@use 'sass:color';
+
+/* Using catppuccin for now, make a theme switcher later */
+@use './themes/catppuccin/catppuccin';
+
+@function getColor($color) {
+  $ctp-theme: map-get(catppuccin.$palette, 'macchiato');
+  @return map-get($ctp-theme, $color);
+}
+
+/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+$screen-sizes: (
+  'sm': 640px,
+  'md': 768px,
+  'lg': 1024px,
+  'xl': 1280px,
+  '2xl': 1536px,
+);
+
+$spacings: (
+  0 '--prj-spacing-0' 0,
+  1 '--prj-spacing-1' 0.25rem,
+  2 '--prj-spacing-2' 0.5rem,
+  3 '--prj-spacing-3' 1rem,
+  4 '--prj-spacing-4' 2rem,
+  5 '--prj-spacing-5' 3rem
+);
+
+$border-radius: 0.5rem;
+
+// Native CSS Variables to allow overridings and usage in external stylesheets
+:root {
+  /* Variables prefixed with prj to avoid collisions */
+
+  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
+  --prj-bg: #{getColor('mantle')};
+  --prj-shadow: #{getColor('crust')};
+  --prj-text: #{getColor('text')};
+
+  --prj-surface-1: #{getColor('base')};
+  --prj-surface-2: #{darken(getColor('surface0'), 2%)};
+  --prj-surface-3: #{getColor('surface1')};
+  --prj-surface-text: #{getColor('text')};
+
+  --prj-link-text: #{getColor('teal')};
+
+  --prj-accent-bg: #{getColor('teal')};
+  --prj-accent-text: #{getColor('base')};
+
+  --prj-primary: #{getColor('teal')};
+  --prj-primary-text: #{getColor('base')};
+
+  --prj-danger: #{getColor('red')};
+  --prj-danger-text: #{getColor('base')};
+
+  --prj-disabled: #{getColor('red')};
+  --prj-disabled-text: rgba(#{getColor('raw')}, 0.5);
+
+  --prj-input: #{getColor('text')};
+  --prj-input-text: #{getColor('base')};
+
+  @each $index, $variable, $value in $spacings {
+    #{$variable}: #{$value};
+  }
+
+  --prj-border-radius: #{$border-radius};
+}