fix(modal.css): explicitly set basic font sizes to prevent inheriting from parent(s); svg property usage updates

src/assets/styles/base/index.css

@@ -290,9 +290,7 @@ a {
 }
 
 /* headers */
-h1,
-h2,
-h3 {
+h1, h2, h3 {
   font-family: var(--font-heading);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-md);

src/assets/styles/base/vars.css

@@ -107,7 +107,8 @@
   --sizing-full: 100%;
 
   --sizing-svg-sm: 18px;
-  --sizing-svg: 24px;
+  --sizing-svg-base: 24px;
+  --sizing-svg: var(--sizing-svg-base);
 
   /* spacing */
   --spacing-xs: var(--sizing-xs);

src/assets/styles/components/modal.css

@@ -47,6 +47,10 @@ dialog {
   transition: color var(--transition-duration-default) var(--transition-ease-in-out),
     transform var(--transition-duration-default) var(--transition-ease-in-out);
 
+  svg {
+    --sizing-svg: var(--sizing-svg-base);
+  }
+
 
   &:is(:hover, :focus, :active) {
     color: var(--link-color-hover);
@@ -63,12 +67,25 @@ dialog,
   padding: var(--spacing-lg) var(--spacing-base);
   overflow-y: auto;
   border-radius: var(--border-radius-slight);
+  font-size: var(--font-size-base);
 
   &.closing {
     animation: fadeOut var(--transition-duration-default) var(--transition-ease-in-out);
   }
 
+  h1 {
+    font-size: var(--font-size-2xl);
+  }
+
+  h2 {
+    font-size: var(--font-size-xl);
+  }
+
   h3 {
+    font-size: var(--font-size-lg);
+  }
+
+  h1, h2, h3 {
     margin-top: 0;
   }