diff --git a/src/styles/components/header/main-navigation.scss b/src/styles/components/header/main-navigation.scss
index 4f7d08fe6c..7904bd40ef 100644
--- a/src/styles/components/header/main-navigation.scss
+++ b/src/styles/components/header/main-navigation.scss
@@ -102,7 +102,7 @@
       .category-level3,
       .category-level4 {
         > li > a {
-          color: lighten($text-color-primary, 35%);
+          color: $text-color-tertiary;
         }
       }
     }
@@ -231,7 +231,7 @@
 
             a {
               font-size: $font-size-sub-menu-item;
-              color: lighten($text-color-primary, 35%);
+              color: $text-color-tertiary;
               text-transform: none;
             }
           }
diff --git a/src/styles/global/breadcrumbs.scss b/src/styles/global/breadcrumbs.scss
index 196809acfe..966acf16ab 100644
--- a/src/styles/global/breadcrumbs.scss
+++ b/src/styles/global/breadcrumbs.scss
@@ -27,7 +27,7 @@
       color: $text-color-quaternary;
 
       &:hover {
-        color: darken($text-color-quaternary, 10%);
+        color: $text-color-tertiary;
       }
     }
   }
diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
index 379209e84c..e0fe9828d6 100644
--- a/src/styles/global/buttons.scss
+++ b/src/styles/global/buttons.scss
@@ -12,6 +12,61 @@
     clear: both;
   }
 
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+  }
+
+  &-primary {
+    background-color: $CORPORATE-PRIMARY;
+    border-color: $CORPORATE-PRIMARY;
+
+    &:hover {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+    }
+
+    &:focus,
+    &.focus {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+      box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+    }
+
+    &.disabled,
+    &:disabled {
+      background-color: $CORPORATE-LIGHT;
+      border-color: $CORPORATE-LIGHT;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+      }
+    }
+  }
+
+  &-secondary {
+    &:focus,
+    &.focus {
+      box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+      }
+    }
+  }
+
   & ~ .btn.btn-block {
     margin-left: 0;
   }
@@ -35,9 +90,8 @@
     border-color: $button-default-border;
 
     &:not(:disabled):hover {
-      //color: $button-default-color;
-      background-color: darken($button-default-bg, 10%);
-      border-color: darken($button-default-border, 10%);
+      background-color: $color-tertiary;
+      border-color: $CORPORATE-SECONDARY;
     }
   }
 }
diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
index 43253176c2..ee35c673cd 100644
--- a/src/styles/global/forms.scss
+++ b/src/styles/global/forms.scss
@@ -124,7 +124,7 @@ input.form-check-input {
 
 .form-control:focus {
   border-color: $color-special-tertiary;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $color-special-tertiary;
 }
 
 .input-help {
@@ -197,7 +197,7 @@ optgroup {
 
     &:focus {
       border-color: $error-color;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($error-color, 20%);
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $error-color;
     }
   }
 
diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
index 8cc6fa1446..b86c868cce 100644
--- a/src/styles/global/global.scss
+++ b/src/styles/global/global.scss
@@ -21,6 +21,10 @@
 }
 
 // Global Styles
+body {
+  color: $text-color-primary;
+}
+
 h1,
 .h1,
 h2,
@@ -76,6 +80,16 @@ a {
   }
 }
 
+.text {
+  &-primary {
+    color: $CORPORATE-PRIMARY !important;
+  }
+
+  &-secondary {
+    color: $CORPORATE-SECONDARY !important;
+  }
+}
+
 .link-separator {
   &::before {
     margin-right: 7.5px;
@@ -224,7 +238,7 @@ img.marketing {
 
     &:hover {
       color: $text-color-inverse;
-      background: lighten($CORPORATE-PRIMARY, 5%);
+      background: $CORPORATE-SECONDARY;
     }
   }
 }
diff --git a/src/styles/global/lists.scss b/src/styles/global/lists.scss
index 220ae7f221..0a65ebcc8b 100644
--- a/src/styles/global/lists.scss
+++ b/src/styles/global/lists.scss
@@ -25,7 +25,7 @@
   }
 
   a {
-    $disabled-link-color: darken($CORPORATE-PRIMARY, $default-color-adjust);
+    $disabled-link-color: $CORPORATE-SECONDARY;
 
     color: $disabled-link-color;
 
@@ -34,7 +34,7 @@
     }
 
     &:hover &:hover > .ng-fa-icon {
-      color: darken($disabled-link-color, $default-color-adjust);
+      color: $CORPORATE-DARK;
     }
   }
 }
