diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a0cbf639..2f15e469 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -50,60 +50,60 @@
   // In light mode use the theme color; in dark mode use white
   --bew-theme-color-auto: var(--bew-theme-color);
 
-  --bew-theme-color: rgb(0 161 214);
-  --bew-theme-color-10: rgba(0 161 214 / 0.1);
-  --bew-theme-color-20: rgba(0 161 214 / 0.2);
-  --bew-theme-color-30: rgba(0 161 214 / 0.3);
-  --bew-theme-color-40: rgba(0 161 214 / 0.4);
-  --bew-theme-color-50: rgba(0 161 214 / 0.5);
-  --bew-theme-color-60: rgba(0 161 214 / 0.6);
-  --bew-theme-color-70: rgba(0 161 214 / 0.7);
-  --bew-theme-color-80: rgba(0 161 214 / 0.8);
-  --bew-theme-color-90: rgba(0 161 214 / 0.9);
+  --bew-theme-color: hsl(195 100% 42%);
+  --bew-theme-color-10: hsl(195 100% 42% / 0.1);
+  --bew-theme-color-20: hsl(195 100% 42% / 0.2);
+  --bew-theme-color-30: hsl(195 100% 42% / 0.3);
+  --bew-theme-color-40: hsl(195 100% 42% / 0.4);
+  --bew-theme-color-50: hsl(195 100% 42% / 0.5);
+  --bew-theme-color-60: hsl(195 100% 42% / 0.6);
+  --bew-theme-color-70: hsl(195 100% 42% / 0.7);
+  --bew-theme-color-80: hsl(195 100% 42% / 0.8);
+  --bew-theme-color-90: hsl(195 100% 42% / 0.9);
 
-  --bew-info-color: rgb(56 189 248);
-  --bew-info-color-10: rgba(56 189 248 / 0.1);
-  --bew-info-color-20: rgba(56 189 248 / 0.2);
-  --bew-info-color-30: rgba(56 189 248 / 0.3);
-  --bew-info-color-40: rgba(56 189 248 / 0.4);
-  --bew-info-color-50: rgba(56 189 248 / 0.5);
-  --bew-info-color-60: rgba(56 189 248 / 0.6);
-  --bew-info-color-70: rgba(56 189 248 / 0.7);
-  --bew-info-color-80: rgba(56 189 248 / 0.8);
-  --bew-info-color-90: rgba(56 189 248 / 0.9);
+  --bew-info-color: hsl(198 93% 60%);
+  --bew-info-color-10: hsl(198 93% 60% / 0.1);
+  --bew-info-color-20: hsl(198 93% 60% / 0.2);
+  --bew-info-color-30: hsl(198 93% 60% / 0.3);
+  --bew-info-color-40: hsl(198 93% 60% / 0.4);
+  --bew-info-color-50: hsl(198 93% 60% / 0.5);
+  --bew-info-color-60: hsl(198 93% 60% / 0.6);
+  --bew-info-color-70: hsl(198 93% 60% / 0.7);
+  --bew-info-color-80: hsl(198 93% 60% / 0.8);
+  --bew-info-color-90: hsl(198 93% 60% / 0.9);
 
-  --bew-success-color: rgb(110 231 183);
-  --bew-success-color-10: rgba(110 231 183 / 0.1);
-  --bew-success-color-20: rgba(110 231 183 / 0.2);
-  --bew-success-color-30: rgba(110 231 183 / 0.3);
-  --bew-success-color-40: rgba(110 231 183 / 0.4);
-  --bew-success-color-50: rgba(110 231 183 / 0.5);
-  --bew-success-color-60: rgba(110 231 183 / 0.6);
-  --bew-success-color-70: rgba(110 231 183 / 0.7);
-  --bew-success-color-80: rgba(110 231 183 / 0.8);
-  --bew-success-color-90: rgba(110 231 183 / 0.9);
+  --bew-success-color: hsl(164 60% 40%);
+  --bew-success-color-10: hsl(164 60% 40% / 0.1);
+  --bew-success-color-20: hsl(164 60% 40% / 0.2);
+  --bew-success-color-30: hsl(164 60% 40% / 0.3);
+  --bew-success-color-40: hsl(164 60% 40% / 0.4);
+  --bew-success-color-50: hsl(164 60% 40% / 0.5);
+  --bew-success-color-60: hsl(164 60% 40% / 0.6);
+  --bew-success-color-70: hsl(164 60% 40% / 0.7);
+  --bew-success-color-80: hsl(164 60% 40% / 0.8);
+  --bew-success-color-90: hsl(164 60% 40% / 0.9);
 
-  --bew-warning-color: rgb(243 199 27);
-  --bew-warning-color-10: rgba(243 199 27 / 0.1);
-  --bew-warning-color-20: rgba(243 199 27 / 0.2);
-  --bew-warning-color-30: rgba(243 199 27 / 0.3);
-  --bew-warning-color-40: rgba(243 199 27 / 0.4);
-  --bew-warning-color-50: rgba(243 199 27 / 0.5);
-  --bew-warning-color-60: rgba(243 199 27 / 0.6);
-  --bew-warning-color-70: rgba(243 199 27 / 0.7);
-  --bew-warning-color-80: rgba(243 199 27 / 0.8);
-  --bew-warning-color-90: rgba(243 199 27 / 0.9);
+  --bew-warning-color: hsl(48 90% 53%);
+  --bew-warning-color-10: hsl(48 90% 53% / 0.1);
+  --bew-warning-color-20: hsl(48 90% 53% / 0.2);
+  --bew-warning-color-30: hsl(48 90% 53% / 0.3);
+  --bew-warning-color-40: hsl(48 90% 53% / 0.4);
+  --bew-warning-color-50: hsl(48 90% 53% / 0.5);
+  --bew-warning-color-60: hsl(48 90% 53% / 0.6);
+  --bew-warning-color-70: hsl(48 90% 53% / 0.7);
+  --bew-warning-color-80: hsl(48 90% 53% / 0.8);
+  --bew-warning-color-90: hsl(48 90% 53% / 0.9);
 
-  --bew-error-color: rgb(219 65 108);
-  --bew-error-color-10: rgba(219 65 108 / 0.1);
-  --bew-error-color-20: rgba(219 65 108 / 0.2);
-  --bew-error-color-30: rgba(219 65 108 / 0.3);
-  --bew-error-color-40: rgba(219 65 108 / 0.4);
-  --bew-error-color-50: rgba(219 65 108 / 0.5);
-  --bew-error-color-60: rgba(219 65 108 / 0.6);
-  --bew-error-color-70: rgba(219 65 108 / 0.7);
-  --bew-error-color-80: rgba(219 65 108 / 0.8);
-  --bew-error-color-90: rgba(219 65 108 / 0.9);
+  --bew-error-color: hsl(358 75% 59%);
+  --bew-error-color-10: hsl(358 75% 59% / 0.1);
+  --bew-error-color-20: hsl(358 75% 59% / 0.2);
+  --bew-error-color-30: hsl(358 75% 59% / 0.3);
+  --bew-error-color-40: hsl(358 75% 59% / 0.4);
+  --bew-error-color-50: hsl(358 75% 59% / 0.5);
+  --bew-error-color-60: hsl(358 75% 59% / 0.6);
+  --bew-error-color-70: hsl(358 75% 59% / 0.7);
+  --bew-error-color-80: hsl(358 75% 59% / 0.8);
+  --bew-error-color-90: hsl(358 75% 59% / 0.9);
   // #endregion
 
   // #region Text colors