diff --git a/_includes/base.njk b/_includes/base.njk
index 1af94d9..5091fda 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -8,36 +8,105 @@
   <meta name="description" content="{{ description }}">
   {% endif %}
   
-  {# Critical CSS inlined for faster initial render #}
   <style>
     :root {
-      --primary-color: #2c3e50;
-      --secondary-color: #3498db;
-      --text-color: #333;
-      --background-color: #fff;
-      --border-color: #ddd;
-      --code-background: #f5f5f5;
+      /* Text hierarchy */
+      --color-text-primary: #333;
+      --color-text-heading: #2c3e50;
+      --color-text-muted: #666;
+      --color-text-link: #3498db;
+      /* Backgrounds */
+      --color-bg-page: #fff;
+      --color-bg-surface: #f5f5f5;
+      --color-bg-warning: #fff3cd;
+      /* Borders & Dividers */
+      --color-border-default: #ddd;
+      --color-border-warning: #ffc107;
+      --color-border-focus: #3498db;
+      /* Feedback */
+      --color-warning-text: #856404;
+      /* Effects */
+      --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
+      /* Spacing */
+      --space-section: 2rem;
+      --space-block: 1.5rem;
+      --space-element: 1rem;
+      --space-tight: 0.5rem;
+      --space-micro: 0.25rem;
+      /* Typography - Sizes */
+      --font-size-page-title: 2rem;
+      --font-size-section-title: 1.5rem;
+      --font-size-subsection-title: 1.25rem;
+      --font-size-nav: 1.2rem;
+      --font-size-body: 1rem;
+      --font-size-small: 0.9rem;
+      /* Typography - Weights */
+      --font-weight-normal: 400;
+      --font-weight-medium: 500;
+      --font-weight-bold: 700;
+      /* Typography - Line heights */
+      --line-height-body: 1.6;
+      /* Border Radius */
+      --radius-card: 8px;
+      --radius-block: 5px;
+      --radius-inline: 3px;
+      /* Legend/Diagram Colors */
+      --color-legend-1: #db2777;
+      --color-legend-2: #2563eb;
+      --color-legend-3: #0891b2;
+      --color-legend-4: #16a34a;
+      --color-legend-5: #dc2626;
+      --color-legend-6: #9333ea;
+      --color-legend-7: #ca8a04;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-text-primary: #e0e0e0;
+        --color-text-heading: #f0f0f0;
+        --color-text-muted: #a0a0a0;
+        --color-text-link: #5dade2;
+        --color-bg-page: #1a1a1a;
+        --color-bg-surface: #2d2d2d;
+        --color-bg-warning: #3d3520;
+        --color-border-default: #404040;
+        --color-border-warning: #ffc107;
+        --color-border-focus: #5dade2;
+        --color-warning-text: #ffd966;
+        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
+        --color-legend-1: #f472b6;
+        --color-legend-2: #60a5fa;
+        --color-legend-3: #22d3ee;
+        --color-legend-4: #4ade80;
+        --color-legend-5: #f87171;
+        --color-legend-6: #c084fc;
+        --color-legend-7: #fbbf24;
+      }
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      line-height: 1.6;
-      color: var(--text-color);
-      background-color: var(--background-color);
+      line-height: var(--line-height-body);
+      color: var(--color-text-primary);
+      background-color: var(--color-bg-page);
       max-width: 800px;
       margin: 0 auto;
-      padding: 2rem;
+      padding: var(--space-section);
     }
-    header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
-    header nav a { color: var(--primary-color); text-decoration: none; font-weight: bold; font-size: 1.2rem; }
+    header { margin-bottom: var(--space-section); padding-bottom: var(--space-element); border-bottom: 1px solid var(--color-border-default); }
+    header nav a { color: var(--color-text-heading); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-nav); }
     main { min-height: calc(100vh - 200px); }
-    h1, h2, h3 { color: var(--primary-color); margin: 1.5rem 0 1rem; }
-    h1 { font-size: 2rem; }
-    footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); text-align: center; color: #666; font-size: 0.9rem; }
+    h1, h2, h3 { color: var(--color-text-heading); margin: 1.5rem 0 1rem; }
+    h1 { font-size: var(--font-size-page-title); }
+    footer { margin-top: var(--space-section); padding-top: var(--space-element); border-top: 1px solid var(--color-border-default); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-small); }
     footer > div {
       display: flex;
       justify-content: space-evenly;
     }
