feat: custom theme

scss/_colors.scss

@@ -0,0 +1,44 @@
+:root {
+  // Brand Colors
+  --color-primary-blue: #{$primary-blue};
+  --color-primary-yellow: #{$primary-yellow};
+  --color-text: #{$text-color};
+  --color-background: #{$background-color};
+
+  // Semantic colors
+  --text: #2c2a26;
+  --background: #f5f3f0;
+  --primary: #296eb3;
+  --secondary: #fdba35;
+  --accent: #188afb;
+
+  // UI Elements
+  --link-color: #{$primary-blue};
+  --link-hover-color: #{darken($primary-blue, 10%)};
+
+  // Data Visualization Colors
+  --dataviz-cat-1: #{$dataviz-cat-1};
+  --dataviz-cat-2: #{$dataviz-cat-2};
+  --dataviz-cat-3: #{$dataviz-cat-3};
+  --dataviz-cat-4: #{$dataviz-cat-4};
+  --dataviz-cat-5: #{$dataviz-cat-5};
+  --dataviz-cat-6: #{$dataviz-cat-6};
+  --dataviz-cat-7: #{$dataviz-cat-7};
+  --dataviz-cat-8: #{$dataviz-cat-8};
+}
+
+// Apply colors
+body {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline;
+  }
+}