diff --git a/src/styles/pages/account/account-navigation.scss b/src/styles/pages/account/account-navigation.scss
index f445f96956..f82041c761 100644
--- a/src/styles/pages/account/account-navigation.scss
+++ b/src/styles/pages/account/account-navigation.scss
@@ -6,7 +6,7 @@
     background: $color-tertiary;
 
     &:hover {
-      background: darken($color-tertiary, 10%) none repeat scroll 0 0;
+      background: $color-quaternary none repeat scroll 0 0;
     }
 
     &.account-nav-header {
diff --git a/src/styles/pages/checkout/checkout.scss b/src/styles/pages/checkout/checkout.scss
index b5d2725a8f..8404c12986 100644
--- a/src/styles/pages/checkout/checkout.scss
+++ b/src/styles/pages/checkout/checkout.scss
@@ -64,7 +64,7 @@
         text-transform: none;
 
         &:hover {
-          color: darken($text-color-inverse, 15%);
+          color: $text-color-quaternary;
         }
       }
 
@@ -72,7 +72,7 @@
         color: $text-color-inverse;
 
         &:hover {
-          color: darken($text-color-inverse, 15%);
+          color: $text-color-quaternary;
         }
       }
 
diff --git a/src/styles/pages/productdetail/product-info.scss b/src/styles/pages/productdetail/product-info.scss
index f2f8dd428f..5f41e50fe7 100644
--- a/src/styles/pages/productdetail/product-info.scss
+++ b/src/styles/pages/productdetail/product-info.scss
@@ -33,7 +33,7 @@ a.product-title {
       color: $text-color-quaternary;
 
       &:hover {
-        color: darken($text-color-quaternary, 10%);
+        color: $text-color-tertiary;
       }
     }
   }
diff --git a/src/styles/pages/productdetail/productdetail.scss b/src/styles/pages/productdetail/productdetail.scss
index 58c8d4bf70..4c6677c10a 100644
--- a/src/styles/pages/productdetail/productdetail.scss
+++ b/src/styles/pages/productdetail/productdetail.scss
@@ -42,7 +42,7 @@
       color: $text-color-quaternary;
 
       &:hover {
-        color: darken($text-color-quaternary, 10%);
+        color: $text-color-tertiary;
       }
     }
 
diff --git a/src/styles/themes/b2b/variables.scss b/src/styles/themes/b2b/variables.scss
index 9bc3568dc1..88731a7700 100644
--- a/src/styles/themes/b2b/variables.scss
+++ b/src/styles/themes/b2b/variables.scss
@@ -35,6 +35,9 @@ $font-size-corporate: 0.875rem; // 14px is the bootstrap 3 default font size (1r
 
 $CORPORATE-PRIMARY: #688dc3; // BLUE
 $CORPORATE-SECONDARY: darken($CORPORATE-PRIMARY, 10%);
+$CORPORATE-LIGHT: lighten($CORPORATE-PRIMARY, 10%);
+$CORPORATE-DARK: darken($CORPORATE-PRIMARY, 20%);
+$CORPORATE-SHADOW: #7f9ecc80; // with alpha transparency
 
 //
 //TEXT COLORS
@@ -58,6 +61,7 @@ $color-corporate: $CORPORATE-PRIMARY;
 $color-primary: #222;
 $color-secondary: #2c2d2e;
 $color-tertiary: #eee;
+$color-quaternary: #d5d5d5;
 
 $color-dark: #000;
 $color-inverse: #fff;
@@ -88,6 +92,7 @@ $border-width-default: 1px;
 // primary buttons
 $button-primary-bg: $CORPORATE-PRIMARY;
 $button-primary-border: $CORPORATE-SECONDARY;
