refacto: full rewrite of theme with catppuccin guidelines + colors

sass/_theme.scss

@@ -0,0 +1,66 @@
+@use 'colors/catppuccin-macchiato' as dark;
+@use 'colors/catppuccin-latte' as light;
+
+:root {
+  --pink: #{light.$pink};
+  --mauve: #{light.$mauve};
+  --red: #{light.$red};
+  --maroon: #{light.$maroon};
+  --peach: #{light.$peach};
+  --yellow: #{light.$yellow};
+  --green: #{light.$green};
+  --teal: #{light.$teal};
+  --sky: #{light.$sky};
+  --sapphire: #{light.$sapphire};
+  --blue: #{light.$blue};
+  --lavender: #{light.$lavender};
+  --text: #{light.$text};
+  --subtext1: #{light.$subtext1};
+  --subtext0: #{light.$subtext0};
+  --overlay2: #{light.$overlay2};
+  --overlay1: #{light.$overlay1};
+  --overlay0: #{light.$overlay0};
+  --surface2: #{light.$surface2};
+  --surface1: #{light.$surface1};
+  --surface0: #{light.$surface0};
+  --base: #{light.$base};
+  --mantle: #{light.$mantle};
+  --crust: #{light.$crust};
+
+  --standard-border-radius: .8rem
+}
+  
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --pink: #{dark.$pink};
+    --mauve: #{dark.$mauve};
+    --red: #{dark.$red};
+    --maroon: #{dark.$maroon};
+    --peach: #{dark.$peach};
+    --yellow: #{dark.$yellow};
+    --green: #{dark.$green};
+    --teal: #{dark.$teal};
+    --sky: #{dark.$sky};
+    --sapphire: #{dark.$sapphire};
+    --blue: #{dark.$blue};
+    --lavender: #{dark.$lavender};
+    --text: #{dark.$text};
+    --subtext1: #{dark.$subtext1};
+    --subtext0: #{dark.$subtext0};
+    --overlay2: #{dark.$overlay2};
+    --overlay1: #{dark.$overlay1};
+    --overlay0: #{dark.$overlay0};
+    --surface2: #{dark.$surface2};
+    --surface1: #{dark.$surface1};
+    --surface0: #{dark.$surface0};
+    --base: #{dark.$base};
+    --mantle: #{dark.$mantle};
+    --crust: #{dark.$crust};
+}
+
+  img,
+  video {
+    opacity: 0.8;
+  }
+}