support for system-set dark mode

src/app.css

@@ -3,12 +3,23 @@
 @tailwind utilities;
 
 :root {
+    /* light */
     --background: #F8FAF9;    /* Sage/Light/2 */
     --callout: #ECEFED;       /* Sage/Light/4 */ 
     --stroke: #D7DCDA;        /* Sage/Light/7 */
-    --text-shout: #164430;    /* Green/Dark/6 */
+    --text-shout: #236E4A;    /* Green/Dark/8 */
     --text-murmur: #113123;   /* Green/Dark/4 */
-    --icon-dark: #236E4A;     /* Green/Dark/8 */
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* dark */
+        --background: #141716;    /* Sage/Dark/1 */
+        --callout: #252A27;       /* Sage/Dark/4 */ 
+        --stroke: #393F3C;        /* Sage/Dark/7 */
+        --text-shout: #92CEAC;    /* Green/Light/7 */
+        --text-murmur: #99A29E;   /* Green/Dark/11 */
+        }
 }
 
 body {
@@ -19,10 +30,13 @@ body {
 }
 
 h1, h2, h3, h4 {
-    color: var(--text-shout);
     font-weight: 700;
 }
 
+h2, h3, h4 {
+    color: var(--text-shout);
+}
+
 h1 {
     font-family: "Redaction", Georgia, 'Times New Roman', Times, serif;
 }
@@ -39,6 +53,10 @@ footer {
     content: "/";
 }
 
+.pronoun-example-table {
+    border-color: var(--stroke);
+}
+
 .t-row:not(:last-child) {
     @apply border-b;
     border-color: var(--stroke);
@@ -48,10 +66,6 @@ footer {
     background-color: var(--callout);
 }
 
-.svg-dark-stroke {
-    stroke: var(--icon-dark);
-}
-
 
 @media (min-width: 1024px) {
     .t-row:not(:last-child) {
@@ -59,5 +73,6 @@ footer {
     }
     .t-row:not(:last-child) .t-cell {
         @apply border-r;
+        border-color: var(--stroke);
     }
 }