Make remaining non-fluid font sizes use fluid type scale

Author: NicolaSaunders

assets-src/styles/sass/30-base/_buttons.scss

@@ -18,7 +18,7 @@ button,
 	border-radius: rem(24);
 	color: $white;
 	display: inline-flex;
-	font-size: rem(14);
+	font-size: var(--w3c-text-01);
 	font-weight: $emphasis;
     justify-content: center;
 	outline: 2px solid transparent; /* 2 */

assets-src/styles/sass/30-base/_typography.scss

@@ -50,8 +50,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .lead {
-	font-size: rem(23);
-	line-height: calc(33.6 / 24);
+	font-size: var(--w3c-text-2);
 }
 
 :where(.txt-pluto, .txt-eris, .text-sm) {

assets-src/styles/sass/50-core-components/_archive-banner.scss

@@ -43,7 +43,7 @@
 
 	#archive-banner .archive-banner__message h2 {
 		display: block;
-		font-size: rem(19);
+		font-size: var(--w3c-text-1);
 		line-height: calc(32 / 19);
 	}
 

assets-src/styles/sass/50-core-components/_navigation.scss

@@ -177,7 +177,7 @@ li.top-nav-item + li.top-nav-item {
 
 .account-login {
 	flex-basis: 100%;
-	font-size: rem(14) !important;
+	font-size: var(--w3c-text-01) !important;
 
 	@include mq($max-width) {
 		flex-basis: auto;

assets-src/styles/sass/50-core-components/_slide.scss

@@ -27,18 +27,12 @@
 
 .slide__quote {
 	background: url('../images/quote-bg.png') no-repeat 0 0;
-	font-size: rem(20);
+	font-size: var(--w3c-text-2);
 	font-weight: bold;
-	line-height: calc(32 / 20);
 	margin-inline-start: rem(35);
 	padding-block-start: rem(15);
 	position: relative;
 
-	@include mq($bp-tab-small) {
-		font-size: rem(24);
-		line-height: calc(33.6 / 24);
-	}
-
 	&::before {
 		background-color: $w3c-blue;
         block-size: 100%;

assets-src/styles/sass/60-advanced-components/_collapsibles.scss

@@ -10,7 +10,7 @@
 		border-radius: 0;
 		display: flex;
 		flex-wrap: wrap;
-		font-size: rem(18);
+		font-size: var(--w3c-text-0);
 		font-weight: bold;
         inline-size: 100%;
 		line-height: calc(27 / 18);
@@ -19,7 +19,7 @@
 		padding: rem(3);
 
 		> span {
-			font-size: rem(15);
+			font-size: var(--w3c-text-01);
 			font-weight: normal;
             inline-size: 100%;
 			line-height: calc(22.5 / 15);

assets-src/styles/sass/60-advanced-components/_header.scss

@@ -59,7 +59,7 @@
 
 	.sr-only {
 		@extend %visuallyhidden;
-		font-size: rem(14);
+		font-size: var(--w3c-text-01);
 
 		@include mq($max-width) {
 			border: initial;

assets-src/styles/sass/60-advanced-components/_navigation.scss

@@ -20,7 +20,7 @@
 
 [data-trigger='mobile-nav'] {
 	display: inline-flex;
-	font-size: rem(14);
+	font-size: var(--w3c-text-01);
 	padding: rem(7) 0;
 
 	&:focus {
@@ -303,8 +303,7 @@
 .global-nav__inner .nav__submenu li a {
 	color: $off-black;
     display: block;
-	font-size: rem(19);
-	line-height: calc(27 / 18);
+	font-size: var(--w3c-text-1);
 	padding-block: rem(8);
 	text-decoration: none;
 

assets-src/styles/sass/80-templates/_post.scss

@@ -49,13 +49,11 @@
 	padding: rem(28) rem(20);
 
 	h2 {
-		font-size: rem(19);
-		line-height: calc(33 / 17);
+		font-size: var(--w3c-text-1);
 	}
 
 	h3 {
-		font-size: 1rem;
-		line-height: calc(32 / 24);
+		font-size: var(--w3c-text-0);
 	}
 
 	a {