+    footer a { color: var(--color-text-link); }
+    .icon-invertible { transition: filter 0.2s; }
+    @media (prefers-color-scheme: dark) {
+      .icon-invertible { filter: invert(1) brightness(0.9); }
+    }
   </style>
   
   {# Preload full stylesheet with cache-busted filename #}
@@ -72,13 +141,13 @@
       <!-- Social Things -->
       <span>
         <a href="https://matrix.to/#/@jan-leila:cyberia.club" title="Matrix" style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
-          <img src="{{ 'matrix-icon.svg' | fileHash('assets') }}" alt="Matrix Logo" style="width: 100%; height: 100%;">
+          <img src="{{ 'matrix-icon-dark.svg' | fileHash('assets') }}" alt="Matrix Logo" class="icon-invertible" style="width: 100%; height: 100%;">
         </a>
         <a href="https://git.jan-leila.com/jan-leila" title="Forgejo" style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
-          <img src="{{ 'forgejo-icon.svg' | fileHash('assets') }}" alt="Forgejo Logo" style="width: 100%; height: 100%;">
+          <img src="{{ 'forgejo-icon-dark.svg' | fileHash('assets') }}" alt="Forgejo Logo" class="icon-invertible" style="width: 100%; height: 100%;">
         </a>
         <a href="https://mspsocial.net/@jan_leila" title="Mastodon" style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
-          <img src="{{ 'mastodon-icon.svg' | fileHash('assets') }}" alt="Mastodon Logo" style="width: 100%; height: 100%;">
+          <img src="{{ 'mastodon-icon-dark.svg' | fileHash('assets') }}" alt="Mastodon Logo" class="icon-invertible" style="width: 100%; height: 100%;">
         </a>
       </span>
       <span>
@@ -91,19 +160,19 @@
     <div>
       <a href="https://git.jan-leila.com/jan-leila/volpe" style="display: flex;">
         <span style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
-          <img src="{{ 'git-icon.svg' | fileHash('assets') }}" alt="Git Logo" style="width: 100%; height: 100%;">
+          <img src="{{ 'git-icon-dark.svg' | fileHash('assets') }}" alt="Git Logo" class="icon-invertible" style="width: 100%; height: 100%;">
         </span>
         source
       </a>
       <a href="/feed.xml" style="display: flex;">
         <span style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
-          <img src="{{ 'rss-icon.svg' | fileHash('assets') }}" alt="Tor Onion Logo" style="width: 100%; height: 100%;">
+          <img src="{{ 'rss-icon-dark.svg' | fileHash('assets') }}" alt="RSS Logo" class="icon-invertible" style="width: 100%; height: 100%;">
         </span>
         rss
       </a>
       <a href="http://2ggpzgonqsll5gi56u47aywu4qyl37eiu5jjrq7ma43z77ekkwuqxmid.onion" style="display: flex;">
         <span style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
-          <img src="{{ 'onion-icon.svg' | fileHash('assets') }}" alt="Tor Onion Logo" style="width: 100%; height: 100%;">
+          <img src="{{ 'onion-icon-dark.svg' | fileHash('assets') }}" alt="Tor Onion Logo" class="icon-invertible" style="width: 100%; height: 100%;">
         </span>
         onion mirror
       </a>
diff --git a/assets/forgejo-icon.svg b/assets/forgejo-icon-dark.svg
similarity index 100%
rename from assets/forgejo-icon.svg
rename to assets/forgejo-icon-dark.svg
diff --git a/assets/git-icon.svg b/assets/git-icon-dark.svg
similarity index 100%
rename from assets/git-icon.svg
rename to assets/git-icon-dark.svg
diff --git a/assets/mastodon-icon.svg b/assets/mastodon-icon-dark.svg
similarity index 100%
rename from assets/mastodon-icon.svg
rename to assets/mastodon-icon-dark.svg
diff --git a/assets/matrix-icon.svg b/assets/matrix-icon-dark.svg
similarity index 100%
rename from assets/matrix-icon.svg
rename to assets/matrix-icon-dark.svg
diff --git a/assets/onion-icon.svg b/assets/onion-icon-dark.svg
similarity index 100%
rename from assets/onion-icon.svg
rename to assets/onion-icon-dark.svg
diff --git a/assets/rss-icon.svg b/assets/rss-icon-dark.svg
similarity index 100%
rename from assets/rss-icon.svg
rename to assets/rss-icon-dark.svg
diff --git a/css/style.css b/css/style.css
index bd9c572..4dd619e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,13 +1,3 @@
-/* Base styles */
-:root {
-  --primary-color: #2c3e50;
-  --secondary-color: #3498db;
-  --text-color: #333;
-  --background-color: #fff;
-  --border-color: #ddd;
-  --code-background: #f5f5f5;
-}
-
 * {
   box-sizing: border-box;
   margin: 0;
@@ -16,30 +6,30 @@
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-  line-height: 1.6;
-  color: var(--text-color);
-  background-color: var(--background-color);
+  line-height: var(--line-height-body);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-page);
   max-width: 800px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: var(--space-section);
 }
 
 /* Header and Navigation */
 header {
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--border-color);
+  margin-bottom: var(--space-section);
+  padding-bottom: var(--space-element);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 header nav a {
-  color: var(--primary-color);
+  color: var(--color-text-heading);
   text-decoration: none;
-  font-weight: bold;
-  font-size: 1.2rem;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-nav);
 }
 
 header nav a:hover {
-  color: var(--secondary-color);
+  color: var(--color-text-link);
 }
 
 /* Main content */
