@transferwise/neptune-css 0.0.0-experimental-e1f83e6 → 0.0.0-experimental-b878f82

package/dist/css/neptune.css

@@ -255,18 +255,18 @@
   --wds-letter-spacing-display-medium: 0;
 
   --wds-font-weight-display-small: 900;
-  --wds-font-size-display-small: 2.6875rem;
-  --wds-line-height-display-small: 1.4498;
+  --wds-font-size-display-small: 2.5rem;
+  --wds-line-height-display-small: 1.45;
   --wds-letter-spacing-display-small: 0;
 
   --wds-font-weight-display-number-small: 600;
-  --wds-font-size-display-number-small: 2.6875rem;
+  --wds-font-size-display-number-small: 2.5rem;
   --wds-line-height-display-number-small: 1.24;
   --wds-letter-spacing-display-number-small: 0;
 
   --wds-font-weight-display-number-medium: 800;
   --wds-font-size-display-number-medium: 3.25rem;
-  --wds-line-height-display-number-medium: 0.8;
+  --wds-line-height-display-number-medium: 0.846;
   --wds-letter-spacing-display-number-medium: 0;
 
   --wds-font-weight-display-number-large: 800;
@@ -275,52 +275,52 @@
   --wds-letter-spacing-display-number-large: 0;
 
   --wds-font-weight-title-screen: 600;
-  --wds-font-size-title-screen: 2.125rem;
+  --wds-font-size-title-screen: 1.875rem;
   --wds-line-height-title-screen: 1.6;
   --wds-letter-spacing-title-screen: 0;
   --wds-paragraph-spacing-title-screen: 0.875rem;
 
   --wds-font-weight-title-section: 600;
-  --wds-font-size-title-section: 1.875rem;
-  --wds-line-height-title-section: 1.68;
+  --wds-font-size-title-section: 1.625rem;
+  --wds-line-height-title-section: 1.681;
   --wds-letter-spacing-title-section: 0;
   --wds-paragraph-spacing-title-section: 0.875rem;
 
   --wds-font-weight-title-subsection: 600;
-  --wds-font-size-title-subsection: 1.625rem;
-  --wds-line-height-title-subsection: 1.74;
+  --wds-font-size-title-subsection: 1.375rem;
+  --wds-line-height-title-subsection: 1.741;
   --wds-letter-spacing-title-subsection: 0;
   --wds-paragraph-spacing-title-subsection: 0.875rem;
 
   --wds-font-weight-title-body: 600;
-  --wds-font-size-title-body: 1.375rem;
-  --wds-line-height-title-body: 1.84;
+  --wds-font-size-title-body: 1.1875rem;
+  --wds-line-height-title-body: 1.842;
   --wds-letter-spacing-title-body: 0;
   --wds-paragraph-spacing-title-body: 0.875rem;
 
   --wds-font-weight-title-group: 500;
-  --wds-font-size-title-group: 1.0625rem;
+  --wds-font-size-title-group: 0.9375rem;
   --wds-line-height-title-group: 1.9;
   --wds-letter-spacing-title-group: 0;
   --wds-paragraph-spacing-title-group: 0.875rem;
 
   --wds-font-weight-body-large-regular: 300;
   --wds-font-weight-body-large-bold: 600;
-  --wds-font-size-body-large: 1.1875rem;
-  --wds-line-height-body-large: 1.75;
+  --wds-font-size-body-large: 1.0625rem;
+  --wds-line-height-body-large: 1.753;
   --wds-letter-spacing-body-large: 0;
   --wds-paragraph-spacing-body-large: 0.875rem;
 
   --wds-font-weight-body-regular: 300;
   --wds-font-weight-body-bold: 600;
-  --wds-font-size-body: 1.0625rem;
+  --wds-font-size-body: 0.9375rem;
   --wds-line-height-body: 1.8;
   --wds-letter-spacing-body: 0;
   --wds-paragraph-spacing-body: 0.875rem;
 
   --wds-font-weight-nav-regular: 300;
   --wds-font-weight-nav-bold: 600;
-  --wds-font-size-nav: 0.9375rem;
+  --wds-font-size-nav: 0.8125rem;
   --wds-line-height-nav: 1.9;
   --wds-letter-spacing-nav: 0;
 }