+$button-focus-box-shadow: $CORPORATE-SHADOW;
 
 // default buttons
 $button-default-color: $CORPORATE-PRIMARY;
@@ -186,8 +191,8 @@ $body-color: $color-primary;
 //
 // Style anchor elements.
 
-$link-color: $primary;
-$link-hover-color: darken($link-color, 10%);
+$link-color: $CORPORATE-PRIMARY;
+$link-hover-color: $CORPORATE-SECONDARY;
 
 // Components
 //
diff --git a/src/styles/themes/b2c/properties.scss b/src/styles/themes/b2c/properties.scss
new file mode 100644
index 0000000000..7e1e838659
--- /dev/null
+++ b/src/styles/themes/b2c/properties.scss
@@ -0,0 +1,42 @@
+:root {
+  //
+  // LOGOS
+  --logo: url('/assets/themes/b2c/img/logo.png');
+  --logo-width: 114px;
+  --logo-height: 40px;
+  --logo-mobile: url('/assets/themes/b2c/img/logo_mobile.png');
+  --logo-mobile-width: 41px;
+  --logo-mobile-height: 41px;
+
+  //
+  // FONTS
+  --font-family-regular: 'robotoregular', 'Helvetica', 'Arial', sans-serif;
+  --font-family-bold: 'robotobold', 'Helvetica', 'Arial', sans-serif;
+  --font-family-condensedregular: 'roboto_condensedregular', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
+  --font-family-condensedbold: 'roboto_condensedbold', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
+
+  //
+  // CORPORATE DESIGN COLORS
+  --corporate-primary: #ff6d00; // ORANGE
+  --corporate-secondary: #cc5700; // darken($CORPORATE-PRIMARY, 10%);
+  --corporate-light: #ff8a33; // lighten($CORPORATE-PRIMARY, 10%);
+  --corporate-dark: #994100; // darken($CORPORATE-PRIMARY, 20%);
+  --corporate-shadow: #ff832680; // with alpha transparency
+
+  //
+  // TEXT COLOR
+  --text-color-corporate: var(--corporate-primary);
+  --text-color-primary: #222;
+  --text-color-secondary: #555;
+  --text-color-tertiary: #8b8b8b;
+  --text-color-quaternary: #999;
+  --text-color-quinary: #eee;
+
+  //
+  // GENERAL COLORS
+  --color-corporate: var(--corporate-primary);
+  --color-primary: #222;
+  --color-secondary: #2c2d2e;
+  --color-tertiary: #eee;
+  --color-quaternary: #d5d5d5;
+}
diff --git a/src/styles/themes/b2c/style.scss b/src/styles/themes/b2c/style.scss
index 0cc07b80c8..7d79547adb 100644
--- a/src/styles/themes/b2c/style.scss
+++ b/src/styles/themes/b2c/style.scss
@@ -1,10 +1,13 @@
 ///////////////////////////////////////////////////////////////////////////////
 //
-// THEME SPECIFIC CONFIGURATION
+// THEME SPECIFIC CONFIGURATION with CSS Custom Properties
 //
 ///////////////////////////////////////////////////////////////////////////////
 
-// set theme specific variables
+// set CSS custom properties (can be overridden at runtime)
+@import 'properties';
+
+// set theme specific variables (partially with CSS custom properties)
 @import 'variables';
 
 // import general main theme
diff --git a/src/styles/themes/b2c/variables.scss b/src/styles/themes/b2c/variables.scss
index 7bc8291636..fb52ba62c4 100644
--- a/src/styles/themes/b2c/variables.scss
+++ b/src/styles/themes/b2c/variables.scss
@@ -9,22 +9,22 @@
 //
 // LOGOS
 
-$logo: url('/assets/themes/b2c/img/logo.png');
-$logo-width: 114px;
-$logo-height: 40px;
-$logo-mobile: url('/assets/themes/b2c/img/logo_mobile.png');
-$logo-mobile-width: 41px;
-$logo-mobile-height: 41px;
+$logo: var(--logo);
+$logo-width: var(--logo-width);
+$logo-height: var(--logo-height);
+$logo-mobile: var(--logo-mobile);
+$logo-mobile-width: var(--logo-mobile-width);
+$logo-mobile-height: var(--logo-mobile-height);
 
 // General spaces
 $space-default: 15px;
 
 //
 // FONTS
