feat: expose tokens as CSS custom properties

src/scss/iati.scss

@@ -1,8 +1,16 @@
+@use "sass:meta";
 @use "base";
 @use "tokens";
 @use "typography";
 @use "components";
 @use "layout";
 
-// Expose tokens for use in downstream applications
+// Expose tokens as Sass variables
 @forward "tokens";
+
+// Expose tokens as CSS custom properties
+:root {
+  @each $name, $value in meta.module-variables("tokens") {
+    --#{$name}: #{$value};
+  }
+}

src/scss/tokens/_color.scss

@@ -1,4 +1,12 @@
+$color-blue-10: #f0feff;
+$color-blue-20: #b6f6f9;
+$color-blue-30: #7bedf2;
+$color-blue-40: #41e4eb;
 $color-blue-50: #06dbe4;
+$color-blue-60: #09b6bd;
+$color-blue-70: #0b9095;
+$color-blue-80: #0e6a6e;
+$color-blue-90: #104446;
 
 $color-teal-10: #e6f9fe;
 $color-teal-20: #cae6ef;