@@ -2402,18 +2402,18 @@
   --wds-letter-spacing-display-medium: 0;
 
   --wds-font-weight-display-small: 900;
-  --wds-font-size-display-small: 2.6875rem;
-  --wds-line-height-display-small: 1.4498;
+  --wds-font-size-display-small: 2.5rem;
+  --wds-line-height-display-small: 1.45;
   --wds-letter-spacing-display-small: 0;
 
   --wds-font-weight-display-number-small: 600;
-  --wds-font-size-display-number-small: 2.6875rem;
+  --wds-font-size-display-number-small: 2.5rem;
   --wds-line-height-display-number-small: 1.24;
   --wds-letter-spacing-display-number-small: 0;
 
   --wds-font-weight-display-number-medium: 800;
   --wds-font-size-display-number-medium: 3.25rem;
-  --wds-line-height-display-number-medium: 0.8;
+  --wds-line-height-display-number-medium: 0.846;
   --wds-letter-spacing-display-number-medium: 0;
 
   --wds-font-weight-display-number-large: 800;
@@ -2422,52 +2422,52 @@
   --wds-letter-spacing-display-number-large: 0;
 
   --wds-font-weight-title-screen: 600;
-  --wds-font-size-title-screen: 2.125rem;
+  --wds-font-size-title-screen: 1.875rem;
   --wds-line-height-title-screen: 1.6;
   --wds-letter-spacing-title-screen: 0;
   --wds-paragraph-spacing-title-screen: 0.875rem;
 
   --wds-font-weight-title-section: 600;
-  --wds-font-size-title-section: 1.875rem;
-  --wds-line-height-title-section: 1.68;
+  --wds-font-size-title-section: 1.625rem;
+  --wds-line-height-title-section: 1.681;
   --wds-letter-spacing-title-section: 0;
   --wds-paragraph-spacing-title-section: 0.875rem;
 
   --wds-font-weight-title-subsection: 600;
-  --wds-font-size-title-subsection: 1.625rem;
-  --wds-line-height-title-subsection: 1.74;
+  --wds-font-size-title-subsection: 1.375rem;
+  --wds-line-height-title-subsection: 1.741;
   --wds-letter-spacing-title-subsection: 0;
   --wds-paragraph-spacing-title-subsection: 0.875rem;
 
   --wds-font-weight-title-body: 600;
-  --wds-font-size-title-body: 1.375rem;
-  --wds-line-height-title-body: 1.84;
+  --wds-font-size-title-body: 1.1875rem;
+  --wds-line-height-title-body: 1.842;
   --wds-letter-spacing-title-body: 0;
   --wds-paragraph-spacing-title-body: 0.875rem;
 
   --wds-font-weight-title-group: 500;
-  --wds-font-size-title-group: 1.0625rem;
+  --wds-font-size-title-group: 0.9375rem;
   --wds-line-height-title-group: 1.9;
   --wds-letter-spacing-title-group: 0;
   --wds-paragraph-spacing-title-group: 0.875rem;
 
   --wds-font-weight-body-large-regular: 300;
   --wds-font-weight-body-large-bold: 600;
-  --wds-font-size-body-large: 1.1875rem;
-  --wds-line-height-body-large: 1.75;
+  --wds-font-size-body-large: 1.0625rem;
+  --wds-line-height-body-large: 1.753;
   --wds-letter-spacing-body-large: 0;
   --wds-paragraph-spacing-body-large: 0.875rem;
 
   --wds-font-weight-body-regular: 300;
   --wds-font-weight-body-bold: 600;
-  --wds-font-size-body: 1.0625rem;
+  --wds-font-size-body: 0.9375rem;
   --wds-line-height-body: 1.8;
   --wds-letter-spacing-body: 0;
   --wds-paragraph-spacing-body: 0.875rem;
 
   --wds-font-weight-nav-regular: 300;
   --wds-font-weight-nav-bold: 600;
-  --wds-font-size-nav: 0.9375rem;
+  --wds-font-size-nav: 0.8125rem;
   --wds-line-height-nav: 1.9;
   --wds-letter-spacing-nav: 0;
 }
