@oslokommune/punkt-css 9.3.2 → 9.4.0

package/dist/css/pkt.css

@@ -266,12 +266,99 @@ textarea {
 }
 /* 
  * Colors
+ * Brand
+ * Light mode
+ * Dark mode
  */
 :root {
   /**
-  * @tokens Colors
-  * @presenter Color
-  */
+   * @tokens Colors
+   * @presenter Color
+   */
+  --pkt-color-brand-blue-100: #F1FDFF;
+  --pkt-color-brand-blue-200: #E5FCFF;
+  --pkt-color-brand-blue-300: #D1F9FF;
+  --pkt-color-brand-blue-500: #B3F5FF;
+  --pkt-color-brand-blue-1000: #6FE9FF;
+  --pkt-color-brand-dark-blue-700: #6A698B;
+  --pkt-color-brand-dark-blue-1000: #2A2859;
+  --pkt-color-brand-warm-blue-1000: #1F42AA;
+  --pkt-color-brand-green-400: #C7FDE9;
+  --pkt-color-brand-green-1000: #43F8B6;
+  --pkt-color-brand-light-green-400: #E5FFE6;
+  --pkt-color-brand-light-green-1000: #C7F6C9;
+  --pkt-color-brand-dark-green-1000: #034B45;
+  --pkt-color-brand-yellow-1000: #F9C66B;
+  --pkt-color-brand-yellow-500: #FFE7BC;
+  --pkt-color-brand-red-100: #FFF2F1;
+  --pkt-color-brand-red-400: #FFDFDC;
+  --pkt-color-brand-red-600: #FFB4AC;
+  --pkt-color-brand-red-1000: #FF8274;
+  --pkt-color-brand-light-beige-1000: #F8F0DD;
+  --pkt-color-brand-dark-beige-1000: #D0BFAE;
+  --pkt-color-brand-neutrals-white: #FFFFFF;
+  --pkt-color-brand-neutrals-100: #F9F9F9;
+  --pkt-color-brand-neutrals-200: #F2F2F2;
+  --pkt-color-brand-neutrals-1000: #2C2C2C;
+  --pkt-color-brand-neutrals-black: #000000;
+  --pkt-color-brand-neutrals-transparent: transparent;
+  --pkt-color-brand-purple-1000: #E0ADFF;
+  --pkt-color-grays-gray-100: #E6E6E6;
+  --pkt-color-grays-gray-200: #CCCCCC;
+  --pkt-color-grays-gray-300: #B3B3B3;
+  --pkt-color-grays-gray-400: #9A9A9A;
+  --pkt-color-grays-gray-500: #808080;
+  --pkt-color-grays-gray-600: #666666;
+  --pkt-color-grays-gray-700: #4D4D4D;
+  --pkt-color-grays-gray-800: #333333;
+  --pkt-color-grays-gray-900: #1A1A1A;
+  --pkt-color-grays-gray-1000: #2C2C2C;
+  --pkt-color-background-card: #FFFFFF;
+  --pkt-color-background-default: #FFFFFF;
+  --pkt-color-background-subtle: #F9F9F9;
+  --pkt-color-background-transparent: transparent;
+  --pkt-color-border-default: #2A2859;
+  --pkt-color-border-beige: #D0BFAE;
+  --pkt-color-border-blue: #6FE9FF;
+  --pkt-color-border-gray: #CCCCCC;
+  --pkt-color-border-green: #43F8B6;
+  --pkt-color-border-light-beige: #F8F0DD;
+  --pkt-color-border-red: #FF8274;
+  --pkt-color-border-subtle: #F2F2F2;
+  --pkt-color-border-yellow: #F9C66B;
+  --pkt-color-border-states-active: #1F42AA;
+  --pkt-color-border-states-disabled: #B3B3B3;
+  --pkt-color-border-states-focus: #E0ADFF;
+  --pkt-color-border-states-hover: #1F42AA;
+  --pkt-color-surface-default-faded-green: #E5FFE6;
+  --pkt-color-surface-default-faded-red: #FFDFDC;
+  --pkt-color-surface-default-gray: #F9F9F9;
+  --pkt-color-surface-default-light-beige: #F8F0DD;
+  --pkt-color-surface-default-light-blue: #D1F9FF;
+  --pkt-color-surface-default-light-green: #C7FDE9;
+  --pkt-color-surface-default-red: #FFB4AC;
+  --pkt-color-surface-default-yellow: #FFE7BC;
+  --pkt-color-surface-strong-beige: #D0BFAE;
+  --pkt-color-surface-strong-blue: #6FE9FF;
+  --pkt-color-surface-strong-dark-blue: #2A2859;
+  --pkt-color-surface-strong-dark-green: #034B45;
+  --pkt-color-surface-strong-gray: #F2F2F2;
+  --pkt-color-surface-strong-green: #43F8B6;
+  --pkt-color-surface-strong-light-green: #C7F6C9;
+  --pkt-color-surface-strong-red: #FF8274;
+  --pkt-color-surface-strong-yellow: #F9C66B;
+  --pkt-color-surface-subtle-light-blue: #E5FCFF;
+  --pkt-color-surface-subtle-light-red: #FFF2F1;
+  --pkt-color-surface-subtle-pale-blue: #F1FDFF;
+  --pkt-color-surface-subtle-white: #FFFFFF;
+  --pkt-color-text-body-dark: #2A2859;
+  --pkt-color-text-body-default: #2A2859;
+  --pkt-color-text-body-light: #FFFFFF;
+  --pkt-color-text-placeholder: #666666;
+  --pkt-color-text-action-disabled: #666666;
+  --pkt-color-text-action-active: #1F42AA;
+  --pkt-color-text-action-hover: #1F42AA;
+  --pkt-color-text-action-normal: #2A2859;
   --color-blue: #6fe9ff;
   --color-blue-light: #b3f5ff;
   --color-blue-dark: #2a2859;
@@ -324,414 +411,1115 @@ textarea {
   --color-grayscale-90: #1a1a1a;
   --color-black: #000;
 }
-
-.bg-color-blue {
+:root .pkt-color-bg-brand-blue-100 {
+  background-color: #F1FDFF !important;
+}
+:root .pkt-color-txt-brand-blue-100 {
+  color: #F1FDFF !important;
+}
+:root .pkt-color-border-brand-blue-100 {
+  border-color: #F1FDFF !important;
+}
+:root .pkt-color-bg-brand-blue-200 {
+  background-color: #E5FCFF !important;
+}
+:root .pkt-color-txt-brand-blue-200 {
+  color: #E5FCFF !important;
+}
+:root .pkt-color-border-brand-blue-200 {
+  border-color: #E5FCFF !important;
+}
+:root .pkt-color-bg-brand-blue-300 {
+  background-color: #D1F9FF !important;
+}
+:root .pkt-color-txt-brand-blue-300 {
+  color: #D1F9FF !important;
+}
+:root .pkt-color-border-brand-blue-300 {
+  border-color: #D1F9FF !important;
+}
+:root .pkt-color-bg-brand-blue-500 {
+  background-color: #B3F5FF !important;
+}
+:root .pkt-color-txt-brand-blue-500 {
+  color: #B3F5FF !important;
+}
+:root .pkt-color-border-brand-blue-500 {
+  border-color: #B3F5FF !important;
+}
+:root .pkt-color-bg-brand-blue-1000 {
+  background-color: #6FE9FF !important;
+}
+:root .pkt-color-txt-brand-blue-1000 {
+  color: #6FE9FF !important;
+}
+:root .pkt-color-border-brand-blue-1000 {
+  border-color: #6FE9FF !important;
+}
+:root .pkt-color-bg-brand-dark-blue-700 {
+  background-color: #6A698B !important;
+}
+:root .pkt-color-txt-brand-dark-blue-700 {
+  color: #6A698B !important;
+}
+:root .pkt-color-border-brand-dark-blue-700 {
+  border-color: #6A698B !important;
+}
+:root .pkt-color-bg-brand-dark-blue-1000 {
+  background-color: #2A2859 !important;
+}
+:root .pkt-color-txt-brand-dark-blue-1000 {
+  color: #2A2859 !important;
+}
+:root .pkt-color-border-brand-dark-blue-1000 {
+  border-color: #2A2859 !important;
+}
+:root .pkt-color-bg-brand-warm-blue-1000 {
+  background-color: #1F42AA !important;
+}
+:root .pkt-color-txt-brand-warm-blue-1000 {
+  color: #1F42AA !important;
+}
+:root .pkt-color-border-brand-warm-blue-1000 {
+  border-color: #1F42AA !important;
+}
+:root .pkt-color-bg-brand-green-400 {
+  background-color: #C7FDE9 !important;
+}
+:root .pkt-color-txt-brand-green-400 {
+  color: #C7FDE9 !important;
+}
+:root .pkt-color-border-brand-green-400 {
+  border-color: #C7FDE9 !important;
+}
+:root .pkt-color-bg-brand-green-1000 {
+  background-color: #43F8B6 !important;
+}
+:root .pkt-color-txt-brand-green-1000 {
+  color: #43F8B6 !important;
+}
+:root .pkt-color-border-brand-green-1000 {
+  border-color: #43F8B6 !important;
+}
+:root .pkt-color-bg-brand-light-green-400 {
+  background-color: #E5FFE6 !important;
+}
+:root .pkt-color-txt-brand-light-green-400 {
+  color: #E5FFE6 !important;
+}
+:root .pkt-color-border-brand-light-green-400 {
+  border-color: #E5FFE6 !important;
+}
+:root .pkt-color-bg-brand-light-green-1000 {
+  background-color: #C7F6C9 !important;
+}
+:root .pkt-color-txt-brand-light-green-1000 {
+  color: #C7F6C9 !important;
+}
+:root .pkt-color-border-brand-light-green-1000 {
+  border-color: #C7F6C9 !important;
+}
+:root .pkt-color-bg-brand-dark-green-1000 {
+  background-color: #034B45 !important;
+}
+:root .pkt-color-txt-brand-dark-green-1000 {
+  color: #034B45 !important;
+}
+:root .pkt-color-border-brand-dark-green-1000 {
+  border-color: #034B45 !important;
+}
+:root .pkt-color-bg-brand-yellow-1000 {
+  background-color: #F9C66B !important;
+}
+:root .pkt-color-txt-brand-yellow-1000 {
+  color: #F9C66B !important;
+}
+:root .pkt-color-border-brand-yellow-1000 {
+  border-color: #F9C66B !important;
+}
+:root .pkt-color-bg-brand-yellow-500 {
+  background-color: #FFE7BC !important;
+}
+:root .pkt-color-txt-brand-yellow-500 {
+  color: #FFE7BC !important;
+}
+:root .pkt-color-border-brand-yellow-500 {
+  border-color: #FFE7BC !important;
+}
+:root .pkt-color-bg-brand-red-100 {
+  background-color: #FFF2F1 !important;
+}
+:root .pkt-color-txt-brand-red-100 {
+  color: #FFF2F1 !important;
+}
+:root .pkt-color-border-brand-red-100 {
+  border-color: #FFF2F1 !important;
+}
+:root .pkt-color-bg-brand-red-400 {
+  background-color: #FFDFDC !important;
+}
+:root .pkt-color-txt-brand-red-400 {
+  color: #FFDFDC !important;
+}
+:root .pkt-color-border-brand-red-400 {
+  border-color: #FFDFDC !important;
+}
+:root .pkt-color-bg-brand-red-600 {
+  background-color: #FFB4AC !important;
+}
+:root .pkt-color-txt-brand-red-600 {
+  color: #FFB4AC !important;
+}
+:root .pkt-color-border-brand-red-600 {
+  border-color: #FFB4AC !important;
+}
+:root .pkt-color-bg-brand-red-1000 {
+  background-color: #FF8274 !important;
+}
+:root .pkt-color-txt-brand-red-1000 {
+  color: #FF8274 !important;
+}
+:root .pkt-color-border-brand-red-1000 {
+  border-color: #FF8274 !important;
+}
+:root .pkt-color-bg-brand-light-beige-1000 {
+  background-color: #F8F0DD !important;
+}
+:root .pkt-color-txt-brand-light-beige-1000 {
+  color: #F8F0DD !important;
+}
+:root .pkt-color-border-brand-light-beige-1000 {
+  border-color: #F8F0DD !important;
+}
+:root .pkt-color-bg-brand-dark-beige-1000 {
+  background-color: #D0BFAE !important;
+}
+:root .pkt-color-txt-brand-dark-beige-1000 {
+  color: #D0BFAE !important;
+}
+:root .pkt-color-border-brand-dark-beige-1000 {
+  border-color: #D0BFAE !important;
+}
+:root .pkt-color-bg-brand-neutrals-white {
+  background-color: #FFFFFF !important;
+}
+:root .pkt-color-txt-brand-neutrals-white {
+  color: #FFFFFF !important;
+}
+:root .pkt-color-border-brand-neutrals-white {
+  border-color: #FFFFFF !important;
+}
+:root .pkt-color-bg-brand-neutrals-100 {
+  background-color: #F9F9F9 !important;
+}
+:root .pkt-color-txt-brand-neutrals-100 {
+  color: #F9F9F9 !important;
+}
+:root .pkt-color-border-brand-neutrals-100 {
+  border-color: #F9F9F9 !important;
+}
+:root .pkt-color-bg-brand-neutrals-200 {
+  background-color: #F2F2F2 !important;
+}
+:root .pkt-color-txt-brand-neutrals-200 {
+  color: #F2F2F2 !important;
+}
+:root .pkt-color-border-brand-neutrals-200 {
+  border-color: #F2F2F2 !important;
+}
+:root .pkt-color-bg-brand-neutrals-1000 {
+  background-color: #2C2C2C !important;
+}
+:root .pkt-color-txt-brand-neutrals-1000 {
+  color: #2C2C2C !important;
+}
+:root .pkt-color-border-brand-neutrals-1000 {
+  border-color: #2C2C2C !important;
+}
+:root .pkt-color-bg-brand-neutrals-black {
+  background-color: #000000 !important;
+}
+:root .pkt-color-txt-brand-neutrals-black {
+  color: #000000 !important;
+}
+:root .pkt-color-border-brand-neutrals-black {
+  border-color: #000000 !important;
+}
+:root .pkt-color-bg-brand-neutrals-transparent {
+  background-color: transparent !important;
+}
+:root .pkt-color-txt-brand-neutrals-transparent {
+  color: transparent !important;
+}
+:root .pkt-color-border-brand-neutrals-transparent {
+  border-color: transparent !important;
+}
+:root .pkt-color-bg-brand-purple-1000 {
+  background-color: #E0ADFF !important;
+}
+:root .pkt-color-txt-brand-purple-1000 {
+  color: #E0ADFF !important;
+}
+:root .pkt-color-border-brand-purple-1000 {
+  border-color: #E0ADFF !important;
+}
+:root .pkt-color-bg-grays-gray-100 {
+  background-color: #E6E6E6 !important;
+}
+:root .pkt-color-txt-grays-gray-100 {
+  color: #E6E6E6 !important;
+}
+:root .pkt-color-border-grays-gray-100 {
+  border-color: #E6E6E6 !important;
+}
+:root .pkt-color-bg-grays-gray-200 {
+  background-color: #CCCCCC !important;
+}
+:root .pkt-color-txt-grays-gray-200 {
+  color: #CCCCCC !important;
+}
+:root .pkt-color-border-grays-gray-200 {
+  border-color: #CCCCCC !important;
+}
+:root .pkt-color-bg-grays-gray-300 {
+  background-color: #B3B3B3 !important;
+}
+:root .pkt-color-txt-grays-gray-300 {
+  color: #B3B3B3 !important;
+}
+:root .pkt-color-border-grays-gray-300 {
+  border-color: #B3B3B3 !important;
+}
+:root .pkt-color-bg-grays-gray-400 {
+  background-color: #9A9A9A !important;
+}
+:root .pkt-color-txt-grays-gray-400 {
+  color: #9A9A9A !important;
+}
+:root .pkt-color-border-grays-gray-400 {
+  border-color: #9A9A9A !important;
+}
+:root .pkt-color-bg-grays-gray-500 {
+  background-color: #808080 !important;
+}
+:root .pkt-color-txt-grays-gray-500 {
+  color: #808080 !important;
+}
+:root .pkt-color-border-grays-gray-500 {
+  border-color: #808080 !important;
+}
+:root .pkt-color-bg-grays-gray-600 {
+  background-color: #666666 !important;
+}
+:root .pkt-color-txt-grays-gray-600 {
+  color: #666666 !important;
+}
+:root .pkt-color-border-grays-gray-600 {
+  border-color: #666666 !important;
+}
+:root .pkt-color-bg-grays-gray-700 {
+  background-color: #4D4D4D !important;
+}
+:root .pkt-color-txt-grays-gray-700 {
+  color: #4D4D4D !important;
+}
+:root .pkt-color-border-grays-gray-700 {
+  border-color: #4D4D4D !important;
+}
+:root .pkt-color-bg-grays-gray-800 {
+  background-color: #333333 !important;
+}
+:root .pkt-color-txt-grays-gray-800 {
+  color: #333333 !important;
+}
+:root .pkt-color-border-grays-gray-800 {
+  border-color: #333333 !important;
+}
+:root .pkt-color-bg-grays-gray-900 {
+  background-color: #1A1A1A !important;
+}
+:root .pkt-color-txt-grays-gray-900 {
+  color: #1A1A1A !important;
+}
+:root .pkt-color-border-grays-gray-900 {
+  border-color: #1A1A1A !important;
+}
+:root .pkt-color-bg-grays-gray-1000 {
+  background-color: #2C2C2C !important;
+}
+:root .pkt-color-txt-grays-gray-1000 {
+  color: #2C2C2C !important;
+}
+:root .pkt-color-border-grays-gray-1000 {
+  border-color: #2C2C2C !important;
+}
+:root .pkt-color-bg-background-card {
+  background-color: var(--pkt-color-background-card) !important;
+}
+:root .pkt-color-txt-background-card {
+  color: var(--pkt-color-background-card) !important;
+}
+:root .pkt-color-border-background-card {
+  border-color: var(--pkt-color-background-card) !important;
+}
+:root .pkt-color-bg-background-default {
+  background-color: var(--pkt-color-background-default) !important;
+}
+:root .pkt-color-txt-background-default {
+  color: var(--pkt-color-background-default) !important;
+}
+:root .pkt-color-border-background-default {
+  border-color: var(--pkt-color-background-default) !important;
+}
+:root .pkt-color-bg-background-subtle {
+  background-color: var(--pkt-color-background-subtle) !important;
+}
+:root .pkt-color-txt-background-subtle {
+  color: var(--pkt-color-background-subtle) !important;
+}
+:root .pkt-color-border-background-subtle {
+  border-color: var(--pkt-color-background-subtle) !important;
+}
+:root .pkt-color-bg-background-transparent {
+  background-color: var(--pkt-color-background-transparent) !important;
+}
+:root .pkt-color-txt-background-transparent {
+  color: var(--pkt-color-background-transparent) !important;
+}
+:root .pkt-color-border-background-transparent {
+  border-color: var(--pkt-color-background-transparent) !important;
+}
+:root .pkt-color-bg-border-default {
+  background-color: var(--pkt-color-border-default) !important;
+}
+:root .pkt-color-txt-border-default {
+  color: var(--pkt-color-border-default) !important;
+}
+:root .pkt-color-border-border-default {
+  border-color: var(--pkt-color-border-default) !important;
+}
+:root .pkt-color-bg-border-beige {
+  background-color: var(--pkt-color-border-beige) !important;
+}
+:root .pkt-color-txt-border-beige {
+  color: var(--pkt-color-border-beige) !important;
+}
+:root .pkt-color-border-border-beige {
+  border-color: var(--pkt-color-border-beige) !important;
+}
+:root .pkt-color-bg-border-blue {
+  background-color: var(--pkt-color-border-blue) !important;
+}
+:root .pkt-color-txt-border-blue {
+  color: var(--pkt-color-border-blue) !important;
+}
+:root .pkt-color-border-border-blue {
+  border-color: var(--pkt-color-border-blue) !important;
+}
+:root .pkt-color-bg-border-gray {
+  background-color: var(--pkt-color-border-gray) !important;
+}
+:root .pkt-color-txt-border-gray {
+  color: var(--pkt-color-border-gray) !important;
+}
+:root .pkt-color-border-border-gray {
+  border-color: var(--pkt-color-border-gray) !important;
+}
+:root .pkt-color-bg-border-green {
+  background-color: var(--pkt-color-border-green) !important;
+}
+:root .pkt-color-txt-border-green {
+  color: var(--pkt-color-border-green) !important;
+}
+:root .pkt-color-border-border-green {
+  border-color: var(--pkt-color-border-green) !important;
+}
+:root .pkt-color-bg-border-light-beige {
+  background-color: var(--pkt-color-border-light-beige) !important;
+}
+:root .pkt-color-txt-border-light-beige {
+  color: var(--pkt-color-border-light-beige) !important;
+}
+:root .pkt-color-border-border-light-beige {
+  border-color: var(--pkt-color-border-light-beige) !important;
+}
+:root .pkt-color-bg-border-red {
+  background-color: var(--pkt-color-border-red) !important;
+}
+:root .pkt-color-txt-border-red {
+  color: var(--pkt-color-border-red) !important;
+}
+:root .pkt-color-border-border-red {
+  border-color: var(--pkt-color-border-red) !important;
+}
+:root .pkt-color-bg-border-subtle {
+  background-color: var(--pkt-color-border-subtle) !important;
+}
+:root .pkt-color-txt-border-subtle {
+  color: var(--pkt-color-border-subtle) !important;
+}
+:root .pkt-color-border-border-subtle {
+  border-color: var(--pkt-color-border-subtle) !important;
+}
+:root .pkt-color-bg-border-yellow {
+  background-color: var(--pkt-color-border-yellow) !important;
+}
+:root .pkt-color-txt-border-yellow {
+  color: var(--pkt-color-border-yellow) !important;
+}
+:root .pkt-color-border-border-yellow {
+  border-color: var(--pkt-color-border-yellow) !important;
+}
+:root .pkt-color-bg-border-states-active {
+  background-color: var(--pkt-color-border-states-active) !important;
+}
+:root .pkt-color-txt-border-states-active {
+  color: var(--pkt-color-border-states-active) !important;
+}
+:root .pkt-color-border-border-states-active {
+  border-color: var(--pkt-color-border-states-active) !important;
+}
+:root .pkt-color-bg-border-states-disabled {
+  background-color: var(--pkt-color-border-states-disabled) !important;
+}
+:root .pkt-color-txt-border-states-disabled {
+  color: var(--pkt-color-border-states-disabled) !important;
+}
+:root .pkt-color-border-border-states-disabled {
+  border-color: var(--pkt-color-border-states-disabled) !important;
+}
+:root .pkt-color-bg-border-states-focus {
+  background-color: var(--pkt-color-border-states-focus) !important;
+}
+:root .pkt-color-txt-border-states-focus {
+  color: var(--pkt-color-border-states-focus) !important;
+}
+:root .pkt-color-border-border-states-focus {
+  border-color: var(--pkt-color-border-states-focus) !important;
+}
+:root .pkt-color-bg-border-states-hover {
+  background-color: var(--pkt-color-border-states-hover) !important;
+}
+:root .pkt-color-txt-border-states-hover {
+  color: var(--pkt-color-border-states-hover) !important;
+}
+:root .pkt-color-border-border-states-hover {
+  border-color: var(--pkt-color-border-states-hover) !important;
+}
+:root .pkt-color-bg-surface-default-faded-green {
+  background-color: var(--pkt-color-surface-default-faded-green) !important;
+}
+:root .pkt-color-txt-surface-default-faded-green {
+  color: var(--pkt-color-surface-default-faded-green) !important;
+}
+:root .pkt-color-border-surface-default-faded-green {
+  border-color: var(--pkt-color-surface-default-faded-green) !important;
+}
+:root .pkt-color-bg-surface-default-faded-red {
+  background-color: var(--pkt-color-surface-default-faded-red) !important;
+}
+:root .pkt-color-txt-surface-default-faded-red {
+  color: var(--pkt-color-surface-default-faded-red) !important;
+}
+:root .pkt-color-border-surface-default-faded-red {
+  border-color: var(--pkt-color-surface-default-faded-red) !important;
+}
+:root .pkt-color-bg-surface-default-gray {
+  background-color: var(--pkt-color-surface-default-gray) !important;
+}
+:root .pkt-color-txt-surface-default-gray {
+  color: var(--pkt-color-surface-default-gray) !important;
+}
+:root .pkt-color-border-surface-default-gray {
+  border-color: var(--pkt-color-surface-default-gray) !important;
+}
+:root .pkt-color-bg-surface-default-light-beige {
+  background-color: var(--pkt-color-surface-default-light-beige) !important;
+}
+:root .pkt-color-txt-surface-default-light-beige {
+  color: var(--pkt-color-surface-default-light-beige) !important;
+}
+:root .pkt-color-border-surface-default-light-beige {
+  border-color: var(--pkt-color-surface-default-light-beige) !important;
+}
+:root .pkt-color-bg-surface-default-light-blue {
+  background-color: var(--pkt-color-surface-default-light-blue) !important;
+}
+:root .pkt-color-txt-surface-default-light-blue {
+  color: var(--pkt-color-surface-default-light-blue) !important;
+}
+:root .pkt-color-border-surface-default-light-blue {
+  border-color: var(--pkt-color-surface-default-light-blue) !important;
+}
+:root .pkt-color-bg-surface-default-light-green {
+  background-color: var(--pkt-color-surface-default-light-green) !important;
+}
+:root .pkt-color-txt-surface-default-light-green {
+  color: var(--pkt-color-surface-default-light-green) !important;
+}
+:root .pkt-color-border-surface-default-light-green {
+  border-color: var(--pkt-color-surface-default-light-green) !important;
+}
+:root .pkt-color-bg-surface-default-red {
+  background-color: var(--pkt-color-surface-default-red) !important;
+}
+:root .pkt-color-txt-surface-default-red {
+  color: var(--pkt-color-surface-default-red) !important;
+}
+:root .pkt-color-border-surface-default-red {
+  border-color: var(--pkt-color-surface-default-red) !important;
+}
+:root .pkt-color-bg-surface-default-yellow {
+  background-color: var(--pkt-color-surface-default-yellow) !important;
+}
+:root .pkt-color-txt-surface-default-yellow {
+  color: var(--pkt-color-surface-default-yellow) !important;
+}
+:root .pkt-color-border-surface-default-yellow {
+  border-color: var(--pkt-color-surface-default-yellow) !important;
+}
+:root .pkt-color-bg-surface-strong-beige {
+  background-color: var(--pkt-color-surface-strong-beige) !important;
+}
+:root .pkt-color-txt-surface-strong-beige {
+  color: var(--pkt-color-surface-strong-beige) !important;
+}
+:root .pkt-color-border-surface-strong-beige {
+  border-color: var(--pkt-color-surface-strong-beige) !important;
+}
+:root .pkt-color-bg-surface-strong-blue {
+  background-color: var(--pkt-color-surface-strong-blue) !important;
+}
+:root .pkt-color-txt-surface-strong-blue {
+  color: var(--pkt-color-surface-strong-blue) !important;
+}
+:root .pkt-color-border-surface-strong-blue {
+  border-color: var(--pkt-color-surface-strong-blue) !important;
+}
+:root .pkt-color-bg-surface-strong-dark-blue {
+  background-color: var(--pkt-color-surface-strong-dark-blue) !important;
+}
+:root .pkt-color-txt-surface-strong-dark-blue {
+  color: var(--pkt-color-surface-strong-dark-blue) !important;
+}
+:root .pkt-color-border-surface-strong-dark-blue {
+  border-color: var(--pkt-color-surface-strong-dark-blue) !important;
+}
+:root .pkt-color-bg-surface-strong-dark-green {
+  background-color: var(--pkt-color-surface-strong-dark-green) !important;
+}
+:root .pkt-color-txt-surface-strong-dark-green {
+  color: var(--pkt-color-surface-strong-dark-green) !important;
+}
+:root .pkt-color-border-surface-strong-dark-green {
+  border-color: var(--pkt-color-surface-strong-dark-green) !important;
+}
+:root .pkt-color-bg-surface-strong-gray {
+  background-color: var(--pkt-color-surface-strong-gray) !important;
+}
+:root .pkt-color-txt-surface-strong-gray {
+  color: var(--pkt-color-surface-strong-gray) !important;
+}
+:root .pkt-color-border-surface-strong-gray {
+  border-color: var(--pkt-color-surface-strong-gray) !important;
+}
+:root .pkt-color-bg-surface-strong-green {
+  background-color: var(--pkt-color-surface-strong-green) !important;
+}
+:root .pkt-color-txt-surface-strong-green {
+  color: var(--pkt-color-surface-strong-green) !important;
+}
+:root .pkt-color-border-surface-strong-green {
+  border-color: var(--pkt-color-surface-strong-green) !important;
+}
+:root .pkt-color-bg-surface-strong-light-green {
+  background-color: var(--pkt-color-surface-strong-light-green) !important;
+}
+:root .pkt-color-txt-surface-strong-light-green {
+  color: var(--pkt-color-surface-strong-light-green) !important;
+}
+:root .pkt-color-border-surface-strong-light-green {
+  border-color: var(--pkt-color-surface-strong-light-green) !important;
+}
+:root .pkt-color-bg-surface-strong-red {
+  background-color: var(--pkt-color-surface-strong-red) !important;
+}
+:root .pkt-color-txt-surface-strong-red {
+  color: var(--pkt-color-surface-strong-red) !important;
+}
+:root .pkt-color-border-surface-strong-red {
+  border-color: var(--pkt-color-surface-strong-red) !important;
+}
+:root .pkt-color-bg-surface-strong-yellow {
+  background-color: var(--pkt-color-surface-strong-yellow) !important;
+}
+:root .pkt-color-txt-surface-strong-yellow {
+  color: var(--pkt-color-surface-strong-yellow) !important;
+}
+:root .pkt-color-border-surface-strong-yellow {
+  border-color: var(--pkt-color-surface-strong-yellow) !important;
+}
+:root .pkt-color-bg-surface-subtle-light-blue {
+  background-color: var(--pkt-color-surface-subtle-light-blue) !important;
+}
+:root .pkt-color-txt-surface-subtle-light-blue {
+  color: var(--pkt-color-surface-subtle-light-blue) !important;
+}
+:root .pkt-color-border-surface-subtle-light-blue {
+  border-color: var(--pkt-color-surface-subtle-light-blue) !important;
+}
+:root .pkt-color-bg-surface-subtle-light-red {
+  background-color: var(--pkt-color-surface-subtle-light-red) !important;
+}
+:root .pkt-color-txt-surface-subtle-light-red {
+  color: var(--pkt-color-surface-subtle-light-red) !important;
+}
+:root .pkt-color-border-surface-subtle-light-red {
+  border-color: var(--pkt-color-surface-subtle-light-red) !important;
+}
+:root .pkt-color-bg-surface-subtle-pale-blue {
+  background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
+}
+:root .pkt-color-txt-surface-subtle-pale-blue {
+  color: var(--pkt-color-surface-subtle-pale-blue) !important;
+}
+:root .pkt-color-border-surface-subtle-pale-blue {
+  border-color: var(--pkt-color-surface-subtle-pale-blue) !important;
+}
+:root .pkt-color-bg-surface-subtle-white {
+  background-color: var(--pkt-color-surface-subtle-white) !important;
+}
+:root .pkt-color-txt-surface-subtle-white {
+  color: var(--pkt-color-surface-subtle-white) !important;
+}
+:root .pkt-color-border-surface-subtle-white {
+  border-color: var(--pkt-color-surface-subtle-white) !important;
+}
+:root .pkt-color-bg-text-body-dark {
+  background-color: var(--pkt-color-text-body-dark) !important;
+}
+:root .pkt-color-txt-text-body-dark {
+  color: var(--pkt-color-text-body-dark) !important;
+}
+:root .pkt-color-border-text-body-dark {
+  border-color: var(--pkt-color-text-body-dark) !important;
+}
+:root .pkt-color-bg-text-body-default {
+  background-color: var(--pkt-color-text-body-default) !important;
+}
+:root .pkt-color-txt-text-body-default {
+  color: var(--pkt-color-text-body-default) !important;
+}
+:root .pkt-color-border-text-body-default {
+  border-color: var(--pkt-color-text-body-default) !important;
+}
+:root .pkt-color-bg-text-body-light {
+  background-color: var(--pkt-color-text-body-light) !important;
+}
+:root .pkt-color-txt-text-body-light {
+  color: var(--pkt-color-text-body-light) !important;
+}
+:root .pkt-color-border-text-body-light {
+  border-color: var(--pkt-color-text-body-light) !important;
+}
+:root .pkt-color-bg-text-placeholder {
+  background-color: var(--pkt-color-text-placeholder) !important;
+}
+:root .pkt-color-txt-text-placeholder {
+  color: var(--pkt-color-text-placeholder) !important;
+}
+:root .pkt-color-border-text-placeholder {
+  border-color: var(--pkt-color-text-placeholder) !important;
+}
+:root .pkt-color-bg-text-action-disabled {
+  background-color: var(--pkt-color-text-action-disabled) !important;
+}
+:root .pkt-color-txt-text-action-disabled {
+  color: var(--pkt-color-text-action-disabled) !important;
+}
+:root .pkt-color-border-text-action-disabled {
+  border-color: var(--pkt-color-text-action-disabled) !important;
+}
+:root .pkt-color-bg-text-action-active {
+  background-color: var(--pkt-color-text-action-active) !important;
+}
+:root .pkt-color-txt-text-action-active {
+  color: var(--pkt-color-text-action-active) !important;
+}
+:root .pkt-color-border-text-action-active {
+  border-color: var(--pkt-color-text-action-active) !important;
+}
+:root .pkt-color-bg-text-action-hover {
+  background-color: var(--pkt-color-text-action-hover) !important;
+}
+:root .pkt-color-txt-text-action-hover {
+  color: var(--pkt-color-text-action-hover) !important;
+}
+:root .pkt-color-border-text-action-hover {
+  border-color: var(--pkt-color-text-action-hover) !important;
+}
+:root .pkt-color-bg-text-action-normal {
+  background-color: var(--pkt-color-text-action-normal) !important;
+}
+:root .pkt-color-txt-text-action-normal {
+  color: var(--pkt-color-text-action-normal) !important;
+}
+:root .pkt-color-border-text-action-normal {
+  border-color: var(--pkt-color-text-action-normal) !important;
+}
+:root .bg-color-blue {
   background-color: #6fe9ff !important;
 }
-
-.txt-color-blue {
+:root .txt-color-blue {
   color: #6fe9ff !important;
 }
-
-.bg-color-blue-light {
+:root .bg-color-blue-light {
   background-color: #b3f5ff !important;
 }
-
-.txt-color-blue-light {
+:root .txt-color-blue-light {
   color: #b3f5ff !important;
 }
-
-.bg-color-blue-dark {
+:root .bg-color-blue-dark {
   background-color: #2a2859 !important;
 }
-
-.txt-color-blue-dark {
+:root .txt-color-blue-dark {
   color: #2a2859 !important;
 }
-
-.bg-color-green {
+:root .bg-color-green {
   background-color: #43f8b6 !important;
 }
-
-.txt-color-green {
+:root .txt-color-green {
   color: #43f8b6 !important;
 }
-
-.bg-color-green-light {
+:root .bg-color-green-light {
   background-color: #c7f6c9 !important;
 }
-
-.txt-color-green-light {
+:root .txt-color-green-light {
   color: #c7f6c9 !important;
 }
-
-.bg-color-green-dark {
+:root .bg-color-green-dark {
   background-color: #034b45 !important;
 }
-
-.txt-color-green-dark {
+:root .txt-color-green-dark {
   color: #034b45 !important;
 }
-
-.bg-color-red {
+:root .bg-color-red {
   background-color: #ff8274 !important;
 }
-
-.txt-color-red {
+:root .txt-color-red {
   color: #ff8274 !important;
 }
-
-.bg-color-red-light {
+:root .bg-color-red-light {
   background-color: #ffb4ac !important;
 }
-
-.txt-color-red-light {
+:root .txt-color-red-light {
   color: #ffb4ac !important;
 }
-
-.bg-color-yellow {
+:root .bg-color-yellow {
   background-color: #f9c66b !important;
 }
-
-.txt-color-yellow {
+:root .txt-color-yellow {
   color: #f9c66b !important;
 }
-
-.bg-color-beige-light {
+:root .bg-color-beige-light {
   background-color: #f8f0dd !important;
 }
-
-.txt-color-beige-light {
+:root .txt-color-beige-light {
   color: #f8f0dd !important;
 }
-
-.bg-color-beige-dark {
+:root .bg-color-beige-dark {
   background-color: #d0bfae !important;
 }
-
-.txt-color-beige-dark {
+:root .txt-color-beige-dark {
   color: #d0bfae !important;
 }
-
-.bg-color-active {
+:root .bg-color-active {
   background-color: #1f42aa !important;
 }
-
-.txt-color-active {
+:root .txt-color-active {
   color: #1f42aa !important;
 }
-
-.bg-color-active-light {
+:root .bg-color-active-light {
   background-color: #b3f5ff !important;
 }
-
-.txt-color-active-light {
+:root .txt-color-active-light {
   color: #b3f5ff !important;
 }
-
-.bg-color-hover {
+:root .bg-color-hover {
   background-color: #1f42aa !important;
 }
-
-.txt-color-hover {
+:root .txt-color-hover {
   color: #1f42aa !important;
 }
-
-.bg-color-hover-light {
+:root .bg-color-hover-light {
   background-color: #b3f5ff !important;
 }
-
-.txt-color-hover-light {
+:root .txt-color-hover-light {
   color: #b3f5ff !important;
 }
-
-.bg-color-focus {
+:root .bg-color-focus {
   background-color: #e0adff !important;
 }
-
-.txt-color-focus {
+:root .txt-color-focus {
   color: #e0adff !important;
 }
-
-.bg-color-disabled {
+:root .bg-color-disabled {
   background-color: #4d4d4d !important;
 }
-
-.txt-color-disabled {
+:root .txt-color-disabled {
   color: #4d4d4d !important;
 }
-
-.bg-color-disabled-light {
+:root .bg-color-disabled-light {
   background-color: #f9f9f9 !important;
 }
-
-.txt-color-disabled-light {
+:root .txt-color-disabled-light {
   color: #f9f9f9 !important;
 }
-
-.bg-color-info {
+:root .bg-color-info {
   background-color: #2a2859 !important;
 }
-
-.txt-color-info {
+:root .txt-color-info {
   color: #2a2859 !important;
 }
-
-.bg-color-success {
+:root .bg-color-success {
   background-color: #034b45 !important;
 }
-
-.txt-color-success {
+:root .txt-color-success {
   color: #034b45 !important;
 }
-
-.bg-color-warning {
+:root .bg-color-warning {
   background-color: #774c01 !important;
 }
-
-.txt-color-warning {
+:root .txt-color-warning {
   color: #774c01 !important;
 }
-
-.bg-color-error {
+:root .bg-color-error {
   background-color: #96281c !important;
 }
-
-.txt-color-error {
+:root .txt-color-error {
   color: #96281c !important;
 }
-
-.bg-color-blue-dark-5 {
+:root .bg-color-blue-dark-5 {
   background-color: #f2f9ff !important;
 }
-
-.txt-color-blue-dark-5 {
+:root .txt-color-blue-dark-5 {
   color: #f2f9ff !important;
 }
-
-.bg-color-blue-dark-10 {
+:root .bg-color-blue-dark-10 {
   background-color: #d9e9f2 !important;
 }
-
-.txt-color-blue-dark-10 {
+:root .txt-color-blue-dark-10 {
   color: #d9e9f2 !important;
 }
-
-.bg-color-blue-5 {
+:root .bg-color-blue-5 {
   background-color: #f1fdff !important;
 }
-
-.txt-color-blue-5 {
+:root .txt-color-blue-5 {
   color: #f1fdff !important;
 }
-
-.bg-color-blue-10 {
+:root .bg-color-blue-10 {
   background-color: #e5fcff !important;
 }
-
-.txt-color-blue-10 {
+:root .txt-color-blue-10 {
   color: #e5fcff !important;
 }
-
-.bg-color-blue-60 {
+:root .bg-color-blue-60 {
   background-color: #d1f9ff !important;
 }
-
-.txt-color-blue-60 {
+:root .txt-color-blue-60 {
   color: #d1f9ff !important;
 }
-
-.bg-color-green-dark-5 {
+:root .bg-color-green-dark-5 {
   background-color: #f2fff3 !important;
 }
-
-.txt-color-green-dark-5 {
+:root .txt-color-green-dark-5 {
   color: #f2fff3 !important;
 }
-
-.bg-color-green-dark-10 {
+:root .bg-color-green-dark-10 {
   background-color: #d9f2ef !important;
 }
-
-.txt-color-green-dark-10 {
+:root .txt-color-green-dark-10 {
   color: #d9f2ef !important;
 }
-
-.bg-color-green-10 {
+:root .bg-color-green-10 {
   background-color: #e5ffe6 !important;
 }
-
-.txt-color-green-10 {
+:root .txt-color-green-10 {
   color: #e5ffe6 !important;
 }
-
-.bg-color-green-30 {
+:root .bg-color-green-30 {
   background-color: #c7fde9 !important;
 }
-
-.txt-color-green-30 {
+:root .txt-color-green-30 {
   color: #c7fde9 !important;
 }
-
-.bg-color-red-5 {
+:root .bg-color-red-5 {
   background-color: #fff3f2 !important;
 }
-
-.txt-color-red-5 {
+:root .txt-color-red-5 {
   color: #fff3f2 !important;
 }
-
-.bg-color-red-10 {
+:root .bg-color-red-10 {
   background-color: #ffe8e5 !important;
 }
-
-.txt-color-red-10 {
+:root .txt-color-red-10 {
   color: #ffe8e5 !important;
 }
-
-.bg-color-red-30 {
+:root .bg-color-red-30 {
   background-color: #ffdfdc !important;
 }
-
-.txt-color-red-30 {
+:root .txt-color-red-30 {
   color: #ffdfdc !important;
 }
-
-.bg-color-yellow-5 {
+:root .bg-color-yellow-5 {
   background-color: #fef9f0 !important;
 }
-
-.txt-color-yellow-5 {
+:root .txt-color-yellow-5 {
   color: #fef9f0 !important;
 }
-
-.bg-color-yellow-50 {
+:root .bg-color-yellow-50 {
   background-color: #ffe7bc !important;
 }
-
-.txt-color-yellow-50 {
+:root .txt-color-yellow-50 {
   color: #ffe7bc !important;
 }
-
-.bg-color-gray-light {
+:root .bg-color-gray-light {
   background-color: #f9f9f9 !important;
 }
-
-.txt-color-gray-light {
+:root .txt-color-gray-light {
   color: #f9f9f9 !important;
 }
-
-.bg-color-gray {
+:root .bg-color-gray {
   background-color: #f2f2f2 !important;
 }
-
-.txt-color-gray {
+:root .txt-color-gray {
   color: #f2f2f2 !important;
 }
-
-.bg-color-gray-dark {
+:root .bg-color-gray-dark {
   background-color: #2c2c2c !important;
 }
-
-.txt-color-gray-dark {
+:root .txt-color-gray-dark {
   color: #2c2c2c !important;
 }
-
-.bg-color-transparent {
+:root .bg-color-transparent {
   background-color: transparent !important;
 }
-
-.txt-color-transparent {
+:root .txt-color-transparent {
   color: transparent !important;
 }
-
-.bg-color-white {
+:root .bg-color-white {
   background-color: #fff !important;
 }
-
-.txt-color-white {
+:root .txt-color-white {
   color: #fff !important;
 }
-
-.bg-color-grayscale-10 {
+:root .bg-color-grayscale-10 {
   background-color: #e6e6e6 !important;
 }
-
-.txt-color-grayscale-10 {
+:root .txt-color-grayscale-10 {
   color: #e6e6e6 !important;
 }
-
-.bg-color-grayscale-20 {
+:root .bg-color-grayscale-20 {
   background-color: #ccc !important;
 }
-
-.txt-color-grayscale-20 {
+:root .txt-color-grayscale-20 {
   color: #ccc !important;
 }
-
-.bg-color-grayscale-30 {
+:root .bg-color-grayscale-30 {
   background-color: #b3b3b3 !important;
 }
-
-.txt-color-grayscale-30 {
+:root .txt-color-grayscale-30 {
   color: #b3b3b3 !important;
 }
-
-.bg-color-grayscale-40 {
+:root .bg-color-grayscale-40 {
   background-color: #9a9a9a !important;
 }
-
-.txt-color-grayscale-40 {
+:root .txt-color-grayscale-40 {
   color: #9a9a9a !important;
 }
-
-.bg-color-grayscale-50 {
+:root .bg-color-grayscale-50 {
   background-color: #808080 !important;
 }
-
-.txt-color-grayscale-50 {
+:root .txt-color-grayscale-50 {
   color: #808080 !important;
 }
-
-.bg-color-grayscale-60 {
+:root .bg-color-grayscale-60 {
   background-color: #666 !important;
 }
-
-.txt-color-grayscale-60 {
+:root .txt-color-grayscale-60 {
   color: #666 !important;
 }
-
-.bg-color-grayscale-70 {
+:root .bg-color-grayscale-70 {
   background-color: #4d4d4d !important;
 }
-
-.txt-color-grayscale-70 {
+:root .txt-color-grayscale-70 {
   color: #4d4d4d !important;
 }
-
-.bg-color-grayscale-80 {
+:root .bg-color-grayscale-80 {
   background-color: #333 !important;
 }
-
-.txt-color-grayscale-80 {
+:root .txt-color-grayscale-80 {
   color: #333 !important;
 }
-
-.bg-color-grayscale-90 {
+:root .bg-color-grayscale-90 {
   background-color: #1a1a1a !important;
 }
-
-.txt-color-grayscale-90 {
+:root .txt-color-grayscale-90 {
   color: #1a1a1a !important;
 }
-
-.bg-color-black {
+:root .bg-color-black {
   background-color: #000 !important;
 }
-
-.txt-color-black {
+:root .txt-color-black {
   color: #000 !important;
 }
+:root [data-mode=dark] {
+  --pkt-color-background-card: var(--pkt-color-grays-gray-700);
+  --pkt-color-background-default: var(--pkt-color-grays-gray-1000);
+  --pkt-color-background-subtle: var(--pkt-color-grays-gray-1000);
+  --pkt-color-background-transparent: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-border-default: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
+  --pkt-color-border-green: var(--pkt-color-brand-green-1000);
+  --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-border-red: var(--pkt-color-brand-red-1000);
+  --pkt-color-border-subtle: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-border-states-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-border-states-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+  --pkt-color-border-states-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
+  --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
+  --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
+  --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
+  --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
+  --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
+  --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
+  --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
+  --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
+  --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
+  --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
+  --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
+  --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
+  --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-text-body-default: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-text-placeholder: var(--pkt-color-grays-gray-300);
+  --pkt-color-text-action-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
+}
 
 /* 
  * Defaults for elementer
@@ -5997,6 +6785,354 @@ body {
     padding-bottom: 4.5rem !important;
   }
 }
+.m-size-80 {
+  margin: 5rem !important;
+}
+
+.mt-size-80 {
+  margin-top: 5rem !important;
+}
+
+.mr-size-80 {
+  margin-right: 5rem !important;
+}
+
+.mb-size-80 {
+  margin-bottom: 5rem !important;
+}
+
+.ml-size-80 {
+  margin-left: 5rem !important;
+}
+
+.mx-size-80 {
+  margin-right: 5rem !important;
+  margin-left: 5rem !important;
+}
+
+.my-size-80 {
+  margin-top: 5rem !important;
+  margin-bottom: 5rem !important;
+}
+
+.p-size-80 {
+  padding: 5rem !important;
+}
+
+.pt-size-80 {
+  padding-top: 5rem !important;
+}
+
+.pr-size-80 {
+  padding-right: 5rem !important;
+}
+
+.pb-size-80 {
+  padding-bottom: 5rem !important;
+}
+
+.pl-size-80 {
+  padding-left: 5rem !important;
+}
+
+.px-size-80 {
+  padding-right: 5rem !important;
+  padding-left: 5rem !important;
+}
+
+.py-size-80 {
+  padding-top: 5rem !important;
+  padding-bottom: 5rem !important;
+}
+
+@media screen and (min-width: 0) {
+  .m-size-80--mobile-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--mobile-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--mobile-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--mobile-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--mobile-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--mobile-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--mobile-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--mobile-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--mobile-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--mobile-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--mobile-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--mobile-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--mobile-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--mobile-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 36rem) {
+  .m-size-80--phablet-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--phablet-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--phablet-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--phablet-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--phablet-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--phablet-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--phablet-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--phablet-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--phablet-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--phablet-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--phablet-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--phablet-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--phablet-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--phablet-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .m-size-80--tablet-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--tablet-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--tablet-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--tablet-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--tablet-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--tablet-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--tablet-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--tablet-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--tablet-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--tablet-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--tablet-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--tablet-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--tablet-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--tablet-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .m-size-80--tablet-big-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--tablet-big-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--tablet-big-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--tablet-big-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--tablet-big-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--tablet-big-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--tablet-big-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--tablet-big-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--tablet-big-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--tablet-big-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--tablet-big-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--tablet-big-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--tablet-big-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--tablet-big-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .m-size-80--laptop-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--laptop-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--laptop-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--laptop-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--laptop-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--laptop-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--laptop-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--laptop-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--laptop-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--laptop-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--laptop-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--laptop-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--laptop-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--laptop-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 100rem) {
+  .m-size-80--desktop-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--desktop-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--desktop-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--desktop-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--desktop-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--desktop-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--desktop-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--desktop-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--desktop-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--desktop-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--desktop-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--desktop-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--desktop-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--desktop-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
 .m-size-88 {
   margin: 5.5rem !important;
 }
@@ -10429,6 +11565,15 @@ body {
 .pkt-grid--rowgap-size-72 {
   row-gap: 4.5rem;
 }
+.pkt-grid--gap-size-80 {
+  gap: 5rem;
+}
+.pkt-grid--colgap-size-80 {
+  column-gap: 5rem;
+}
+.pkt-grid--rowgap-size-80 {
+  row-gap: 5rem;
+}
 .pkt-grid--gap-size-88 {
   gap: 5.5rem;
 }
@@ -10673,6 +11818,15 @@ body {
   .pkt-grid--rowgap-size-72-mobile-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-mobile-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-mobile-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-mobile-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-mobile-up {
     gap: 5.5rem;
   }
@@ -10918,6 +12072,15 @@ body {
   .pkt-grid--rowgap-size-72-phablet-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-phablet-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-phablet-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-phablet-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-phablet-up {
     gap: 5.5rem;
   }
@@ -11163,6 +12326,15 @@ body {
   .pkt-grid--rowgap-size-72-tablet-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-tablet-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-tablet-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-tablet-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-tablet-up {
     gap: 5.5rem;
   }
@@ -11408,6 +12580,15 @@ body {
   .pkt-grid--rowgap-size-72-tablet-big-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-tablet-big-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-tablet-big-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-tablet-big-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-tablet-big-up {
     gap: 5.5rem;
   }
@@ -11653,6 +12834,15 @@ body {
   .pkt-grid--rowgap-size-72-laptop-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-laptop-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-laptop-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-laptop-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-laptop-up {
     gap: 5.5rem;
   }
@@ -11898,6 +13088,15 @@ body {
   .pkt-grid--rowgap-size-72-desktop-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-desktop-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-desktop-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-desktop-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-desktop-up {
     gap: 5.5rem;
   }
@@ -12258,7 +13457,7 @@ body {
  * 
  */
 body {
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-text-body-default);
   font-family: 'Oslo Sans', arial, sans-serif;
   font-size: 1rem;
   font-weight: 300;
@@ -12281,62 +13480,38 @@ strong {
 
 a,
 .pkt-link-button {
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-text-action-normal);
   text-decoration: underline;
   word-wrap: break-word;
   cursor: pointer;
 }
-a:visited,
-.pkt-link-button:visited {
-  color: var(--color-blue-dark);
+a:visited:not(.pkt-linkcard),
+.pkt-link-button:visited:not(.pkt-linkcard) {
+  color: inherit;
 }
 a:hover, a.pkt-link--hover,
 .pkt-link-button:hover,
 .pkt-link-button.pkt-link--hover {
-  color: var(--color-hover);
+  color: var(--pkt-color-text-action-active);
   text-decoration: underline;
 }
 a:focus-visible, a.pkt-link--focus,
 .pkt-link-button:focus-visible,
 .pkt-link-button.pkt-link--focus {
-  box-shadow: 0px 0px 0px 0.125rem var(--color-active), 0px 0px 0px 0.375rem var(--color-focus);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
   outline: none;
-  color: var(--color-hover);
+  color: var(--pkt-color-text-action-active);
 }
 a:focus:not(:focus-visible),
 .pkt-link-button:focus:not(:focus-visible) {
   box-shadow: none;
-  outline: 0.125rem solid var(--color-active);
-  color: var(--color-hover);
+  outline: 0.125rem solid var(--pkt-color-text-action-active);
+  color: var(--pkt-color-text-action-active);
 }
 a:active, a.pkt-link--active,
 .pkt-link-button:active,
 .pkt-link-button.pkt-link--active {
-  color: var(--color-active);
-}
-[data-mode=dark] a:link, [data-mode=dark] a.pkt-link--link {
-  color: var(--color-white);
-  text-decoration: underline;
-  word-wrap: break-word;
-}
-[data-mode=dark] a:visited {
-  color: var(--color-white);
-}
-[data-mode=dark] a:hover, [data-mode=dark] a.pkt-link--hover {
-  color: var(--color-hover-light);
-}
-[data-mode=dark] a:focus-visible, [data-mode=dark] a.pkt-link--focus {
-  box-shadow: 0px 0px 0px 0.125rem var(--color-active-light), 0px 0px 0px 0.375rem var(--color-focus);
-  outline: none;
-  color: var(--color-hover-light);
-}
-[data-mode=dark] a:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0.125rem solid var(--color-focus);
-  color: var(--color-hover-light);
-}
-[data-mode=dark] a:active, [data-mode=dark] a.pkt-link--active {
-  color: var(--color-active-light);
+  color: var(--pkt-color-text-action-active);
 }
 
 .pkt-link {
@@ -12361,7 +13536,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -12929,97 +14104,269 @@ button.pkt-link {
  * Background: light, dark
  */
 .pkt-btn {
-  --btn-link-bg: var(--color-blue-dark);
-  --btn-link-bc: var(--color-blue-dark);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-active);
-  --btn-focus-bc: var(--color-active);
-  --btn-focus-txt: var(--color-white);
-  --btn-focus-outline: var(--color-focus);
-  --btn-hover-bg: var(--color-active);
-  --btn-hover-bc: var(--color-active);
-  --btn-hover-txt: var(--color-white);
-  --btn-active-bg: var(--color-active);
-  --btn-active-bc: var(--color-active);
-  --btn-active-txt: var(--color-white);
-  --btn-disabled-bg: var(--color-gray);
-  --btn-disabled-bc: var(--color-gray);
-  --btn-disabled-txt: var(--color-disabled);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
 }
 
 [data-mode=dark] .pkt-btn {
-  --btn-link-bg: var(--color-blue-light);
-  --btn-link-bc: var(--color-blue-light);
-  --btn-link-txt: var(--color-blue-dark);
-  --btn-focus-bg: var(--color-blue);
-  --btn-focus-bc: var(--color-blue);
-  --btn-focus-txt: var(--color-blue-dark);
-  --btn-focus-outline: var(--color-focus);
-  --btn-hover-bg: var(--color-blue);
-  --btn-hover-bc: var(--color-blue);
-  --btn-hover-txt: var(--color-blue-dark);
-  --btn-active-bg: var(--color-blue);
-  --btn-active-bc: var(--color-blue);
-  --btn-active-txt: var(--color-blue-dark);
-  --btn-disabled-bg: var(--color-gray);
-  --btn-disabled-bc: var(--color-gray);
-  --btn-disabled-txt: var(--color-disabled);
-}
-[data-mode=dark] .pkt-btn--green-dark-outline, [data-mode=dark] .pkt-btn--green-outline, [data-mode=dark] .pkt-btn--blue-outline, [data-mode=dark] .pkt-btn--beige-dark-outline, [data-mode=dark] .pkt-btn--yellow-outline, [data-mode=dark] .pkt-btn--red-outline {
-  color: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+}
+[data-mode=dark] .pkt-btn--green-dark {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--green-dark-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--green {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--green-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--blue {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--blue-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--beige-light {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--beige-dark-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--yellow {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--yellow-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--red {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--red-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 
 .pkt-btn--secondary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-txt: var(--color-blue-dark);
-  --btn-focus-bg: var(--color-transparent);
-  --btn-focus-txt: var(--color-active);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
 }
 
 [data-mode=dark] .pkt-btn--secondary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-white);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-transparent);
-  --btn-focus-bc: var(--color-active-light);
-  --btn-focus-txt: var(--color-active-light);
-  --btn-hover-bg: var(--color-active-light);
-  --btn-hover-bc: var(--color-active-light);
-  --btn-active-bg: var(--color-active-light);
-  --btn-active-bc: var(--color-active-light);
-}
-[data-mode=dark] .pkt-btn--secondary--green-dark-outline, [data-mode=dark] .pkt-btn--secondary--green-outline, [data-mode=dark] .pkt-btn--secondary--blue-outline, [data-mode=dark] .pkt-btn--secondary--beige-dark-outline, [data-mode=dark] .pkt-btn--secondary--yellow-outline, [data-mode=dark] .pkt-btn--secondary--red-outline {
-  color: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
+  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
+}
+[data-mode=dark] .pkt-btn--secondary--green-dark {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--green-dark-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--green {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--green-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--blue {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--blue-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--beige-light {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--yellow {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--yellow-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--red {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--red-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 
 .pkt-btn--tertiary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-transparent);
-  --btn-link-txt: var(--color-blue-dark);
-  --btn-focus-bg: var(--color-gray);
-  --btn-focus-txt: var(--color-active);
-  --btn-hover-bg: var(--color-gray);
-  --btn-hover-bc: var(--color-gray);
-  --btn-hover-txt: var(--color-active);
-  --btn-disabled-bg: var(--color-transparent);
-  --btn-disabled-bc: var(--color-transparent);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
 }
 
 [data-mode=dark] .pkt-btn--tertiary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-transparent);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-blue-5);
-  --btn-focus-bc: var(--color-active);
-  --btn-hover-bg: var(--color-blue-5);
-  --btn-hover-bc: var(--color-blue-5);
-  --btn-active-bg: var(--color-blue-dark-10);
-  --btn-active-bc: var(--color-transparent);
-  --btn-disabled-bg: var(--color-transparent);
-  --btn-disabled-bc: var(--color-transparent);
-}
-[data-mode=dark] .pkt-btn--tertiary--green-dark-outline, [data-mode=dark] .pkt-btn--tertiary--green-outline, [data-mode=dark] .pkt-btn--tertiary--blue-outline, [data-mode=dark] .pkt-btn--tertiary--beige-dark-outline, [data-mode=dark] .pkt-btn--tertiary--yellow-outline, [data-mode=dark] .pkt-btn--tertiary--red-outline {
-  color: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--green-dark {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--green {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--green-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--blue {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--blue-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--beige-light {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--yellow {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--yellow-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--red {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--red-outline {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 
 .pkt-btn {
@@ -13034,9 +14381,9 @@ button.pkt-link {
   -ms-user-select: none;
   user-select: none;
   vertical-align: top;
-  background-color: var(--btn-link-bg);
-  border: 2px solid var(--btn-link-bc);
-  color: var(--btn-link-txt);
+  background-color: var(--pkt-color-button-background-normal);
+  border: 2px solid var(--pkt-color-button-border-normal);
+  color: var(--pkt-color-button-text-normal);
   text-decoration: none;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
@@ -13060,36 +14407,36 @@ button.pkt-link {
   flex-shrink: 0;
 }
 .pkt-btn:link, .pkt-btn:visited {
-  color: var(--btn-link-txt);
+  color: var(--pkt-color-button-text-normal);
 }
 a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
-  background-color: var(--btn-focus-bg);
-  color: var(--btn-focus-txt);
-  border-color: var(--btn-focus-bc);
-  outline: 4px solid var(--btn-focus-outline);
+  background-color: var(--pkt-color-button-background-focus);
+  color: var(--pkt-color-button-text-focus);
+  border-color: var(--pkt-color-button-border-focus);
+  outline: 4px solid var(--pkt-color-border-states-focus);
   text-decoration: none;
 }
 
 a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
-  background-color: var(--btn-hover-bg);
-  border-color: var(--btn-hover-bc);
-  color: var(--btn-hover-txt);
+  background-color: var(--pkt-color-button-background-hover);
+  border-color: var(--pkt-color-button-border-hover);
+  color: var(--pkt-color-button-text-hover);
   outline: 0;
   text-decoration: underline;
 }
 
 a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pkt-btn--active:hover {
-  background-color: var(--btn-active-bg);
-  border-color: var(--btn-active-bc);
-  color: var(--btn-active-txt);
+  background-color: var(--pkt-color-button-background-active);
+  border-color: var(--pkt-color-button-border-active);
+  color: var(--pkt-color-button-text-active);
   outline: 0;
   text-decoration: none;
 }
 
 .pkt-btn:disabled {
-  background-color: var(--btn-disabled-bg);
-  border-color: var(--btn-disabled-bc);
-  color: var(--btn-disabled-txt);
+  background-color: var(--pkt-color-button-background-disabled);
+  border-color: var(--pkt-color-button-border-disabled);
+  color: var(--pkt-color-button-text-disabled);
   cursor: inherit;
 }
 .pkt-btn--small {
@@ -13147,64 +14494,64 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: 0;
 }
 .pkt-btn--green-dark {
-  --btn-link-bg: var(--color-green-dark);
-  --btn-link-bc: var(--color-green-dark);
-  --btn-link-txt: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 .pkt-btn--green-dark-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-green-dark);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--green {
-  --btn-link-bg: var(--color-green);
-  --btn-link-bc: var(--color-green);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--green-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-green);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--blue {
-  --btn-link-bg: var(--color-blue);
-  --btn-link-bc: var(--color-blue);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--blue-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-blue);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--beige-light {
-  --btn-link-bg: var(--color-beige-light);
-  --btn-link-bc: var(--color-beige-light);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--beige-dark-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-beige-dark);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--yellow {
-  --btn-link-bg: var(--color-yellow);
-  --btn-link-bc: var(--color-yellow);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--yellow-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-yellow);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--red {
-  --btn-link-bg: var(--color-red);
-  --btn-link-bc: var(--color-red);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--red-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-red);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 
 /* 
@@ -13233,7 +14580,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   margin-bottom: 1.5rem;
 }
 .pkt-form-group:focus-within {
-  color: var(--color-active);
+  color: var(--pkt-color-brand-warm-blue-1000);
 }
 .pkt-form-label {
   width: 100%;
@@ -13249,8 +14596,8 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
 }
 .pkt-form-validation {
   animation: enter 0.2s ease-in forwards;
-  background-color: var(--color-red);
-  border: 2px solid var(--color-red);
+  background-color: var(--pkt-color-brand-red-1000);
+  border: 2px solid var(--pkt-color-brand-red-1000);
   font-size: 0.875rem;
   line-height: 2rem;
   margin: 1rem 0 0;
@@ -13258,20 +14605,20 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   transform-origin: 0 0;
 }
 .pkt-form-validation--warning {
-  background-color: var(--color-yellow);
-  border-color: var(--color-yellow);
+  background-color: var(--pkt-color-brand-yellow-1000);
+  border-color: var(--pkt-color-brand-yellow-1000);
 }
 .pkt-form-validation--error {
-  background-color: var(--color-red);
-  border-color: var(--color-red);
+  background-color: var(--pkt-color-brand-red-1000);
+  border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-form-input, .pkt-form-textarea {
   appearance: none;
   background-clip: padding-box;
-  background-color: var(--color-white);
-  border: 2px solid var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  border: 2px solid var(--pkt-color-brand-dark-blue-1000);
   border-radius: 0;
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-brand-dark-blue-1000);
   display: block;
   font-size: 1rem;
   font-weight: 400;
@@ -13285,29 +14632,30 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
    */
 }
 .pkt-form-input:focus, .pkt-form-textarea:focus {
-  background-color: var(--color-white);
-  border-color: var(--color-active);
-  box-shadow: 0 0 var(--color-active);
-  color: var(--color-active);
-  outline: 2px solid var(--color-active);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  border-color: var(--pkt-color-brand-warm-blue-1000);
+  box-shadow: 0 0 var(--pkt-color-brand-warm-blue-1000);
+  color: var(--pkt-color-brand-warm-blue-1000);
+  outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
 }
 .pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
-  color: var(--color-grayscale-30);
-  opacity: 1; /* 1 */
+  color: var(--pkt-color-grays-gray-300);
+  opacity: 1;
+  /* 1 */
 }
 .pkt-form-input + .pkt-form-validation, .pkt-form-textarea + .pkt-form-validation {
   display: none;
 }
 .pkt-form-input:not(:placeholder-shown):invalid, .pkt-form-textarea:not(:placeholder-shown):invalid {
-  border-color: var(--color-red);
+  border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-form-input:not(:placeholder-shown):invalid + .pkt-form-validation, .pkt-form-textarea:not(:placeholder-shown):invalid + .pkt-form-validation {
   display: inherit;
 }
 .pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
-  background-color: var(--color-gray);
-  border-color: var(--color-grayscale-30);
-  color: var(--color-grayscale-30);
+  background-color: var(--pkt-color-brand-neutrals-200);
+  border-color: var(--pkt-color-grays-gray-300);
+  color: var(--pkt-color-grays-gray-300);
   cursor: inherit;
 }
 /* 
@@ -13315,51 +14663,35 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
  * 
  * 
  */
+.pkt-input-check {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+}
+[data-mode=dark] .pkt-input-check {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+}
+
 .pkt-input-check {
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
-  --choice-norm-bg: var(--color-white);
-  --choice-norm-bc: var(--color-blue-dark);
-  --choice-norm-txt: var(--color-blue-dark);
-  --choice-hover-txt: var(--color-active);
-  --choice-hover-checked-bg: var(--color-active);
-  --choice-focus-visible-txt: var(--color-active);
-  --choice-focus-visible-checked-bg: var(--color-active);
-  --choice-disabled-bg: var(--color-disabled-light);
-  --choice-disabled-bc: var(--color-grayscale-40);
-  --choice-disabled-txt: var(--color-disabled);
-  --choice-disabled-checked-bg: var(--color-grayscale-30);
-  --choice-disabled-checked-bc: var(--color-grayscale-30);
-  --choice-tile-norm-bc: var(--color-gray);
-  --choice-tile-checked-bc: var(--color-blue-dark);
-  --choice-tile-focus-bg: var(--color-white);
-  --choice-tile-focus-bc: var(--color-active);
-  --choice-tile-focus-ol: var(--color-focus);
-  --choice-tile-hover-bc: var(--color-active);
-  --choice-tile-active-bc: var(--color-blue-dark);
-  --choice-tile-disabled-bc: var(--color-grayscale-40);
-  --choice-error-bc: var(--color-red);
-  --choice-error-bg: var(--color-red-30);
-  --checkbox-hover-bg: var(--color-white);
-  --checkbox-hover-bc: var(--color-active);
-  --checkbox-focus-visible-bg: var(--color-white);
-  --checkbox-focus-visible-bc: var(--color-active);
-  --checkbox-focus-visible-ol: var(--color-focus);
-  --checkbox-active-bg: var(--color-active);
-  --checkbox-active-bc: var(--color-blue-dark);
-  --checkbox-active-ol: var(--color-blue-dark);
-  --checkbox-checked-cb-bg: var(--color-blue-dark);
-  --checkbox-checked-bc: var(--color-blue-dark);
-  --radio-hover-outline: var(--color-active);
-  --radio-checked-bg: var(--color-blue-dark);
-  --radio-checked-bc: var(--color-white);
-  --radio-checked-bs: var(--color-blue-dark);
-  --radio-focus-visible-bc: var(--color-active);
-  --radio-focus-visible-ol: var(--color-focus);
-  --radio-focus-visible-checked-bc: var(--color-white);
-  --radio-focus-visible-checked-bg: var(--color-active);
-  --radio-error-checked-bg: var(--color-blue-dark);
 }
 .pkt-input-check__input {
   display: flex;
@@ -13370,6 +14702,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.5rem;
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-input-check__input-helptext {
   font-size: 0.875rem;
@@ -13377,16 +14710,16 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   letter-spacing: -0.2px;
   line-height: 1.375rem;
   padding-top: 0.5rem;
-  color: var(--choice-norm-txt);
+  color: var(--pkt-color-text-body-default);
   max-width: 21.875rem;
 }
 .pkt-input-check__input:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
-  color: var(--choice-hover-txt);
+  color: var(--pkt-color-input-text-hover);
 }
 .pkt-input-check__input-checkbox {
   appearance: none;
-  background-color: var(--choice-norm-bg);
-  border: 2px solid var(--choice-norm-bc);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
@@ -13400,33 +14733,31 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: none;
   width: 1.25rem;
   height: 1.25rem;
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-norm-bc);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:focus-visible:not(:disabled) + .pkt-input-check__input-label {
-  color: var(--choice-focus-visible-txt);
+  color: var(--pkt-color-input-text-hover);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:hover {
-  background-color: var(--checkbox-hover-bg);
-  border-color: var(--checkbox-hover-bc);
+  border-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled) {
-  background-color: var(--checkbox-active-bg);
-  border-color: var(--checkbox-active-bc);
-  outline: 6px solid var(--checkbox-active-ol);
+  border-color: var(--pkt-color-input-border-active);
+  outline: 6px solid var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:focus-visible {
-  background-color: var(--checkbox-focus-visible-bg);
-  border-color: var(--checkbox-focus-visible-bc);
-  outline: 4px solid var(--checkbox-focus-visible-ol);
+  border-color: var(--pkt-color-input-border-active);
+  outline: 4px solid var(--pkt-color-border-states-focus);
   outline-offset: 0;
 }
 .pkt-input-check__input-checkbox[type=radio]:hover {
-  outline-color: var(--radio-hover-outline);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
+  outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/check-medium.svg);
   position: relative;
-  background-color: var(--checkbox-checked-cb-bg);
+  background-color: var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]::before {
   content: "";
@@ -13435,13 +14766,8 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: blue;
   z-index: -1;
 }
-.pkt-input-check__input-checkbox:checked[type=checkbox]:checked::before {
-  background-color: blue;
-  border: 6px solid var(--checkbox-checked-cb-bc);
-}
 .pkt-input-check__input-checkbox:checked[type=checkbox]::after {
   content: "";
   position: absolute;
@@ -13455,71 +14781,70 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
 }
 .pkt-input-check__input-checkbox:checked[type=radio] {
-  background-color: var(--radio-checked-bg);
-  border: 3px solid var(--radio-checked-bc);
-  box-shadow: 0px 0px 0px 0.125rem var(--radio-checked-bs);
+  background-color: var(--pkt-color-input-border-normal);
+  border: 3px solid var(--pkt-color-input-background-normal);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible {
-  background-color: var(--choice-focus-visible-checked-bg);
+  background-color: var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]:hover {
-  background-color: var(--choice-hover-checked-bg);
+  background-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=radio]:focus-visible {
-  background-color: var(--radio-focus-visible-checked-bg);
-  border: 3px solid var(--radio-focus-visible-checked-bc);
+  background-color: var(--pkt-color-input-border-active);
+  border: 3px solid var(--pkt-color-input-background-normal);
   outline: none;
-  box-shadow: 0px 0px 0px 0.125rem var(--radio-focus-visible-bc), 0px 0px 0px 0.375rem var(--radio-focus-visible-ol);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
 }
 .pkt-input-check__input-checkbox:checked[type=radio]:hover {
-  box-shadow: 0px 0px 0px 0.125rem var(--radio-focus-visible-bc);
-  background-color: var(--choice-hover-checked-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
+  background-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox] {
-  background-color: var(--choice-disabled-bg);
-  border-color: var(--choice-disabled-bc);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-disabled);
   cursor: not-allowed;
-  outline-color: var(--choice-disabled-bc);
 }
 .pkt-input-check__input-checkbox:disabled[type=radio] {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-disabled-bc);
-  background-color: var(--choice-disabled-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
   cursor: not-allowed;
-  outline-color: var(--choice-disabled-bc);
+  outline-color: var(--pkt-color-input-border-disabled);
 }
 .pkt-input-check__input-checkbox:disabled:checked[type=checkbox] {
-  background-color: var(--choice-disabled-checked-bg);
-  border-color: var(--choice-disabled-checked-bc);
+  background-color: var(--pkt-color-input-border-disabled);
+  border-color: var(--pkt-color-input-border-disabled);
 }
 .pkt-input-check__input-checkbox:disabled:checked[type=radio] {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-disabled-checked-bc);
-  background-color: var(--choice-disabled-checked-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
+  background-color: var(--pkt-color-input-border-disabled);
 }
 .pkt-input-check__input-checkbox:disabled + .pkt-inputwrapper {
-  color: var(--choice-disabled-txt);
+  color: var(--pkt-color-input-text-disabled);
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox--error[type=checkbox]:checked::after {
   filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
 }
-.pkt-input-check__input-checkbox--error[type=checkbox], .pkt-input-check__input-checkbox--error[type=checkbox]:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled), .pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked::before {
-  background-color: var(--choice-error-bg);
-  border-color: var(--choice-error-bc);
-  outline-color: var(--choice-error-bc);
+.pkt-input-check__input-checkbox--error[type=checkbox], .pkt-input-check__input-checkbox--error[type=checkbox]:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled), .pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked::before {
+  background-color: var(--pkt-color-surface-default-faded-red);
+  border-color: var(--pkt-color-input-border-error);
+  outline-color: var(--pkt-color-input-border-error);
 }
 .pkt-input-check__input-checkbox--error[type=radio], .pkt-input-check__input-checkbox--error[type=radio]:hover, .pkt-input-check__input-checkbox--error[type=radio]:focus-visible, .pkt-input-check__input-checkbox--error[type=radio]:hover, .pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled) {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-error-bc);
-  background-color: var(--choice-error-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-surface-default-faded-red);
 }
 .pkt-input-check__input-checkbox--error[type=radio]:checked, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible, .pkt-input-check__input-checkbox--error[type=radio]:checked:hover, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible + .pkt-input-check__input--tile {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-error-bc);
-  background-color: var(--radio-error-checked-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input-checkbox--error[type=radio]:checked:hover, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible {
-  background-color: var(--choice-hover-checked-bg);
+  background-color: var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input--tile {
-  border: 2px solid var(--choice-tile-norm-bc);
+  border: 2px solid var(--pkt-color-border-subtle);
   padding: 1rem;
   width: 21.875rem;
   position: relative;
@@ -13541,71 +14866,33 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   right: -2px;
   bottom: -2px;
   top: -2px;
-  border: 2px solid var(--choice-tile-checked-bc);
+  border: 2px solid var(--pkt-color-border-default);
   pointer-events: none;
 }
 .pkt-input-check__input--tile:focus-within {
-  background-color: var(--choice-tile-focus-bg);
-  border-color: var(--choice-tile-focus-bc);
-  outline: 4px solid var(--choice-tile-focus-ol);
+  background-color: var(--pkt-color-input-background-normal);
+  border-color: var(--pkt-color-border-states-active);
+  outline: 4px solid var(--pkt-color-border-states-focus);
+}
+.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled) {
+  border-color: var(--pkt-color-border-states-hover);
 }
 .pkt-input-check__input--tile:hover > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
-  border-color: var(--choice-tile-hover-bc);
+  border-color: var(--pkt-color-border-states-hover);
 }
 .pkt-input-check__input--tile:active:not(:disabled) > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
-  border-color: var(--choice-tile-active-bc);
+  border-color: var(--pkt-color-border-states-active);
 }
 .pkt-input-check__input--tile:disabled {
-  border-color: var(--choice-tile-disabled-bc);
+  border-color: var(--pkt-color-border-states-disabled);
 }
 .pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-tile-focus-bc);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-border-states-active);
 }
 .pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible {
   outline: none;
 }
 
-[data-mode=dark] .pkt-input-check {
-  --choice-norm-bg: var(--color-blue-dark);
-  --choice-norm-bc: var(--color-white);
-  --choice-norm-txt: var(--color-white);
-  --choice-hover-txt: var(--color-active-light);
-  --choice-hover-checked-bg: var(--color-active-light);
-  --choice-focus-visible-txt: var(--color-active-light);
-  --choice-focus-visible-checked-bg: var(--color-active-light);
-  --choice-disabled-bg: var(--color-white);
-  --choice-disabled-bc: var(--color-grayscale-40);
-  --choice-disabled-txt: var(--color-white);
-  --choice-disabled-checked-bg: var(--color-grayscale-30);
-  --choice-disabled-checked-bc: var(--color-grayscale-30);
-  --choice-tile-norm-bc: var(--color-grayscale-60);
-  --choice-tile-checked-bc: var(--color-white);
-  --choice-tile-focus-bg: var(--color-blue-dark);
-  --choice-tile-focus-bc: var(--color-active-light);
-  --choice-tile-focus-ol: var(--color-focus);
-  --choice-tile-hover-bc: var(--color-blue-light);
-  --choice-tile-active-bc: var(--color-blue-light);
-  --choice-tile-disabled-bc: var(--color-grayscale-40);
-  --checkbox-hover-bg: var(--color-blue-dark);
-  --checkbox-hover-bc: var(--color-active-light);
-  --checkbox-focus-visible-bg: var(--color-blue-dark);
-  --checkbox-focus-visible-bc: var(--color-active-light);
-  --checkbox-focus-visible-ol: var(--color-focus);
-  --checkbox-active-bg: var(--color-hover-active);
-  --checkbox-active-bc: var(--color-blue-light);
-  --checkbox-active-ol: var(--color-active-light);
-  --checkbox-checked-cb-bg: var(--color-white);
-  --checkbox-checked-bc: var(--color-blue-light);
-  --radio-hover-outline: var(--color-active-light);
-  --radio-checked-bg: var(--color-white);
-  --radio-checked-bc: var(--color-blue-dark);
-  --radio-checked-bs: var(--color-white);
-  --radio-focus-visible-bc: var(--color-blue-light);
-  --radio-focus-visible-ol: var(--color-focus);
-  --radio-focus-visible-checked-bc: var(--color-blue-dark);
-  --radio-focus-visible-checked-bg: var(--color-blue-light);
-  --radio-error-checked-bg: var(--color-white);
-}
 [data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]::after {
   filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
 }
@@ -13615,7 +14902,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
  */
 .pkt-hr {
   border: 0;
-  border-top: 1px solid var(--color-grayscale-20);
+  border-top: 1px solid var(--pkt-color-grays-gray-200);
 }
 
 /* 
@@ -13645,6 +14932,42 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 /* Common styles for all inputs */
+.pkt-input, .pkt-textinput__input, .pkt-select select,
+.pkt-select:is(select),
+.pkt-input-prefix,
+.pkt-input-suffix,
+.pkt-input-icon,
+.pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
+}
+
+[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-textinput__input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
+[data-mode=dark] .pkt-select:is(select), [data-mode=dark] .pkt-input-prefix, [data-mode=dark] .pkt-input-suffix, [data-mode=dark] .pkt-input-icon, [data-mode=dark] .pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
+}
+
 .pkt-input, .pkt-textinput__input, .pkt-select select,
 .pkt-select:is(select) {
   font-size: 1.125rem;
@@ -13654,10 +14977,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   display: flex;
   align-items: center;
   appearance: none;
-  background-color: var(--color-white);
-  border: 2px solid var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
   border-radius: 0;
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
 }
@@ -13681,7 +15004,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -13689,44 +15012,44 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select) option, .pkt-textinput__input:is(select) option, .pkt-select select:is(select) option,
 .pkt-select:is(select) option {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  color: var(--pkt-color-input-text-normal);
   font-weight: normal;
 }
 .pkt-input::placeholder, .pkt-textinput__input::placeholder, .pkt-select select::placeholder,
 .pkt-select:is(select)::placeholder {
-  color: var(--color-grayscale-50);
+  color: var(--pkt-color-text-placeholder);
   opacity: 1;
 }
 .pkt-input:hover, .pkt-textinput__input:hover, .pkt-select select:hover,
 .pkt-select:hover:is(select), .pkt-input.pkt-input--hover, .pkt-input--hover.pkt-textinput__input, .pkt-select select.pkt-input--hover,
 .pkt-input--hover.pkt-select:is(select) {
-  border-color: var(--color-hover);
+  border-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-select select:focus-visible,
 .pkt-select:focus-visible:is(select), .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input, .pkt-select select.pkt-input__textinput--focus,
 .pkt-input__textinput--focus.pkt-select:is(select) {
-  border-color: var(--color-active);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input:focus, .pkt-textinput__input:focus, .pkt-select select:focus,
 .pkt-select:focus:is(select) {
   outline: none;
-  --focus-outline: var(--color-active);
-  box-shadow: 0 0 0 2px var(--focus-outline);
-  border-color: var(--color-active);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-select select:disabled,
 .pkt-select:disabled:is(select), .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-select select:disabled::placeholder,
 .pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly], [readonly].pkt-textinput__input, .pkt-select select[readonly],
 [readonly].pkt-select:is(select) {
   opacity: 1;
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-disabled);
   cursor: inherit;
 }
 .pkt-input:disabled:active, .pkt-textinput__input:disabled:active, .pkt-select select:disabled:active,
 .pkt-select:disabled:active:is(select) {
-  border: 2px solid var(--color-disabled);
+  border: 2px solid var(--pkt-color-input-border-disabled);
 }
 .pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon {
   font-size: 1.125rem;
@@ -13737,8 +15060,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   align-items: center;
   width: auto;
   height: 3rem;
-  border: 2px solid var(--color-blue-dark);
+  border: 2px solid var(--pkt-color-input-border-normal);
   flex-shrink: 0;
+  color: var(--pkt-color-brand-dark-blue-1000);
+  background-color: var(--pkt-color-input-background-normal);
 }
 .pkt-input-prefix {
   padding: 0.5rem 0rem 0.5rem 1rem;
@@ -13748,7 +15073,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   width: 1px;
   margin-left: 0.5rem;
   height: 100%;
-  background-color: var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-input-suffix {
   padding: 0.5rem 1rem 0.5rem 0rem;
@@ -13763,7 +15088,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   width: 1px;
   margin-right: 0.5rem;
   height: 1.5rem;
-  background-color: var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-input-icon {
   padding: 0.5rem 1rem;
@@ -13775,12 +15100,11 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin-left: 0.5rem;
 }
 .pkt-input--counter-error, .pkt-input--counter-error:focus {
-  border-color: var(--color-red);
-  background-color: var(--color-red-30);
+  border-color: var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-surface-default-faded-red);
 }
 .pkt-input--counter-error:focus {
-  --focus-outline: var(--color-red);
-  box-shadow: 0 0 0 2px var(--focus-outline);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
 }
 .pkt-input__container {
   display: flex;
@@ -13809,19 +15133,17 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-textinput__input, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
 .pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
-  border-color: var(--color-hover);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__container:focus-within {
-  --focus-outline: var(--color-active);
-  box-shadow: 0 0 0 2px var(--focus-outline);
+  outline: 2px solid var(--pkt-color-input-border-active);
 }
 .pkt-input__container:focus-within .pkt-input, .pkt-input__container:focus-within .pkt-textinput__input, .pkt-input__container:focus-within .pkt-select select, .pkt-select .pkt-input__container:focus-within select,
 .pkt-input__container:focus-within .pkt-select:is(select),
 .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-input__container:focus-within .pkt-input-icon {
-  outline: 0;
-  border-color: var(--color-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__counter {
   font-size: 0.875rem;
@@ -13836,14 +15158,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
-  color: var(--color-red);
-}
-
-[data-mode=dark] .pkt-input-prefix,
-[data-mode=dark] .pkt-input-suffix,
-[data-mode=dark] .pkt-input-icon {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-error);
 }
 
 /* 
@@ -13892,7 +15207,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   padding-right: 0;
 }
 .pkt-list-horizontal.bordered li + li {
-  border-left: 1px solid var(--color-grayscale-60);
+  border-left: 1px solid var(--pkt-color-grays-gray-600);
 }
 
 .pkt-dl,
@@ -13968,7 +15283,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--dark {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #2a2859;
+  background-color: #2A2859;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -13998,7 +15313,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--danger {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #ff8274;
+  background-color: #FF8274;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -14028,7 +15343,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--grey {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #f2f2f2;
+  background-color: #F2F2F2;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -14054,7 +15369,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--success {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #43f8b6;
+  background-color: #43F8B6;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -14084,7 +15399,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--warning {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #f9c66b;
+  background-color: #F9C66B;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -14110,7 +15425,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--info {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #b3f5ff;
+  background-color: #B3F5FF;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -14150,7 +15465,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
     }
   }
   */
-  border: 1px solid;
+  border: 1px solid #2C2C2C;
 }
 @media screen and (min-width: 35.938rem) {
   .pkt-section--frame {
@@ -14190,8 +15505,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   color: black;
   font-weight: 500;
   text-align: left;
-  background: #f2f2f2;
-  border-bottom: 1px solid #f2f2f2;
+  background: #F2F2F2;
+  border-bottom: 1px solid #F2F2F2;
 }
 .pkt-table__th:first-child {
   border-top-left-radius: 2px;
@@ -14203,10 +15518,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-table td {
   padding: 0.5rem;
   text-align: left;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid #F2F2F2;
 }
 .pkt-table td.strong {
-  border-top: 1px solid #f2f2f2;
+  border-top: 1px solid #F2F2F2;
   font-weight: 500;
 }
 .pkt-table tbody tr:hover > td {
@@ -14214,15 +15529,15 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-table--info .pkt-table__th {
   background: rgba(249, 198, 107, 0.25);
-  border-bottom: 1px solid #f9c66b;
+  border-bottom: 1px solid #F9C66B;
 }
 .pkt-table--success .pkt-table__th {
   background: rgba(199, 246, 201, 0.25);
-  border-bottom: 1px solid #c7f6c9;
+  border-bottom: 1px solid #C7F6C9;
 }
 .pkt-table--strong .pkt-table__th {
   background: rgba(42, 40, 89, 0.25);
-  border-bottom: 1px solid #2a2859;
+  border-bottom: 1px solid #2A2859;
 }
 .pkt-table--shadow {
   background: white;
@@ -14241,35 +15556,35 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * Alert component
  */
 .pkt-alert {
-  --pkt-alert-bc: var(--color-blue);
-  --pkt-alert-bg: var(--color-blue-60);
-  --pkt-alert-txt: var(--color-blue-dark);
-  --pkt-alert-icon-fg: var(--color-blue-dark);
-  --pkt-alert-close-fg: var(--color-blue-dark);
+  --pkt-color-alert-bc: var(--pkt-color-border-blue);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);
+  --pkt-color-alert-txt: var(--pkt-color-text-body-dark);
+  --pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000);
 }
 
 .pkt-alert--error {
-  --pkt-alert-bc: var(--color-red);
-  --pkt-alert-bg: var(--color-red-30);
+  --pkt-color-alert-bc: var(--pkt-color-border-red);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red);
 }
 
 .pkt-alert--success {
-  --pkt-alert-bc: var(--color-green);
-  --pkt-alert-bg: var(--color-green-30);
+  --pkt-color-alert-bc: var(--pkt-color-border-green);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-green);
 }
 
 .pkt-alert--warning {
-  --pkt-alert-bc: var(--color-yellow);
-  --pkt-alert-bg: var(--color-yellow-50);
+  --pkt-color-alert-bc: var(--pkt-color-border-yellow);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
 }
 
 .pkt-alert {
   padding: 1.5rem 1.5rem 1.5rem 1.25rem;
   display: block;
   position: relative;
-  border-left: 0.25rem solid var(--pkt-alert-bc);
-  background-color: var(--pkt-alert-bg);
-  color: var(--pkt-alert-txt);
+  border-left: 0.25rem solid var(--pkt-color-alert-bc);
+  background-color: var(--pkt-color-alert-bg);
+  color: var(--pkt-color-alert-txt);
 }
 .pkt-alert__title {
   font-size: 1.125rem;
@@ -14312,7 +15627,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin-top: 1.5rem;
 }
 .pkt-alert__icon {
-  --fg-color: var(--pkt-alert-icon-fg);
+  --fg-color: var(--pkt-color-alert-icon-fg);
   height: 2rem;
   width: 2rem;
   position: absolute;
@@ -14320,11 +15635,13 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   left: 20px;
 }
 .pkt-alert__close {
-  --fg-color: var(--pkt-alert-close-fg);
   position: absolute;
   right: 1.125rem;
   top: 0.625rem;
 }
+.pkt-alert__close svg {
+  --fg-color: var(--pkt-color-alert-close-fg);
+}
 
 .pkt-alert--slim {
   padding: 0.75rem 1rem 0.75rem 0.25rem;
@@ -14347,32 +15664,53 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * Tag element
  */
 .pkt-tag {
+  --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
   font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
-  background: var(--color-blue-light);
+  background: var(--pkt-color-surface-default-light-blue);
   padding: 0.25rem 0.5rem;
   display: inline-flex;
   align-items: center;
   height: 1.875rem;
   column-gap: 0;
+  color: var(--pkt-color-tag-text-normal);
+}
+[data-mode=dark] .pkt-tag {
+  --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
+
 .pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
-  background-color: var(--color-blue);
-  color: var(--color-active);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-hover);
   text-decoration: underline;
   border-color: transparent;
 }
+.pkt-tag.pkt-btn:hover > svg, .pkt-tag.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
+}
 .pkt-tag.pkt-btn:focus, .pkt-tag.pkt-tag--focus {
-  background-color: var(--color-blue);
-  border-color: var(--color-active);
-  outline: 4px solid var(--color-focus);
-  color: var(--color-active);
+  background-color: var(--pkt-color-surface-strong-blue);
+  border-color: var(--pkt-color-text-action-active);
+  outline: 4px solid var(--pkt-color-border-states-focus);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag.pkt-btn:focus > svg, .pkt-tag.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag.pkt-btn:active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
-  background-color: var(--color-blue);
-  color: var(--color-active);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag.pkt-btn:active > svg, .pkt-tag.pkt-tag--active > svg, .pkt-tag.pkt-tag--active:hover > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag__icon {
   width: 16px;
@@ -14385,79 +15723,148 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin-left: 0.5rem;
 }
 .pkt-tag--green {
-  background: var(--color-green-light);
+  background: var(--pkt-color-surface-strong-light-green);
 }
 .pkt-tag--green.pkt-btn:hover, .pkt-tag--green.pkt-tag--hover {
-  background-color: var(--color-green);
+  background-color: var(--pkt-color-surface-strong-green);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--green.pkt-btn:hover > svg, .pkt-tag--green.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--green.pkt-btn:focus, .pkt-tag--green.pkt-tag--focus {
-  background-color: var(--color-green);
+  background-color: var(--pkt-color-surface-strong-green);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--green.pkt-btn:focus > svg, .pkt-tag--green.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--green.pkt-btn:active, .pkt-tag--green.pkt-tag--active {
-  background-color: var(--color-green);
+  background-color: var(--pkt-color-surface-strong-green);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--green.pkt-btn:active > svg, .pkt-tag--green.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--yellow {
-  background: var(--color-yellow-50);
+  background: var(--pkt-color-surface-default-yellow);
 }
 .pkt-tag--yellow.pkt-btn:hover, .pkt-tag--yellow.pkt-tag--hover {
-  background-color: var(--color-yellow);
+  background-color: var(--pkt-color-surface-strong-yellow);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--yellow.pkt-btn:hover > svg, .pkt-tag--yellow.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--yellow.pkt-btn:focus, .pkt-tag--yellow.pkt-tag--focus {
-  background-color: var(--color-yellow);
+  background-color: var(--pkt-color-surface-strong-yellow);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--yellow.pkt-btn:focus > svg, .pkt-tag--yellow.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--yellow.pkt-btn:active, .pkt-tag--yellow.pkt-tag--active {
-  background-color: var(--color-yellow);
+  background-color: var(--pkt-color-surface-strong-yellow);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--yellow.pkt-btn:active > svg, .pkt-tag--yellow.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--red {
-  background: var(--color-red-light);
+  background: var(--pkt-color-surface-default-red);
 }
 .pkt-tag--red.pkt-btn:hover, .pkt-tag--red.pkt-tag--hover {
-  background-color: var(--color-red);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-surface-strong-red);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--red.pkt-btn:hover > svg, .pkt-tag--red.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--red.pkt-btn:focus, .pkt-tag--red.pkt-tag--focus {
-  background-color: var(--color-red);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-surface-strong-red);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--red.pkt-btn:focus > svg, .pkt-tag--red.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--red.pkt-btn:active, .pkt-tag--red.pkt-tag--active {
-  background-color: var(--color-red);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-surface-strong-red);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--red.pkt-btn:active > svg, .pkt-tag--red.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--beige {
-  background: var(--color-beige-light);
+  background: var(--pkt-color-surface-default-light-beige);
 }
 .pkt-tag--beige.pkt-btn:hover, .pkt-tag--beige.pkt-tag--hover {
-  background-color: var(--color-beige-dark);
+  background-color: var(--pkt-color-surface-strong-beige);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--beige.pkt-btn:hover > svg, .pkt-tag--beige.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--beige.pkt-btn:focus, .pkt-tag--beige.pkt-tag--focus {
-  background-color: var(--color-beige-dark);
+  background-color: var(--pkt-color-surface-strong-beige);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--beige.pkt-btn:focus > svg, .pkt-tag--beige.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--beige.pkt-btn:active, .pkt-tag--beige.pkt-tag--active {
-  background-color: var(--color-beige-dark);
+  background-color: var(--pkt-color-surface-strong-beige);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--beige.pkt-btn:active > svg, .pkt-tag--beige.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--grey {
-  background: var(--color-gray-light);
+  background: var(--pkt-color-surface-default-gray);
 }
 .pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
-  background-color: var(--color-grayscale-20);
+  background-color: var(--pkt-color-surface-strong-gray);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
-  background-color: var(--color-grayscale-20);
+  background-color: var(--pkt-color-surface-strong-gray);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
-  background-color: var(--color-grayscale-20);
+  background-color: var(--pkt-color-surface-strong-gray);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--blue-light {
-  background: var(--color-blue-10);
+  background: var(--pkt-color-surface-subtle-light-blue);
 }
 .pkt-tag--blue-light.pkt-btn:hover, .pkt-tag--blue-light.pkt-tag--hover {
-  background-color: var(--color-blue-light);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--blue-light.pkt-btn:hover > svg, .pkt-tag--blue-light.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--blue-light.pkt-btn:focus, .pkt-tag--blue-light.pkt-tag--focus {
-  background-color: var(--color-blue-light);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--blue-light.pkt-btn:focus > svg, .pkt-tag--blue-light.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--blue-light.pkt-btn:active, .pkt-tag--blue-light.pkt-tag--active {
-  background-color: var(--color-blue-light);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--blue-light.pkt-btn:active > svg, .pkt-tag--blue-light.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--small {
   padding: 0.25rem;
@@ -14488,10 +15895,6 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   line-height: 1.375rem;
 }
 
-:root [data-mode=dark] .pkt-tag {
-  color: var(--color-blue-dark);
-}
-
 /* 
  * Back link component
  */
@@ -14508,6 +15911,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 
 /* 
  * Badge element
+ * DEPRECATED - use tag instead 
  */
 .pkt-badge {
   display: inline-flex;
@@ -14518,21 +15922,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   font-weight: 500;
   font-size: 0.75em;
   line-height: 1em;
-  background: #b3f5ff;
   border-radius: 1px;
 }
 
-.pkt-btn > .pkt-badge.pkt-badge--strong,
-.pkt-badge--strong {
-  color: #b3f5ff;
-  background: #2a2859;
-}
-
-.pkt-btn > .pkt-badge.pkt-badge--info,
-.pkt-badge--info {
-  background: #f9c66b;
-}
-
 .pkt-badge.pkt-badge--small,
 .pkt-h1 > .pkt-badge,
 .pkt-h2 > .pkt-badge,
@@ -14544,7 +15936,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
   color: inherit;
   background: transparent;
-  border: 1px solid #2a2859;
+  border: 1px solid;
   border-radius: 4px;
 }
 
@@ -14666,8 +16058,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   letter-spacing: -0.2px;
   line-height: 1.75rem;
   padding: 2.5rem 1.5rem;
-  background-color: var(--color-blue-dark);
-  color: var(--color-white);
+  background-color: var(--pkt-color-surface-strong-dark-blue);
+  color: var(--pkt-color-text-body-default);
   display: flex;
   align-items: center;
 }
@@ -14687,7 +16079,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   line-height: 2.25rem;
   margin-bottom: 2rem;
   margin-top: 0;
-  color: var(--color-white);
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-footer__text:last-child {
   margin-bottom: 0;
@@ -14769,8 +16161,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   letter-spacing: -0.2px;
   line-height: 1.75rem;
   padding: 2rem 1.5rem;
-  background-color: var(--color-blue-dark);
-  color: var(--color-white);
+  background-color: var(--pkt-color-surface-strong-dark-blue);
+  color: var(--pkt-color-text-body-default);
   display: flex;
   align-items: center;
 }
@@ -14826,8 +16218,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * Header component
  */
 .pkt-header {
-  background-color: var(--color-white);
-  border-bottom: 1px solid var(--color-gray);
+  background-color: var(--pkt-color-background-default);
+  border-bottom: 1px solid var(--pkt-color-border-subtle);
+  color: var(--pkt-color-text-body-default);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -14878,6 +16271,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin: 0;
   padding: 0;
 }
+.pkt-header__logo svg {
+  --fg-color: var(--pkt-color-text-body-default);
+}
 .pkt-header__logo-service {
   padding-top: 0.2rem;
   display: none;
@@ -14940,7 +16336,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   }
 }
 .pkt-header__user-btn {
-  border-color: var(--color-yellow);
+  border-color: var(--pkt-color-brand-yellow-1000);
 }
 .pkt-header__actions {
   flex: 1 0 auto;
@@ -14972,6 +16368,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   max-height: calc(100vh - 4.5rem);
   overflow-x: hidden;
   overflow-y: auto;
+  color: var(--pkt-color-text-body-dark);
 }
 @media screen and (min-width: 48rem) {
   .pkt-header__dropdown {
@@ -14984,14 +16381,14 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-header__dropdown > li {
   padding: 2rem;
-  background-color: var(--color-white);
+  background-color: var(--pkt-color-surface-subtle-white);
 }
 .pkt-header__dropdown > li.footer {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 .pkt-header__dropdown > li:nth-child(odd) {
-  background-color: var(--color-gray-light);
+  background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-header__user-fullname {
   display: none;
@@ -15015,7 +16412,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   }
 }
 .pkt-header--has-dropdown > .pkt-btn:hover .pkt-btn--closed {
-  --fg-color: var(--color-white);
+  --fg-color: var(--pkt-color-surface-subtle-white);
 }
 .pkt-header--has-dropdown .pkt-btn--open {
   display: none;
@@ -15029,12 +16426,12 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   }
 }
 .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn {
-  background-color: var(--color-active);
-  border-color: var(--color-active);
-  color: var(--color-white);
+  background-color: var(--pkt-color-border-states-active);
+  border-color: var(--pkt-color-border-states-active);
+  color: var(--pkt-color-surface-subtle-white);
 }
 .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
-  --fg-color: var(--color-white);
+  --fg-color: var(--pkt-color-surface-subtle-white);
 }
 @media screen and (min-width: 80rem) {
   .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
@@ -15052,7 +16449,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin: 0;
 }
 .pkt-user-menu__label {
-  color: var(--color-grayscale-60);
+  color: var(--pkt-color-grays-gray-600);
   font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: -0.2px;
@@ -15074,6 +16471,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin: 0;
 }
 .pkt-user-menu .pkt-list .pkt-link {
+  color: var(--pkt-color-text-body-dark);
   text-decoration: none;
 }
 .pkt-user-menu .pkt-list .pkt-link:hover {
@@ -15086,6 +16484,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-user-menu .pkt-list-horizontal {
   margin: 0;
 }
+.pkt-user-menu .pkt-list-horizontal .pkt-link {
+  color: var(--pkt-color-text-body-dark);
+}
 
 /* 
  * Icons
@@ -15126,6 +16527,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-inputwrapper__label > h2 {
   font-size: inherit;
@@ -15141,6 +16543,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-inputwrapper__helptext > *:first-child {
   margin-top: 0;
@@ -15162,7 +16565,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-inputwrapper__helptext-expandable-open {
   display: block;
-  border-left: 2px solid var(--color-blue-dark);
+  border-left: 2px solid var(--pkt-color-text-body-dark);
   padding: 0.5rem 1rem;
   margin-bottom: 0.25rem;
 }
@@ -15182,15 +16585,15 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin-bottom: 0.5rem;
 }
 .pkt-inputwrapper--disabled {
-  color: var(--color-disabled);
+  color: var(--pkt-color-text-action-disabled);
   cursor: inherit;
 }
 .pkt-inputwrapper--disabled .pkt-tag {
-  background-color: var(--color-disabled-light);
+  background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-inputwrapper--disabled .pkt-alert {
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-text-action-disabled);
 }
 .pkt-inputwrapper--inline {
   display: inline-block;
@@ -15218,44 +16621,47 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-inputwrapper--error .pkt-input,
 .pkt-inputwrapper--error .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input-suffix,
-.pkt-inputwrapper--error .pkt-input-icon,
+.pkt-inputwrapper--error .pkt-input-icon {
+  border-color: var(--pkt-color-brand-red-1000);
+}
 .pkt-inputwrapper--error .pkt-input:hover,
 .pkt-inputwrapper--error .pkt-input__container:hover,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,
-.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon,
-.pkt-inputwrapper--error .pkt-input__container:focus-within,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon {
+  border-color: var(--pkt-color-brand-red-1000);
+}
+.pkt-inputwrapper--error .pkt-input:focus-within,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon {
-  border-color: var(--color-red);
-  --focus-outline: var(--color-red);
+  border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-inputwrapper--disabled {
-  color: var(--color-disabled);
+  color: var(--pkt-color-text-action-disabled);
   cursor: inherit;
 }
 .pkt-inputwrapper--disabled .pkt-input,
 .pkt-inputwrapper--disabled .pkt-input-prefix,
 .pkt-inputwrapper--disabled .pkt-input-suffix,
 .pkt-inputwrapper--disabled .pkt-input-icon {
-  border-color: var(--color-disabled);
-  background-color: var(--color-disabled-light);
+  border-color: var(--pkt-color-border-states-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input,
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-prefix,
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-suffix,
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-icon {
-  border-color: var(--color-disabled);
+  border-color: var(--pkt-color-border-states-disabled);
 }
 .pkt-inputwrapper--disabled .pkt-input:hover {
-  border-color: var(--color-disabled);
+  border-color: var(--pkt-color-border-states-disabled);
   box-shadow: none;
 }
 .pkt-inputwrapper--disabled .pkt-input:focus {
-  border-color: var(--color-disabled);
+  border-color: var(--pkt-color-border-states-disabled);
   box-shadow: none;
   outline: none;
 }
@@ -15327,33 +16733,33 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * Messagebox component
  */
 .pkt-messagebox {
-  --pkt-messagebox-bc: var(--color-beige-dark);
-  --pkt-messagebox-bg: var(--color-beige-light);
-  --pkt-messagebox-txt: var(--color-blue-dark);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-beige);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
+  --pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
 }
 
 .pkt-messagebox--red {
-  --pkt-messagebox-bc: var(--color-red);
-  --pkt-messagebox-bg: var(--color-red-30);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-red);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red);
 }
 
 .pkt-messagebox--green {
-  --pkt-messagebox-bc: var(--color-green);
-  --pkt-messagebox-bg: var(--color-green-30);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-green);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green);
 }
 
 .pkt-messagebox--blue {
-  --pkt-messagebox-bc: var(--color-blue);
-  --pkt-messagebox-bg: var(--color-blue-60);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-blue);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
 }
 
 .pkt-messagebox {
   padding: 1.5rem 1.5rem 1.5rem 1.25rem;
   display: block;
   position: relative;
-  border-left: 0.25rem solid var(--pkt-messagebox-bc);
-  background-color: var(--pkt-messagebox-bg);
-  color: var(--pkt-messagebox-txt);
+  border-left: 0.25rem solid var(--pkt-color-messagebox-bc);
+  background-color: var(--pkt-color-messagebox-bg);
+  color: var(--pkt-color-messagebox-txt);
 }
 .pkt-messagebox__title {
   font-size: 1.5rem;
@@ -15440,29 +16846,38 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin-bottom: 0;
 }
 .pkt-linkcard--beige {
-  background-color: var(--color-beige-light);
+  background-color: var(--pkt-color-surface-default-light-beige);
+  color: var(--pkt-color-text-body-dark) !important;
+}
+.pkt-linkcard--beige:hover, .pkt-linkcard--beige:focus, .pkt-linkcard--beige:focus-visible, .pkt-linkcard--beige:active {
+  color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
 .pkt-linkcard--blue {
-  background-color: var(--color-blue-5);
+  background-color: var(--pkt-color-surface-subtle-pale-blue);
+  color: var(--pkt-color-text-body-dark) !important;
+}
+.pkt-linkcard--blue:hover, .pkt-linkcard--blue:focus, .pkt-linkcard--blue:focus-visible, .pkt-linkcard--blue:active {
+  color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
 .pkt-linkcard--grey-outline {
-  border: 4px solid var(--color-gray);
+  border: 4px solid var(--pkt-color-border-subtle);
 }
 .pkt-linkcard--beige-outline {
-  border: 4px solid var(--color-beige-light);
+  border: 4px solid var(--pkt-color-border-light-beige);
 }
 
-[data-mode=dark] .pkt-linkcard--beige {
-  color: var(--color-blue-dark) !important;
+[data-mode=dark] .pkt-linkcard .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%);
 }
-[data-mode=dark] .pkt-linkcard--beige:focus {
-  color: var(--color-hover) !important;
+[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%);
 }
-[data-mode=dark] .pkt-linkcard--blue {
-  color: var(--color-blue-dark) !important;
+
+[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after, .pkt-linkcard--blue .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
 }
-[data-mode=dark] .pkt-linkcard--blue:focus {
-  color: var(--color-hover) !important;
+[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after, .pkt-linkcard--blue .pkt-link--external:hover::after {
+  filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
 }
 
 /*