diff --git a/src/fragments/08-blockquote-callouts.scss b/src/fragments/08-blockquote-callouts.scss
index 2fca3f7..c940f2f 100644
--- a/src/fragments/08-blockquote-callouts.scss
+++ b/src/fragments/08-blockquote-callouts.scss
@@ -50,84 +50,186 @@ body {
   border-radius: var(--callout-radius);
 }
 
-.rendered-widget,
-.markdown-rendered,
-.markdown-preview-section {
+.callout[data-callout="abstract"],
+.callout[data-callout="summary"],
+.callout[data-callout="tldr"] {
+  --callout-color: var(--ebw-callout-abstract);
+}
+.callout[data-callout="note"] {
+  --callout-color: var(--ebw-callout-note);
+}
+.callout[data-callout="info"],
+.callout[data-callout="todo"] {
+  --callout-color: var(--ebw-callout-info);
+}
+.callout[data-callout="tip"],
+.callout[data-callout="hint"],
+.callout[data-callout="important"] {
+  --callout-color: var(--ebw-callout-tip);
+}
+.callout[data-callout="success"],
+.callout[data-callout="check"],
+.callout[data-callout="done"] {
+  --callout-color: var(--ebw-callout-success);
+}
+.callout[data-callout="question"],
+.callout[data-callout="help"],
+.callout[data-callout="faq"] {
+  --callout-color: var(--ebw-callout-question);
+}
+.callout[data-callout="warning"],
+.callout[data-callout="caution"],
+.callout[data-callout="attention"] {
+  --callout-color: var(--ebw-callout-warning);
+}
+.callout[data-callout="failure"],
+.callout[data-callout="fail"],
+.callout[data-callout="missing"] {
+  --callout-color: var(--ebw-callout-failure);
+}
+.callout[data-callout="danger"],
+.callout[data-callout="error"] {
+  --callout-color: var(--ebw-callout-danger);
+}
+.callout[data-callout="bug"] {
+  --callout-color: var(--ebw-callout-bug);
+}
+.callout[data-callout="example"] {
+  --callout-color: var(--ebw-callout-example);
+}
+.callout[data-callout="excerpt"],
+.callout[data-callout="quote"],
+.callout[data-callout="cite"] {
+  --callout-color: var(--ebw-callout-quote);
+}
+.callout[data-callout="reference"] {
+  --callout-color: var(--ebw-callout-reference);
+}
+.callout[data-callout="toc"] {
+  --callout-color: var(--ebw-callout-toc);
+}
+.theme-light {
+  .callout[data-callout="info"],
+  .callout[data-callout="todo"],
+  .callout[data-callout="note"],
+  .callout[data-callout="excerpt"],
+  .callout[data-callout="quote"],
+  .callout[data-callout="cite"] {
+    --callout-title-color: var(--blue-5);
+  }
+  .callout[data-callout="bug"],
+  .callout[data-callout="example"],
   .callout[data-callout="abstract"],
   .callout[data-callout="summary"],
   .callout[data-callout="tldr"] {
-    --callout-color: var(--ebw-callout-abstract);
-  }
-  .callout[data-callout="note"] {
-    --callout-color: var(--ebw-callout-note);
-  }
-  .callout[data-callout="info"],
-  .callout[data-callout="todo"] {
-    --callout-color: var(--ebw-callout-info);
+    --callout-title-color: var(--purple-5);
   }
+  .callout[data-callout="question"],
+  .callout[data-callout="help"],
+  .callout[data-callout="faq"],
   .callout[data-callout="tip"],
   .callout[data-callout="hint"],
   .callout[data-callout="important"] {
-    --callout-color: var(--ebw-callout-tip);
+    --callout-title-color: var(--teal-5);
   }
   .callout[data-callout="success"],
   .callout[data-callout="check"],
   .callout[data-callout="done"] {
-    --callout-color: var(--ebw-callout-success);
-  }
-  .callout[data-callout="question"],
-  .callout[data-callout="help"],
-  .callout[data-callout="faq"] {
-    --callout-color: var(--ebw-callout-question);
+    --callout-title-color: var(--green-5);
   }
   .callout[data-callout="warning"],
   .callout[data-callout="caution"],
   .callout[data-callout="attention"] {
-    --callout-color: var(--ebw-callout-warning);
+    --callout-title-color: var(--yellow-5);
   }
+  .callout[data-callout="danger"],
+  .callout[data-callout="error"],
   .callout[data-callout="failure"],
   .callout[data-callout="fail"],
   .callout[data-callout="missing"] {
-    --callout-color: var(--ebw-callout-failure);
-  }
-  .callout[data-callout="danger"],
-  .callout[data-callout="error"] {
-    --callout-color: var(--ebw-callout-danger);
-  }
-  .callout[data-callout="bug"] {
-    --callout-color: var(--ebw-callout-bug);
-  }
-  .callout[data-callout="example"] {
-    --callout-color: var(--ebw-callout-example);
-  }
-  .callout[data-callout="excerpt"],
-  .callout[data-callout="quote"],
-  .callout[data-callout="cite"] {
-    --callout-color: var(--ebw-callout-quote);
+    --callout-title-color: var(--red-5);
   }
+  .callout[data-callout="toc"],
   .callout[data-callout="reference"] {
-    --callout-color: var(--ebw-callout-reference);
-  }
-  .callout[data-callout="toc"] {
-    --callout-color: var(--ebw-callout-toc);
+    --callout-title-color: var(--gray-dark-4);
   }
+}
+.callout-title {
+  font-family: var(--ebw-font-callout-title);
+}
+.callout-title-inner {
+  flex: 2;
+}
+.callout-content {
+  background-color: var(--background-primary);
 
-  .callout-title {
-    font-family: var(--ebw-font-callout-title);
+  > :first-child {
+    margin-top: 0.5em;
   }
-  .callout-title-inner {
-    flex: 2;
+  > :last-child {
+    margin-bottom: 0.5em;
   }
+}
+
+// ------------------------------------------------------
+// Reference Admonition
+// Create callout of type 'reference' (book icon suggested)
+// ```ad-reference
+// Title:: Title of referenced thing
+// Source:: https://....
+// ```
+// ------------------------------------------------------
+.callout[data-callout="reference"] {
   .callout-content {
-    background-color: var(--background-primary);
+    white-space: pre-wrap;
+    font-family: var(--font-monospace);
+    font-size: var(--font-smallest);
+    color: var(--text-muted);
 
-    > :first-child {
-      margin-top: 0.5em;
+    p {
+      margin-block: 0;
     }
-    > :last-child {
-      margin-bottom: 0.5em;
+
+    p:not(:first-child) {
+      margin-block-end: .5em;
     }
   }
+}
+// ------------------------------------------------------
+// TOC Admonition
+// List with compressed padding that floats to the right
+// Create callout of type 'toc' (outline icon suggested)
+// ```ad-toc
+// - List of links to document sections
+// ```
+// ------------------------------------------------------
+.callout[data-callout="toc"] {
+  &.callout {
+    float: right;
+    margin-left: .5em;
+    min-width: 150px;
+  }
+  .callout-content {
+    padding-right: .5em;
+
+    ul {
+      display: block;
+      margin-block-start: .5em;
+      margin-block-end: .5em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      padding-inline-start: 30px;
+    }
+  }
+}
+.admonition {
+  margin: 1em 0;
+  padding: var(--callout-padding);
+}
+
+.rendered-widget,
+.markdown-rendered,
+.markdown-preview-section {
   blockquote {
     overflow-x: auto;
     padding: var(--callout-content-padding);
@@ -139,58 +241,6 @@ body {
       margin-bottom: 0.5em;
     }
   }
-
-  // ------------------------------------------------------
-  // Reference Admonition
-  // Create callout of type 'reference' (book icon suggested)
-  // ```ad-reference
-  // Title:: Title of referenced thing
-  // Source:: https://....
-  // ```
-  // ------------------------------------------------------
-  .callout[data-callout="reference"] {
-    .callout-content {
-      white-space: pre-wrap;
-      font-family: var(--font-monospace);
-      font-size: var(--font-smallest);
-      color: var(--text-muted);
-
-      p {
-        margin-block: 0;
-      }
-
-      p:not(:first-child) {
-        margin-block-end: .5em;
-      }
-    }
-  }
-  // ------------------------------------------------------
-  // TOC Admonition
-  // List with compressed padding that floats to the right
-  // Create callout of type 'toc' (outline icon suggested)
-  // ```ad-toc
-  // - List of links to document sections
-  // ```
-  // ------------------------------------------------------
-  .callout[data-callout="toc"] {
-    &.callout {
-      float: right;
-      margin-left: .5em;
-      min-width: 150px;
-    }
-    .callout-content {
-      padding-right: .5em;
-
-      ul {
-        display: block;
-        margin-block-start: .5em;
-        margin-block-end: .5em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-        padding-inline-start: 30px;
-      }
-    }
-  }
 }
 div.popover {
   .callout[data-callout="toc"] {