diff --git a/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss b/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss
index f93199784..5c353f02d 100644
--- a/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss
+++ b/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss
@@ -8,6 +8,7 @@
       border-width: 3px;
       border-style: solid;
       border-radius: 10px 3px;
+      border-color: var(--secondary);
       padding: 5px 15px;
       width: 264px;
       margin: 5px 10px;
diff --git a/app/themes/casemate/style.scss.erb b/app/themes/casemate/style.scss.erb
index ca75da0a8..3cbdffacb 100644
--- a/app/themes/casemate/style.scss.erb
+++ b/app/themes/casemate/style.scss.erb
@@ -12,6 +12,25 @@ $secondary-text-color: <%= Stylesheet.secondary_text_color %> !default;
 
 $primary-decoration-color: <%= Stylesheet.primary_decoration_color %> !default;
 
+:root {
+  --main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%);
+  --main-light: <%= Stylesheet.primary_light %>;
+  --main: <%= Stylesheet.primary %>;
+  --main-dark: <%= Stylesheet.primary_dark %>;
+  --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%);
+
+  --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%);
+  --secondary-light: <%= Stylesheet.secondary_light %>;
+  --secondary: <%= Stylesheet.secondary %>;
+  --secondary-dark: <%= Stylesheet.secondary_dark %>;
+  --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%);
+
+  --primary-text-color: <%= Stylesheet.primary_text_color %>;
+  --secondary-text-color: <%= Stylesheet.secondary_text_color %>;
+
+  --primary-decoration-color: <%= Stylesheet.primary_decoration_color %>;
+}
+
 .bg-red {
   background-color: $primary;
 }