first pass - kryz inspired

src/styles/_themes.scss

@@ -0,0 +1,50 @@
+@use './variables' as *;
+
+// ========== CSS Custom Properties (exposed to the browser) ==========
+// These map SCSS variables to CSS custom properties so Angular components
+// can consume them via var() at runtime.
+
+:root {
+  // Primary
+  --color-primary:          #{$primary-blue};
+  --color-primary-light:    #{$primary-blue-light};
+  --color-primary-dark:     #{$primary-blue-dark};
+  --color-primary-muted:    #{$primary-blue-muted};
+
+  // Accent
+  --color-accent:           #{$accent-orange};
+  --color-accent-light:     #{$accent-orange-light};
+  --color-accent-dark:      #{$accent-orange-dark};
+  --color-accent-muted:     #{$accent-orange-muted};
+
+  // Neutrals
+  --color-white:            #{$neutral-white};
+  --color-cream:            #{$neutral-cream};
+  --color-light:            #{$neutral-light};
+  --color-medium:           #{$neutral-medium};
+  --color-dark:             #{$neutral-dark};
+  --color-black:            #{$neutral-black};
+
+  // Semantic
+  --color-success:          #{$success-green};
+  --color-danger:           #{$danger-red};
+  --color-info:             #{$info-blue};
+
+  // Typography
+  --font-primary:   #{$font-primary};
+  --font-heading:   #{$font-heading};
+  --font-mono:      #{$font-mono};
+
+  // Radii
+  --radius-sm:  #{$radius-sm};
+  --radius-md:  #{$radius-md};
+  --radius-lg:  #{$radius-lg};
+  --radius-xl:  #{$radius-xl};
+  --radius-full: #{$radius-full};
+
+  // Shadows
+  --shadow-sm:  #{$shadow-sm};
+  --shadow-md:  #{$shadow-md};
+  --shadow-lg:  #{$shadow-lg};
+  --shadow-xl:  #{$shadow-xl};
+}