@@ -9343,7 +9343,6 @@ summary {
   display: list-item;
 }
 :root {
-  --base-font-size: 16px;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -9360,8 +9359,8 @@ summary {
   --btn-lg-radius-base: 3px;
 }
 .np-theme-personal {
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
+  font-family: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
+  font-family: var(--wds-font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
   --btn-padding: calc(12px - 1px) 24px;
@@ -9390,10 +9389,10 @@ summary {
   background-color: var(--color-background-screen);
 }
 html {
-  font-size: 16px;
-  font-size: var(--base-font-size);
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
+  font-size: 0.875rem;
+  font-size: var(--wds-font-size-body);
+  font-family: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
+  font-family: var(--wds-font-family-regular);
   color: #5d7079;
   color: var(--color-content-secondary);
   background-color: #ffffff;
@@ -9571,11 +9570,11 @@ ul ul {
 dt,
 dd {
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 dt {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 dd {
   margin-block-end: 16px;
@@ -9985,10 +9984,10 @@ h3,
 .lead {
   margin-block-end: 24px;
   margin-block-end: var(--size-24);
-  font-size: 1.25rem;
-  font-size: var(--font-size-20);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  font-size: 1.125rem;
+  font-size: var(--wds-font-size-title-body);
+  line-height: 1.35;
+  line-height: var(--wds-line-height-title-body);
 }
 .tiny {
   color: #5d7079;
@@ -10653,20 +10652,20 @@ a,
 .np-text-link-default,
 .np-text-link-large {
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-underline-offset: 0.3em;
 }
 .np-text-link-large {
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   letter-spacing: -0.011em;
   line-height: 150%;
 }
 .np-text-link-default {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   letter-spacing: -0.006em;
   line-height: 155%;
 }
@@ -10691,8 +10690,8 @@ a,
 .np-text-display-large--forced,
 .np-text-display-medium--forced,
 .np-text-display-small--forced {
-  font-family: 'Wise Sans', Inter, sans-serif;
-  font-family: var(--font-family-display);
+  font-family: 'Wise Sans', Inter, Rubik, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', sans-serif;
+  font-family: var(--wds-font-family-display);
   font-synthesis: none;
 }
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -10862,7 +10861,7 @@ p + .np-text-title-group {
 strong,
 b {
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: #37517e;
   color: var(--color-content-primary);
 }
@@ -10886,7 +10885,7 @@ blockquote {
   padding-inline: calc(16px - 2px) 16px;
   padding-inline: calc(var(--size-16) - 2px) var(--size-16);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   border-inline-start: 2px solid #0097c7;
   border-inline-start: 2px solid var(--color-content-accent);
 }
@@ -10904,9 +10903,9 @@ blockquote footer {
   color: #5d7079;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 blockquote footer::before {
   content: "\2014 \00A0";
@@ -10922,7 +10921,7 @@ blockquote footer::before {
     margin: 32px;
     margin: var(--size-32);
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 .blockquote-reverse {
@@ -10955,9 +10954,9 @@ pre {
   color: #5d7079;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   word-wrap: break-word;
   word-break: break-all;
   background-color: rgba(134,167,189,0.10196);
@@ -10990,8 +10989,8 @@ kbd {
 }
 kbd kbd {
   padding: 0;
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
   font-size: 100%;
 }
 .text-xs-left {
@@ -11100,16 +11099,16 @@ kbd kbd {
   word-wrap: anywhere;
 }
 .font-weight-bold {
-  font-weight: 700 !important;
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: 600 !important;
+  font-weight: var(--wds-font-weight-title-screen) !important;
 }
 .font-weight-semi-bold {
-  font-weight: 600 !important;
-  font-weight: var(--font-weight-semi-bold) !important;
+  font-weight: 500 !important;
+  font-weight: var(--wds-font-weight-title-group) !important;
 }
 .font-weight-normal {
   font-weight: 400 !important;
-  font-weight: var(--font-weight-regular) !important;
+  font-weight: var(--wds-font-weight-body-regular) !important;
 }
 .font-italic {
   font-style: italic !important;
@@ -13374,10 +13373,10 @@ input:focus ~ .alert-focus,
   padding-inline: var(--size-8);
   font-size: 10px;
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: #fff;
-  line-height: 1.2;
-  line-height: var(--line-height-control);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
@@ -13479,8 +13478,6 @@ a.badge:focus {
   font-family: var(--wds-font-family-regular);
   font-weight: 600;
   font-weight: var(--wds-font-weight-body-large-bold);
-  font-size: 1rem;
-  font-size: var(--wds-font-size-body-large);
   line-height: 1.5;
   line-height: var(--wds-line-height-body-large);
   letter-spacing: -0.011em;
@@ -13496,11 +13493,12 @@ a.badge:focus {
   border: 1px solid transparent;
   white-space: nowrap;
   padding-block-end: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   padding-block: 12px calc(12px - 2px);
   padding-inline: 24px;
   padding: var(--btn-padding);
-  font-size: var(--font-size-16);
+  font-size: 1rem;
+  font-size: var(--wds-font-size-body-large);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
   border-radius: 3px;
@@ -13540,7 +13538,7 @@ a.badge:focus {
 }
 .btn .dropdown-menu > li > a {
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
 }
@@ -14596,7 +14594,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   padding-inline: 16px;
   padding: var(--btn-sm-padding);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.375rem;
   line-height: var(--line-height-22);
   border-radius: 2px;
@@ -14606,7 +14604,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-sm .dropdown-menu > li > a,
 .navbar .btn .dropdown-menu > li > a {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.375rem;
   line-height: var(--line-height-22);
 }
@@ -14650,7 +14648,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
     padding-inline: 24px;
     padding: var(--btn-padding);
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: 1.5rem;
     line-height: var(--line-height-24);
     border-radius: var(--border-radius-base);
@@ -14658,7 +14656,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   }
   .navbar-collapse .btn .dropdown-menu > li > a {
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: 1.5rem;
     line-height: var(--line-height-24);
   }
@@ -14683,7 +14681,7 @@ input[type="button"].btn-block {
 }
 .btn-input {
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
@@ -14721,7 +14719,7 @@ input[type="button"].btn-block {
 .btn-input.btn-lg.btn-addon,
 .btn-input.btn-lg.btn-input-inverse {
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .btn-input-inverse {
   --color-content-primary: #ffffff;
@@ -15348,7 +15346,7 @@ label,
   color: var(--color-content-secondary);
   transition: color ease-in-out 0.15s;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 20px;
 }
 input[type="search"] {
@@ -15395,9 +15393,9 @@ output {
   display: block;
   padding-block-start: 9px;
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.2;
-  line-height: var(--line-height-control);
+  font-size: var(--wds-font-size-body-large);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
   color: #37517e;
   color: var(--color-content-primary);
 }
@@ -15412,8 +15410,6 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  font-size: 1rem;
-  font-size: var(--font-size-16);
   min-block-size: var(--input-height-base);
   padding-block: 12px calc(12px - 2px);
   padding-inline: 16px;
@@ -15423,6 +15419,7 @@ output {
   font-family: var(--wds-font-family-regular);
   font-weight: 400;
   font-weight: var(--wds-font-weight-body-large-regular);
+  font-size: 1rem;
   font-size: var(--wds-font-size-body-large);
   line-height: 1.5;
   line-height: var(--wds-line-height-body-large);
@@ -15538,7 +15535,7 @@ input[type="search"] {
   .input-group-lg input[type="datetime-local"],
   .input-group-lg input[type="month"] {
     line-height: calc(var(--input-height-large) - 1.5);
-    line-height: calc(var(--input-height-large) - var(--line-height-body));
+    line-height: calc(var(--input-height-large) - var(--wds-line-height-body-large));
   }
 }
 .form-group {
@@ -15619,8 +15616,8 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static {
   margin-block-end: 0;
-  min-block-size: calc(1.2 * 2);
-  min-block-size: calc(var(--line-height-control) * 2);
+  min-block-size: calc(1.22 * 2);
+  min-block-size: calc(var(--wds-line-height-title-section) * 2);
   color: #5d7079;
   color: var(--color-content-secondary);
   background-color: rgba(134,167,189,0.10196);
@@ -15699,7 +15696,7 @@ select[multiple].input-sm {
   padding-inline: 12px;
   padding: var(--input-padding-small);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 24px;
   border-radius: 3px;
 }
@@ -15717,13 +15714,13 @@ select[multiple].input-sm {
 .form-group-sm .form-control-static,
 .navbar .form-control-static {
   block-size: 32px;
-  min-block-size: calc(1.2 + 14px);
-  min-block-size: calc(var(--line-height-control) + 14px);
+  min-block-size: calc(1.22 + 14px);
+  min-block-size: calc(var(--wds-line-height-title-section) + 14px);
   padding-block: 4px calc(4px - 2px);
   padding-inline: 12px;
   padding: var(--input-padding-small);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 24px;
 }
 .input-lg {
@@ -15801,8 +15798,8 @@ select[multiple].input-lg {
 }
 .form-group-lg .form-control-static {
   block-size: var(--input-height-large);
-  min-block-size: calc(1.2 + 22px);
-  min-block-size: calc(var(--line-height-control) + 22px);
+  min-block-size: calc(1.22 + 22px);
+  min-block-size: calc(var(--wds-line-height-title-section) + 22px);
   padding-block: 12px calc(12px - 2px);
   padding-inline: 16px;
   padding: var(--input-padding-large);
@@ -16679,8 +16676,8 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative);
 }
 .has-feedback label ~ .form-control-feedback {
-  inset-block-start: 1.2;
-  inset-block-start: var(--line-height-control);
+  inset-block-start: 1.22;
+  inset-block-start: var(--wds-line-height-title-section);
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
   inset-block-start: 0;
@@ -16745,8 +16742,8 @@ select[multiple].input-lg {
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-block-size: calc(1.2 + (8px + 1));
-  min-block-size: calc(var(--line-height-control) + (8px + 1));
+  min-block-size: calc(1.22 + (8px + 1));
+  min-block-size: calc(var(--wds-line-height-title-section) + (8px + 1));
 }
 .form-horizontal .form-group {
   margin-inline-start: -12px;
@@ -16771,15 +16768,15 @@ select[multiple].input-lg {
 @media (min-width: 600px) {
   .form-horizontal .form-group-lg .control-label {
     padding-block-start: 17px;
-    font-size: 1.25rem;
-    font-size: var(--font-size-20);
+    font-size: 1.125rem;
+    font-size: var(--wds-font-size-title-body);
   }
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-sm .control-label {
     padding-block-start: 8px;
     font-size: 0.875rem;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
   }
 }
 .radio,
@@ -17110,11 +17107,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.25rem;
-  line-height: var(--line-height-20);
+  font-size: var(--wds-font-size-body-large);
+  line-height: 1.25;
+  line-height: var(--wds-line-height-title-subsection);
   padding-block-start: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
@@ -17153,7 +17150,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .form-group {
   position: relative;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .form-group .row {
   margin-inline-start: -6px;
@@ -17783,7 +17780,7 @@ select[multiple].input-group-sm > .input-group-addon {
   padding-inline: 16px;
   padding: var(--btn-sm-padding);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.375rem;
   line-height: var(--line-height-22);
   border-radius: 2px;
@@ -17792,7 +17789,7 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-sm > .input-group-btn > .btn .dropdown-menu > li > a {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.375rem;
   line-height: var(--line-height-22);
 }
@@ -17826,9 +17823,9 @@ select[multiple].input-group-sm > .input-group-addon {
   padding-inline: 16px;
   padding: var(--input-group-addon-padding);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   color: #5d7079;
   color: var(--color-content-secondary);
   text-align: center;
@@ -18826,9 +18823,9 @@ li > a > .currency-flag:first-child {
   padding-block: 8px;
   padding-inline: 16px;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   color: #5d7079;
   color: var(--color-content-secondary);
   white-space: nowrap;
@@ -21251,7 +21248,7 @@ li > a > .currency-flag:first-child {
   border-inline-start: 2px solid transparent;
   margin-block-start: 1px;
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   transition: all ease 0.15s;
 }
 .panel-group .list-group-item {
@@ -21530,9 +21527,9 @@ a.list-group-item-danger:hover {
   color: #37517e;
   color: var(--color-content-primary);
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
@@ -21549,7 +21546,7 @@ a.list-group-item-danger:hover {
   color: #0097c7;
   color: var(--color-content-accent);
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .nav > .active > a:hover,
 .nav > .active > a:focus {
@@ -21599,10 +21596,10 @@ a.list-group-item-danger:hover {
 .nav-tabs > li > a {
   margin-inline-end: 2px;
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   border-block-end: 3px solid transparent;
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav-tabs > .active > a {
   border-block-end: 3px solid rgba(0,0,0,0.10196);
@@ -21618,11 +21615,11 @@ a.list-group-item-danger:hover {
 .nav-pills > li {
   float: inline-start;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .nav-pills > li > a {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .nav-stacked > li {
   float: none;
@@ -21676,7 +21673,7 @@ a.list-group-item-danger:hover {
   padding-inline: 4px;
   padding-inline: var(--size-4);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 @media (min-width: 840px) {
   .nav-justified-2-p-x {
@@ -21924,7 +21921,7 @@ a.list-group-item-danger:hover {
 .navbar {
   position: relative;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   min-block-size: 56px;
   margin-block-end: 40px;
   border: 0 solid transparent;
@@ -22090,11 +22087,11 @@ a.list-group-item-danger:hover {
   border: 0;
   margin-inline-end: 12px;
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   margin-block-end: 8px;
   color: #ffffff;
 }
@@ -22185,8 +22182,8 @@ a.list-group-item-danger:hover {
 @media (min-width: 840px) {
   .navbar-nav > li > a.navbar-title-link,
   .navbar-nav > li > button.navbar-title-link {
-    font-size: 1.25rem;
-    font-size: var(--font-size-20);
+    font-size: 1.125rem;
+    font-size: var(--wds-font-size-title-body);
   }
 }
 .navbar-nav > li.divider {
@@ -22196,7 +22193,7 @@ a.list-group-item-danger:hover {
   .navbar-nav > li > a,
   .navbar-nav > li > button {
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     padding-block: 9px 7px;
     padding-inline: 16px;
     -webkit-touch-callout: none;
@@ -22255,7 +22252,7 @@ a.list-group-item-danger:hover {
   .navbar-nav > li > a {
     padding-block-end: 6px;
     font-size: 0.875rem;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
   }
 }
 .navbar-form {
@@ -22406,7 +22403,7 @@ a.list-group-item-danger:hover {
 }
 .navbar-nav > li > .dropdown-menu > li > a {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 @media (max-width: 840px) {
   .navbar-nav > li > .dropdown-menu > li > a {
@@ -22428,8 +22425,8 @@ a.list-group-item-danger:hover {
   color: #0077a5;
   color: var(--color-content-accent-active);
   background-color: transparent;
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-nav > li > .dropdown-menu > .active > a:hover,
 .navbar-nav > li > .dropdown-menu > .active > a:focus {
@@ -22493,7 +22490,7 @@ a.list-group-item-danger:hover {
   margin-block-start: 13px;
   margin-block-end: 11px;
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-btn.btn-sm {
   margin-block-start: 13px;
@@ -22580,8 +22577,8 @@ a.list-group-item-danger:hover {
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > .dropdown-toggle {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > .dropdown-toggle,
@@ -22615,8 +22612,8 @@ a.list-group-item-danger:hover {
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a {
-    font-weight: 700;
-    font-weight: var(--font-weight-bold);
+    font-weight: 600;
+    font-weight: var(--wds-font-weight-title-body);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
@@ -22682,8 +22679,8 @@ a.list-group-item-danger:hover {
 .navbar-inverse .navbar-nav > .active > .dropdown-toggle {
   color: #0077a5;
   color: var(--color-content-accent-active);
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > .dropdown-toggle,
@@ -22949,18 +22946,18 @@ a.list-group-item-danger:hover {
 }
 .navbar-title {
   float: inline-start;
-  font-size: 1.25rem;
-  font-size: var(--font-size-20);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  font-size: 1.125rem;
+  font-size: var(--wds-font-size-title-body);
+  line-height: 1.35;
+  line-height: var(--wds-line-height-title-body);
   margin-block-start: 12px;
   margin-block-end: 12px;
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 1.35;
+  font-weight: var(--wds-line-height-title-body);
 }
 .navbar-subtitle {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   margin-block-end: 8px;
 }
 .navbar-title,
@@ -23043,8 +23040,8 @@ a.list-group-item-danger:hover {
   }
 }
 .nav-toolbar h1 {
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
 }
 .nav-toolbar .close {
   -webkit-text-decoration: none;
@@ -23086,7 +23083,7 @@ a.list-group-item-danger:hover {
 @media (min-width: 600px) {
   .simple-nav .navbar-nav > li > a {
     font-size: 1rem !important;
-    font-size: var(--font-size-16) !important;
+    font-size: var(--wds-font-size-body-large) !important;
   }
 }
 @media (min-width: 1160px) {
@@ -23554,8 +23551,8 @@ button.close {
 }
 .modal-title {
   margin: 0;
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
 }
 .modal-body {
   position: relative;
@@ -23661,8 +23658,8 @@ button.close {
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(1.2 + 8px);
-  line-height: calc(var(--line-height-title) + 8px);
+  line-height: calc(1.22 + 8px);
+  line-height: calc(var(--wds-line-height-title-section) + 8px);
 }
 .panel-title > a {
   -webkit-text-decoration: none;
@@ -23712,8 +23709,8 @@ button.close {
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(1.2 * 2);
-    line-height: calc(var(--line-height-title) * 2);
+    line-height: calc(1.22 * 2);
+    line-height: calc(var(--wds-line-height-title-section) * 2);
   }
   .panel-heading > .btn-sm {
     margin-block-start: 8px;
@@ -24074,8 +24071,6 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -24505,16 +24500,16 @@ button.popover-close {
 }
 .popover-promotion .popover-title {
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-body-large);
+  line-height: 1rem;
+  line-height: var(--wds-font-size-body-large);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: 1.25rem;
-    font-size: var(--font-size-20);
-    line-height: 1.2;
-    line-height: var(--line-height-title);
+    font-size: 1.125rem;
+    font-size: var(--wds-font-size-title-body);
+    line-height: 1.125rem;
+    line-height: var(--wds-font-size-title-body);
   }
 }
 @media (max-width: 320px) {
@@ -25036,9 +25031,9 @@ button.popover-close {
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-body-bold);
   color: #fff;
   text-align: end;
   background-color: #0097c7;
@@ -25133,7 +25128,7 @@ textarea:focus-visible {
   margin-block-start: 0;
   margin-block-end: 0;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
@@ -25212,7 +25207,7 @@ textarea:focus-visible {
   .sequence {
     padding-inline-end: 24px;
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 .sequence > li {
@@ -25227,7 +25222,7 @@ textarea:focus-visible {
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
@@ -25302,7 +25297,7 @@ textarea:focus-visible {
   color: #37517e;
   color: var(--color-content-primary);
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
@@ -25333,7 +25328,7 @@ textarea:focus-visible {
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
@@ -25534,7 +25529,7 @@ textarea:focus-visible {
 }
 .sequence-icon .icon {
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -25634,7 +25629,7 @@ textarea:focus-visible {
   line-height: 30px;
   margin-block-start: -6px;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .sequence-icon-lg {
   inline-size: 40px;
@@ -25642,7 +25637,7 @@ textarea:focus-visible {
   line-height: 38px;
   margin-block-start: -6px;
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;
@@ -25904,7 +25899,7 @@ th {
   padding-inline: 16px;
   padding-inline: var(--size-16);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid rgba(0,0,0,0.10196);
   border-block-start: 1px solid #0000001a;
@@ -25920,7 +25915,7 @@ th {
   padding-inline: 16px;
   padding-inline: var(--size-16);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid rgba(0,0,0,0.10196);
   border-block-start: 1px solid #0000001a;
@@ -25966,14 +25961,14 @@ th {
 .table > .thead,
 .table > .tfoot {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   color: #37517e;
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
@@ -26234,8 +26229,8 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: 700;
-    font-weight: var(--font-weight-bold);
+    font-weight: 600;
+    font-weight: var(--wds-font-weight-title-body);
     color: #37517e;
     color: var(--color-content-primary);
   }
@@ -26251,7 +26246,7 @@ table col[class*="col-"] {
   .table > .tbody > dl > dd {
     display: table-cell;
     font-size: 0.875rem;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     color: #5d7079;
     color: var(--color-content-secondary);
   }
@@ -26272,7 +26267,7 @@ table col[class*="col-"] {
     padding-block: 24px 0;
     padding-block: var(--size-24) 0;
     padding-inline: 1.5;
-    padding-inline: var(--line-height-body);
+    padding-inline: var(--wds-line-height-body-large);
   }
   .table > .tbody > dl > dd {
     padding: 0;
@@ -26321,8 +26316,8 @@ table col[class*="col-"] {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
+  font-family: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
+  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;