fixing shadows

index.css

@@ -11,7 +11,7 @@
 
   /*
       I am using `px` instead of `rem` for any kind of sizes.
-      When talking about font-size, it is the best practice to use 
+      When talking about font-size, it is the best practice to use
       `rem` so that an end user can change the font-size using the
       browser's font-size setting.
 
@@ -34,22 +34,21 @@
   --shadow-inner-1: inset rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px,
     rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
 
-  --shadow-1: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px,
+  --shadow-none: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px,
     rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
-  --shadow-2: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+  --shadow-1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
     rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
-  --shadow-3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px,
+  --shadow-2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px,
     rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
-  --shadow-4: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px,
+  --shadow-3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px,
     rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
-  --shadow-5: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+  --shadow-4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
     rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
-  --shadow-6: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px,
+  --shadow-5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px,
     rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
 
   --shadow-default: var(--shadow-1);
 
-
   --drop-shadow-1: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
   --drop-shadow-2: 0 1px 1px rgb(0 0 0 / 0.05);
   --drop-shadow-3: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
@@ -158,8 +157,8 @@
   --line-height-short-16: 1.28;
   --line-height-short-17: 1.1;
 
-  /* 
-      Each typeface requires its own letter spacing configuration. 
+  /*
+      Each typeface requires its own letter spacing configuration.
       It is hard to predict what values would be the best, so feel free to override them.
     */
   --letter-spacing-1: -0.06em;

typography.css

@@ -0,0 +1,63 @@
+:where(p),
+:where(li) {
+  font-size: var(--font-size-fluid-1);
+  line-height: var(--line-height-2);
+  margin-bottom: 1.5rem;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+
+:where(h1) {
+  font-family: var(--font-display, var(--font-sans));
+  font-size: var(--font-size-short-12);
+  line-height: var(--line-height-short-12);
+  letter-spacing: var(--letter-spacing-2);
+  max-inline-size: var(--max-inline-size-1);
+}
+
+:where(h2) {
+  font-size: var(--font-size-short-10);
+  line-height: var(--line-height-short-10);
+  letter-spacing: var(--letter-spacing-2);
+  max-inline-size: var(--max-inline-size-2);
+}
+
+:where(h3) {
+  font-size: var(--font-size-short-8);
+  line-height: var(--line-height-short-8);
+  letter-spacing: var(--letter-spacing-2);
+  max-inline-size: var(--max-inline-size-2);
+}
+
+:where(h4) {
+  font-size: var(--font-size-short-6);
+  line-height: var(--line-height-short-4xl);
+  letter-spacing: var(--letter-spacing-2);
+  max-inline-size: var(--max-inline-size-2);
+}
+
+:where(h5) {
+  font-size: var(--font-size-short-4);
+  line-height: var(--line-height-short-4);
+  letter-spacing: var(--letter-spacing-2);
+  max-inline-size: var(--max-inline-size-2);
+}
+
+:where(h6) {
+  font-size: var(--font-size-short-2);
+  line-height: var(--line-height-short-2);
+  letter-spacing: var(--letter-spacing-2);
+  max-inline-size: var(--max-inline-size-2);
+}
+
+:where(code, kbd, samp, pre) {
+  font-family: var(--font-mono);
+}
+
+:where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}