diff --git a/css/markdown.css b/css/markdown.css
index 50c9d177..f39a378e 100644
--- a/css/markdown.css
+++ b/css/markdown.css
@@ -5,7 +5,7 @@
   that is easy to read on a white background 
 */
 #markdown-container {
-  color: #333;
+  color: var(--color-text-strong);
   line-height: 1.6;
   /* Padding & border radius come from your inline Tailwind classes */
 }
@@ -16,7 +16,7 @@
   font-weight: 700;
   margin-bottom: 1rem;
   margin-top: 0.5rem;
-  color: #111;
+  color: var(--color-text-strong);
 }
 
 #markdown-container h2 {
@@ -24,7 +24,7 @@
   font-weight: 700;
   margin-bottom: 0.75rem;
   margin-top: 1.25rem;
-  color: #222;
+  color: var(--color-text-strong);
 }
 
 #markdown-container h3 {
@@ -60,16 +60,16 @@
 
 /* Blockquotes */
 #markdown-container blockquote {
-  border-left: 4px solid #ccc;
+  border-left: 4px solid var(--color-border-subtle);
   padding-left: 1rem;
   margin: 1rem 0;
-  color: #555;
+  color: var(--color-muted);
 }
 
 /* Inline code */
 #markdown-container code {
-  background-color: #f6f8fa;
-  color: #d63384;
+  background-color: var(--color-page-alt);
+  color: var(--color-secondary);
   padding: 0.2rem 0.4rem;
   border-radius: 0.25rem;
   font-family: Menlo, Monaco, "Courier New", monospace;
@@ -78,8 +78,8 @@
 
 /* Code blocks */
 #markdown-container pre {
-  background-color: #f6f8fa;
-  color: #333;
+  background-color: var(--color-page-alt);
+  color: var(--color-text-strong);
   padding: 1rem;
   border-radius: 0.25rem;
   overflow-x: auto;
@@ -88,7 +88,7 @@
 
 /* Links */
 #markdown-container a {
-  color: #bf5af2; /* pick a link color or use var(--color-primary) if you like */
+  color: var(--color-primary);
   text-decoration: none;
 }
 
@@ -99,7 +99,7 @@
 /* Horizontal Rule */
 #markdown-container hr {
   border: 0;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--color-border-subtle);
   margin: 2rem 0;
 }
 
diff --git a/css/style.css b/css/style.css
index ef4df6dd..f4296058 100644
--- a/css/style.css
+++ b/css/style.css
@@ -487,7 +487,7 @@ body.modal-open #sidebarOverlay {
 #modalVideo {
   width: 100%;
   aspect-ratio: 16/9;
-  background-color: black;
+  background-color: var(--color-black);
 }
 
 /* Responsive Adjustments */
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
index 53d9d664..6001dedf 100644
--- a/stylelint.config.cjs
+++ b/stylelint.config.cjs
@@ -1,18 +1,22 @@
+const VAR_PATTERN = /^var\(--.*\)$/;
+const CONTAINS_VAR_PATTERN = /var\(--.*\)/;
+const LINEAR_GRADIENT_PATTERN = /^linear-gradient\(/;
+
 module.exports = {
-  ignoreFiles: ['css/tailwind.generated.css', 'css/style.css'],
+  ignoreFiles: ['css/tailwind.generated.css', 'css/tailwind.min.css'],
   rules: {
     'at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind', 'layer', 'apply'] }],
     'import-notation': 'string',
     'color-no-hex': true,
     'declaration-property-value-allowed-list': {
-      color: ['var\(--.*\)', 'inherit', 'currentColor'],
-      'background-color': ['var\(--.*\)', 'transparent', 'inherit'],
-      background: ['var\(--.*\)', 'none', 'transparent'],
-      'border-color': ['var\(--.*\)', 'transparent', 'inherit', 'currentColor'],
-      'outline-color': ['var\(--.*\)', 'transparent', 'inherit', 'currentColor'],
-      fill: ['var\(--.*\)', 'none', 'currentColor', 'inherit'],
-      stroke: ['var\(--.*\)', 'none', 'currentColor', 'inherit'],
-      'box-shadow': ['var\(--.*\)', 'none']
+      color: [VAR_PATTERN, 'inherit', 'currentColor'],
+      'background-color': [VAR_PATTERN, 'transparent', 'inherit'],
+      background: [VAR_PATTERN, CONTAINS_VAR_PATTERN, LINEAR_GRADIENT_PATTERN, 'none', 'transparent'],
+      'border-color': [VAR_PATTERN, CONTAINS_VAR_PATTERN, 'transparent', 'inherit', 'currentColor'],
+      'outline-color': [VAR_PATTERN, 'transparent', 'inherit', 'currentColor'],
+      fill: [VAR_PATTERN, 'none', 'currentColor', 'inherit'],
+      stroke: [VAR_PATTERN, 'none', 'currentColor', 'inherit'],
+      'box-shadow': [VAR_PATTERN, CONTAINS_VAR_PATTERN, 'none']
     }
   }
 };