-$font-family-regular: 'robotoregular', 'Helvetica', 'Arial', sans-serif;
-$font-family-bold: 'robotobold', 'Helvetica', 'Arial', sans-serif;
-$font-family-condensedregular: 'roboto_condensedregular', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
-$font-family-condensedbold: 'roboto_condensedbold', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
+$font-family-regular: var(--font-family-regular);
+$font-family-bold: var(--font-family-bold);
+$font-family-condensedregular: var(--font-family-condensedregular);
+$font-family-condensedbold: var(--font-family-condensedbold);
 
 //
 // FONT SIZES
@@ -33,19 +33,22 @@ $font-size-corporate: 0.875rem; // 14px is the bootstrap 3 default font size (1r
 //
 //CORPORATE DESIGN COLORS
 
-$CORPORATE-PRIMARY: #ff6d00; // ORANGE
-$CORPORATE-SECONDARY: darken($CORPORATE-PRIMARY, 10%);
+$CORPORATE-PRIMARY: var(--corporate-primary);
+$CORPORATE-SECONDARY: var(--corporate-secondary);
+$CORPORATE-LIGHT: var(--corporate-light);
+$CORPORATE-DARK: var(--corporate-dark);
+$CORPORATE-SHADOW: var(--corporate-shadow);
 
 //
 //TEXT COLORS
 
-$text-color-corporate: $CORPORATE-PRIMARY;
+$text-color-corporate: var(--text-color-corporate);
 
-$text-color-primary: #222;
-$text-color-secondary: #555;
-$text-color-tertiary: #8b8b8b;
-$text-color-quaternary: #999;
-$text-color-quinary: #eee;
+$text-color-primary: var(--text-color-primary);
+$text-color-secondary: var(--text-color-secondary);
+$text-color-tertiary: var(--text-color-tertiary);
+$text-color-quaternary: var(--text-color-quaternary);
+$text-color-quinary: var(--text-color-quinary);
 
 $text-color-inverse: #fff;
 $text-color-special: #ea1919; //RED
@@ -53,11 +56,12 @@ $text-color-special: #ea1919; //RED
 //
 //GENERAL COLORS
 
-$color-corporate: $CORPORATE-PRIMARY;
+$color-corporate: var(--color-corporate);
 
-$color-primary: #222;
-$color-secondary: #2c2d2e;
-$color-tertiary: #eee;
+$color-primary: var(--color-primary);
+$color-secondary: var(--color-secondary);
+$color-tertiary: var(--color-tertiary);
+$color-quaternary: var(--color-quaternary);
 
 $color-dark: #000;
 $color-inverse: #fff;
@@ -88,6 +92,7 @@ $border-width-default: 1px;
 // primary buttons
 $button-primary-bg: $CORPORATE-PRIMARY;
 $button-primary-border: $CORPORATE-SECONDARY;
+$button-focus-box-shadow: $CORPORATE-SHADOW;
 
 // default buttons
 $button-default-color: $CORPORATE-PRIMARY;
@@ -167,8 +172,12 @@ $gray-800: #343a40;
 $gray-900: #212529;
 $black: #000;
 
-$primary: $CORPORATE-PRIMARY;
-$secondary: $CORPORATE-SECONDARY;
+// NOTE: these two variables cannot be set with CSS custom properties
+// since they are used for Bootstrap internal color calculations
+// if necessary such Bootstrap generated styles need to be overridden in project styles (e.g. see buttons.scss)
+$primary: #ff6d00; // ORANGE
+$secondary: darken($primary, 10%);
+// ------------------------------
 
 $danger: $color-special-primary;
 $warning: $color-special-secondary;
@@ -186,8 +195,8 @@ $body-color: $color-primary;
 //
 // Style anchor elements.
 
-$link-color: $primary;
-$link-hover-color: darken($link-color, 10%);
+$link-color: $CORPORATE-PRIMARY;
+$link-hover-color: $CORPORATE-SECONDARY;
 
 // Components
 //