@@ -48,20 +38,20 @@ main {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: var(--primary-color);
-  margin: 1.5rem 0 1rem;
+  color: var(--color-text-heading);
+  margin: var(--space-block) 0 var(--space-element);
 }
 
-h1 { font-size: 2rem; }
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.25rem; }
+h1 { font-size: var(--font-size-page-title); }
+h2 { font-size: var(--font-size-section-title); }
+h3 { font-size: var(--font-size-subsection-title); }
 
 p {
-  margin-bottom: 1rem;
+  margin-bottom: var(--space-element);
 }
 
 a {
-  color: var(--secondary-color);
+  color: var(--color-text-link);
 }
 
 /* Section header with view all link */
@@ -72,13 +62,13 @@ a {
 }
 
 .section-header h1 {
-  margin: 1.5rem 0 1rem;
+  margin: var(--space-block) 0 var(--space-element);
 }
 
 .view-all {
-  margin-top: 1.5rem;
-  font-size: 0.9rem;
-  color: var(--secondary-color);
+  margin-top: var(--space-block);
+  font-size: var(--font-size-small);
+  color: var(--color-text-link);
   text-decoration: none;
 }
 
@@ -92,7 +82,7 @@ a {
 }
 
 .post-list li {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--space-block);
 }
 
 .post-list li:last-child {
@@ -102,57 +92,57 @@ a {
 .post-card {
   display: block;
   text-decoration: none;
-  padding: 1.5rem;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
+  padding: var(--space-block);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .post-card:hover {
-  border-color: var(--secondary-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-card);
 }
 
 .post-card h2 {
-  margin: 0 0 0.5rem;
-  color: var(--primary-color);
+  margin: 0 0 var(--space-tight);
+  color: var(--color-text-heading);
 }
 
 .post-card:hover h2 {
-  color: var(--secondary-color);
+  color: var(--color-text-link);
 }
 
 .post-card time {
-  color: #666;
-  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
 }
 
 .post-card p {
-  color: var(--text-color);
-  margin-top: 0.5rem;
+  color: var(--color-text-primary);
+  margin-top: var(--space-tight);
   margin-bottom: 0;
 }
 
 /* Blog post */
 .blog-post {
-  margin-bottom: 2rem;
+  margin-bottom: var(--space-section);
 }
 
 .post-header {
-  margin-bottom: 2rem;
+  margin-bottom: var(--space-section);
 }
 
 .post-header h1 {
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--space-tight);
 }
 
 .post-header time {
-  color: #666;
-  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
 }
 
 .post-content {
-  margin-bottom: 2rem;
+  margin-bottom: var(--space-section);
 }
 
 .post-content img {
@@ -161,18 +151,18 @@ a {
 }
 
 .post-content code {
-  background-color: var(--code-background);
+  background-color: var(--color-bg-surface);
   padding: 0.2rem 0.4rem;
-  border-radius: 3px;
+  border-radius: var(--radius-inline);
   font-size: 0.9em;
 }
 
 .post-content pre {
-  background-color: var(--code-background);
-  padding: 1rem;
-  border-radius: 5px;
+  background-color: var(--color-bg-surface);
+  padding: var(--space-element);
+  border-radius: var(--radius-block);
   overflow-x: auto;
-  margin: 1rem 0;
+  margin: var(--space-element) 0;
 }
 
 .post-content pre code {
@@ -189,15 +179,15 @@ a {
 .post-content .task-list-item {
   display: flex;
   align-items: flex-start;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
+  gap: var(--space-tight);
+  margin-bottom: var(--space-micro);
 }
 
 .post-content .task-list-item-checkbox {
   margin-top: 0.35rem;
   width: 1rem;
   height: 1rem;
-  accent-color: var(--secondary-color);
+  accent-color: var(--color-text-link);
 }
 
 .post-content .task-list-item > label {
@@ -206,73 +196,73 @@ a {
 
 /* Nested task lists */
 .post-content .task-list-item ul.contains-task-list {
-  margin-top: 0.25rem;
+  margin-top: var(--space-micro);
 }
 
 /* Lists in post content */
 .post-content ul,
 .post-content ol {
-  margin-bottom: 1rem;
-  padding-left: 1.5rem;
+  margin-bottom: var(--space-element);
+  padding-left: var(--space-block);
 }
 
 .post-content li {
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--space-micro);
 }
 
 .post-content ul ul,
 .post-content ul ol,
 .post-content ol ul,
 .post-content ol ol {
-  margin-top: 0.25rem;
-  margin-bottom: 0.5rem;
-  padding-left: 1.5rem;
+  margin-top: var(--space-micro);
+  margin-bottom: var(--space-tight);
+  padding-left: var(--space-block);
 }
 
 /* Expandable sections */
 .expandable {
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
-  margin: 1rem 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-block);
+  margin: var(--space-element) 0;
 }
 
 .expandable summary {
-  padding: 0.75rem 1rem;
+  padding: 0.75rem var(--space-element);
   cursor: pointer;
-  font-weight: bold;
-  background-color: var(--code-background);
-  border-radius: 5px 5px 0 0;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--color-bg-surface);
+  border-radius: var(--radius-block) var(--radius-block) 0 0;
 }
 
 .expandable[open] summary {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .expandable > *:not(summary) {
-  padding: 0 1rem;
+  padding: 0 var(--space-element);
 }
 
 .expandable > p:last-child {
-  padding-bottom: 1rem;
+  padding-bottom: var(--space-element);
 }
 
 /* Tags */
 .post-tags {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+  margin-top: var(--space-section);
+  padding-top: var(--space-element);
+  border-top: 1px solid var(--color-border-default);
 }
 
 .post-tags h2 {
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
+  font-size: var(--font-size-body);
+  margin-bottom: var(--space-tight);
 }
 
 .tag-list {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem 1rem;
+  gap: var(--space-tight) var(--space-element);
 }
 
 .tag-list li {
@@ -280,7 +270,7 @@ a {
 }
 
 .tag-list a {
-  color: var(--secondary-color);
+  color: var(--color-text-link);
   text-decoration: none;
 }
 
@@ -290,53 +280,64 @@ a {
 
 /* Footnotes */
 .footnotes {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 2px solid var(--border-color);
-  font-size: 0.9rem;
+  margin-top: var(--space-section);
+  padding-top: var(--space-element);
+  border-top: 2px solid var(--color-border-default);
+  font-size: var(--font-size-small);
 }
 
 .footnotes h2 {
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
+  font-size: var(--font-size-body);
+  margin-bottom: var(--space-tight);
 }
 
 .footnotes ol {
-  padding-left: 1.5rem;
+  padding-left: var(--space-block);
 }
 
 .footnotes li {
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--space-tight);
 }
 
 .footnote-ref a {
-  color: var(--secondary-color);
+  color: var(--color-text-link);
   text-decoration: none;
 }
 
 .footnote-backref {
-  margin-left: 0.5rem;
+  margin-left: var(--space-tight);
   text-decoration: none;
 }
 
 /* Draft Warning Banner */
 .draft-warning-banner {
-  background-color: #fff3cd;
-  border: 1px solid #ffc107;
-  border-radius: 5px;
-  padding: 1rem;
-  margin-bottom: 1.5rem;
-  color: #856404;
-  font-weight: 500;
+  background-color: var(--color-bg-warning);
+  border: 1px solid var(--color-border-warning);
+  border-radius: var(--radius-block);
+  padding: var(--space-element);
+  margin-bottom: var(--space-block);
+  color: var(--color-warning-text);
+  font-weight: var(--font-weight-medium);
   text-align: center;
 }
 
 /* Footer */
 footer {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+  margin-top: var(--space-section);
+  padding-top: var(--space-element);
+  border-top: 1px solid var(--color-border-default);
   text-align: center;
-  color: #666;
-  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
+}
+
+/* Icon utilities */
+.icon-invertible {
+  transition: filter 0.2s;
+}
+
+@media (prefers-color-scheme: dark) {
+  .icon-invertible {
+    filter: invert(1) brightness(0.9);
+  }
 }
\ No newline at end of file
diff --git a/posts/drafts/remove-tracking-params-from-links.md b/posts/drafts/remove-tracking-params-from-links.md
index 04523fc..3635bcf 100644
--- a/posts/drafts/remove-tracking-params-from-links.md
+++ b/posts/drafts/remove-tracking-params-from-links.md
@@ -1,4 +1,3 @@
-
 ## Your internet traffic is being tracked
 
 When you open up your phone and click on or share links though websites and applications websites are secretly injecting tracking information into the pages.
@@ -19,17 +18,17 @@ TODO: explain why that is a bad thing for privacy, and personal life
 
 <style>
 .url-container {
-  margin: 1em 0;
+  margin: var(--space-element) 0;
 }
 
 .url-example {
   font-family: monospace;
   font-size: 1.2em;
-  padding: 1em;
-  background: var(--code-background, #f5f5f5);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
-  margin-bottom: 1em;
+  padding: var(--space-element);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
+  margin-bottom: var(--space-element);
   overflow-x: auto;
   white-space: nowrap;
 }
@@ -44,60 +43,60 @@ TODO: explain why that is a bad thing for privacy, and personal life
   display: flex;
   flex-direction: column;
   gap: 0.75em;
-  padding: 1em;
-  background: var(--code-background, #f5f5f5);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
+  padding: var(--space-element);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
 }
 
 .url-legend-item {
   display: flex;
   align-items: flex-start;
-  gap: 0.5em;
+  gap: var(--space-tight);
 }
 
 .url-legend-item .url-legend-label {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold, 600);
   min-width: 8em;
 }
 
 .url-legend-item .url-legend-desc {
-  color: #666;
-  font-size: 0.9em;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
 }
 
 .url-required {
-  color: #dc2626;
+  color: var(--color-legend-5);
   font-size: 0.7em;
   vertical-align: super;
-  font-weight: bold;
+  font-weight: var(--font-weight-bold);
 }
 
 .url-legend-color {
   width: 1em;
   height: 1em;
-  border-radius: 3px;
+  border-radius: var(--radius-inline);
   flex-shrink: 0;
   margin-top: 0.2em;
 }
 
-.url-part-protocol { color: #db2777; }
-.url-legend-protocol { background: #db2777; }
+.url-part-protocol { color: var(--color-legend-1); }
+.url-legend-protocol { background: var(--color-legend-1); }
 
-.url-part-hostname { color: #2563eb; }
-.url-legend-hostname { background: #2563eb; }
+.url-part-hostname { color: var(--color-legend-2); }
+.url-legend-hostname { background: var(--color-legend-2); }
 
-.url-part-port { color: #0891b2; }
-.url-legend-port { background: #0891b2; }
+.url-part-port { color: var(--color-legend-3); }
+.url-legend-port { background: var(--color-legend-3); }
 
-.url-part-path { color: #16a34a; }
-.url-legend-path { background: #16a34a; }
+.url-part-path { color: var(--color-legend-4); }
+.url-legend-path { background: var(--color-legend-4); }
 
-.url-part-query { color: #dc2626; }
-.url-legend-query { background: #dc2626; }
+.url-part-query { color: var(--color-legend-5); }
+.url-legend-query { background: var(--color-legend-5); }
 
-.url-part-fragment { color: #9333ea; }
-.url-legend-fragment { background: #9333ea; }
+.url-part-fragment { color: var(--color-legend-6); }
+.url-legend-fragment { background: var(--color-legend-6); }
 
 /* Cross-highlighting using :has() - no JavaScript needed */
 .url-container:has([data-part]:hover) [data-part] { opacity: 0.4; }
@@ -121,9 +120,9 @@ TODO: explain why that is a bad thing for privacy, and personal life
 .url-container:has(.url-example [data-part="query"]:hover) .url-legend [data-part="query"],
 .url-container:has(.url-example [data-part="fragment"]:hover) .url-legend [data-part="fragment"] {
   opacity: 1 !important;
-  padding: 0.5em 0.75em;
-  margin: -0.5em -0.75em;
-  border-radius: 0.5em;
+  padding: var(--space-tight) 0.75em;
+  margin: calc(-1 * var(--space-tight)) -0.75em;
+  border-radius: var(--radius-block);
   box-shadow: 
     inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
     0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
@@ -139,7 +138,7 @@ TODO: explain why that is a bad thing for privacy, and personal life
 .url-container:has(.url-legend [data-part="query"]:hover) .url-example [data-part="query"],
 .url-container:has(.url-legend [data-part="fragment"]:hover) .url-example [data-part="fragment"] {
   opacity: 1 !important;
-  border-radius: 0.25em;
+  border-radius: var(--radius-micro, 0.25em);
   box-shadow: 
     inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
     0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
@@ -222,17 +221,17 @@ Query parameters are a part of a URL that are used to encode some data about a p
 
 <style>
 .query-container {
-  margin: 1em 0;
+  margin: var(--space-element) 0;
 }
 
 .query-example {
   font-family: monospace;
   font-size: 1.2em;
-  padding: 1em;
-  background: var(--code-background, #f5f5f5);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
-  margin-bottom: 1em;
+  padding: var(--space-element);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
+  margin-bottom: var(--space-element);
   overflow-x: auto;
   white-space: nowrap;
 }
@@ -247,20 +246,20 @@ Query parameters are a part of a URL that are used to encode some data about a p
   display: flex;
   flex-direction: column;
   gap: 0.75em;
-  padding: 1em;
-  background: var(--code-background, #f5f5f5);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
+  padding: var(--space-element);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
 }
 
 .query-legend-item {
   display: flex;
   align-items: flex-start;
-  gap: 0.5em;
+  gap: var(--space-tight);
 }
 
 .query-legend-item .query-legend-label {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold, 600);
   min-width: 8em;
 }
 
@@ -269,38 +268,38 @@ Query parameters are a part of a URL that are used to encode some data about a p
 }
 
 .query-legend-item .query-legend-desc {
-  color: #666;
-  font-size: 0.9em;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-small);
 }
 
 .query-legend-color {
   width: 1em;
   height: 1em;
-  border-radius: 3px;
+  border-radius: var(--radius-inline);
   flex-shrink: 0;
   margin-top: 0.2em;
 }
 
-/* Structure colors - each UNIQUE */
-.query-part-delimiter { color: #db2777; }
-.query-legend-delimiter { background: #db2777; }
+/* Structure colors - using legend color system */
+.query-part-delimiter { color: var(--color-legend-1); }
+.query-legend-delimiter { background: var(--color-legend-1); }
 
-.query-part-key { color: #2563eb; }
-.query-legend-key { background: #2563eb; }
+.query-part-key { color: var(--color-legend-2); }
+.query-legend-key { background: var(--color-legend-2); }
 
-.query-part-equals { color: #ca8a04; }
-.query-legend-equals { background: #ca8a04; }
+.query-part-equals { color: var(--color-legend-7); }
+.query-legend-equals { background: var(--color-legend-7); }
 
-.query-part-value { color: #16a34a; }
-.query-legend-value { background: #16a34a; }
+.query-part-value { color: var(--color-legend-4); }
+.query-legend-value { background: var(--color-legend-4); }
 
-.query-part-separator { color: #9333ea; }
-.query-legend-separator { background: #9333ea; }
+.query-part-separator { color: var(--color-legend-6); }
+.query-legend-separator { background: var(--color-legend-6); }
 
 /* Parameter group highlighting in URL */
 .query-param-group {
   display: inline;
-  border-radius: 0.25em;
+  border-radius: var(--radius-micro, 0.25em);
   transition: box-shadow 0.2s, background 0.2s;
 }
 
@@ -326,9 +325,9 @@ Query parameters are a part of a URL that are used to encode some data about a p
 .query-container:has(.query-example [data-qpart="value"]:hover) .query-legend [data-qpart="value"],
 .query-container:has(.query-example [data-qpart="separator"]:hover) .query-legend [data-qpart="separator"] {
   opacity: 1 !important;
-  padding: 0.5em 0.75em;
-  margin: -0.5em -0.75em;
-  border-radius: 0.5em;
+  padding: var(--space-tight) 0.75em;
+  margin: calc(-1 * var(--space-tight)) -0.75em;
+  border-radius: var(--radius-block);
   box-shadow: 
     inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
     0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
@@ -341,9 +340,9 @@ Query parameters are a part of a URL that are used to encode some data about a p
 .query-container:has(.query-example [data-qparam="color"]:hover) .query-legend [data-qparam="color"],
 .query-container:has(.query-example [data-qparam="utm"]:hover) .query-legend [data-qparam="utm"] {
   opacity: 1 !important;
-  padding: 0.5em 0.75em;
-  margin: -0.5em -0.75em;
-  border-radius: 0.5em;
+  padding: var(--space-tight) 0.75em;
+  margin: calc(-1 * var(--space-tight)) -0.75em;
+  border-radius: var(--radius-block);
   box-shadow: 
     inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
     0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
@@ -358,7 +357,7 @@ Query parameters are a part of a URL that are used to encode some data about a p
 .query-container:has(.query-legend [data-qpart="value"]:hover) .query-example [data-qpart="value"],
 .query-container:has(.query-legend [data-qpart="separator"]:hover) .query-example [data-qpart="separator"] {
   opacity: 1 !important;
-  border-radius: 0.25em;
+  border-radius: var(--radius-micro, 0.25em);
   box-shadow: 
     inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
     0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
@@ -370,7 +369,7 @@ Query parameters are a part of a URL that are used to encode some data about a p
 .query-container:has(.query-legend [data-qparam="size"]:hover) .query-example .query-param-group[data-qparam="size"],
 .query-container:has(.query-legend [data-qparam="color"]:hover) .query-example .query-param-group[data-qparam="color"],
 .query-container:has(.query-legend [data-qparam="utm"]:hover) .query-example .query-param-group[data-qparam="utm"] {
-  border-radius: 0.25em;
+  border-radius: var(--radius-micro, 0.25em);
   box-shadow: 
     inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
     0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
@@ -386,26 +385,26 @@ Query parameters are a part of a URL that are used to encode some data about a p
 }
 
 .query-legend-section {
-  margin-top: 1em;
+  margin-top: var(--space-element);
   padding-top: 0.75em;
-  border-top: 1px solid var(--border-color, #ddd);
+  border-top: 1px solid var(--color-border-default);
 }
 
 .query-legend-section-title {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold, 600);
   font-size: 0.85em;
-  color: #666;
-  margin-bottom: 0.5em;
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-tight);
 }
 
 /* Parameter legend labels - styled as code blocks */
 .query-param-label {
   font-family: monospace;
-  font-size: 0.9em;
-  background: var(--inline-code-background, rgba(0, 0, 0, 0.06));
+  font-size: var(--font-size-small);
+  background: var(--color-bg-surface);
   padding: 0.15em 0.4em;
-  border-radius: 4px;
-  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+  border-radius: var(--radius-inline);
+  border: 1px solid var(--color-border-default);
   min-width: auto;
 }
 </style>
@@ -524,7 +523,7 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 <style>
 /* Browser/Platform Detection Styles */
 .protect-section {
-  margin: 1.5em 0;
+  margin: var(--space-block) 0;
 }
 
 .protect-section h3 {
@@ -535,11 +534,11 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 .extension-card {
   display: flex;
   align-items: flex-start;
-  gap: 1em;
-  padding: 1em;
-  background: var(--code-background, #f5f5f5);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
+  gap: var(--space-element);
+  padding: var(--space-element);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
   margin-bottom: 0.75em;
   text-decoration: none;
   color: inherit;
@@ -547,8 +546,8 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 }
 
 .extension-card:hover {
-  border-color: var(--secondary-color, #3498db);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-card);
 }
 
 .extension-info {
@@ -556,25 +555,25 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 }
 
 .extension-name {
-  font-weight: 600;
-  color: var(--primary-color, #2c3e50);
-  margin-bottom: 0.25em;
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-heading);
+  margin-bottom: var(--space-micro);
 }
 
 .extension-desc {
-  font-size: 0.9em;
-  color: #666;
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
   margin: 0;
 }
 
 .extension-badge {
   display: inline-block;
   font-size: 0.75em;
-  padding: 0.2em 0.5em;
-  border-radius: 4px;
-  background: var(--secondary-color, #3498db);
+  padding: 0.2em var(--space-tight);
+  border-radius: var(--radius-inline);
+  background: var(--color-text-link);
   color: white;
-  margin-left: 0.5em;
+  margin-left: var(--space-tight);
   vertical-align: middle;
 }
 
@@ -603,14 +602,14 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 .browser-dropdown-container .expandable summary,
 .platform-dropdown-container .expandable summary {
   background: none;
-  padding: 0.5em 0;
+  padding: var(--space-tight) 0;
   border-bottom: none;
 }
 
 .browser-dropdown-container .expandable[open] summary,
 .platform-dropdown-container .expandable[open] summary {
   border-bottom: none;
-  margin-bottom: 0.5em;
+  margin-bottom: var(--space-tight);
 }
 
 /* Firefox detection using -moz prefixed properties */
@@ -667,11 +666,11 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 .app-card {
   display: flex;
   align-items: flex-start;
-  gap: 1em;
-  padding: 1em;
-  background: var(--code-background, #f5f5f5);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
+  gap: var(--space-element);
+  padding: var(--space-element);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-card);
   margin-bottom: 0.75em;
   text-decoration: none;
   color: inherit;
@@ -679,8 +678,8 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 }
 
 .app-card:hover {
-  border-color: var(--secondary-color, #3498db);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-card);
 }
 
 .app-info {
@@ -688,36 +687,36 @@ The most basic low tech way to remove the trackers is to just delete them yourse
 }
 
 .app-name {
-  font-weight: 600;
-  color: var(--primary-color, #2c3e50);
-  margin-bottom: 0.25em;
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-heading);
+  margin-bottom: var(--space-micro);
 }
 
 .app-desc {
-  font-size: 0.9em;
-  color: #666;
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
   margin: 0;
 }
 
 .app-platforms {
   display: flex;
-  gap: 0.5em;
-  margin-top: 0.5em;
+  gap: var(--space-tight);
+  margin-top: var(--space-tight);
 }
 
 .platform-tag {
   font-size: 0.75em;
-  padding: 0.2em 0.5em;
-  border-radius: 4px;
-  background: #e0e0e0;
-  color: #444;
+  padding: 0.2em var(--space-tight);
+  border-radius: var(--radius-inline);
+  background: var(--color-border-default);
+  color: var(--color-text-primary);
 }
 
 /* Section dividers */
 .protect-divider {
-  margin: 2em 0;
+  margin: var(--space-section) 0;
   border: none;
-  border-top: 1px solid var(--border-color, #ddd);
+  border-top: 1px solid var(--color-border-default);
 }
 </style>