From c644d7372d4e2f83a7c75dd320389e0f26dd76b8 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 19 Feb 2026 21:13:07 +0200
Subject: [PATCH] refactor: extract markdown typography colors into CSS
 variables

---
 src/styles.css | 114 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 75 insertions(+), 39 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 4339437..1839b92 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -64,7 +64,43 @@
   --color-accent-small: #8BA3FF;     /* for small text (11px) accent uses */
   --color-accent-muted: rgba(107, 138, 255, 0.12);
   --color-accent-subtle: rgba(107, 138, 255, 0.06);
-  
+
+  /* Markdown typography */
+  --color-md-h1: #F5F6F7;
+  --color-md-h2: #EDEEF0;
+  --color-md-h3: #E4E5E8;
+  --color-md-h4: #D8DADE;
+  --color-md-h5: #CBCED3;
+  --color-md-h6: #BCC1C8;
+  --color-md-heading: #F0F1F3;
+  --color-md-paragraph: #C8CCD0;
+  --color-md-link: #93B8F9;
+  --color-md-link-underline: rgba(147, 184, 249, 0.3);
+  --color-md-link-hover: #A8C6FA;
+  --color-md-link-hover-underline: rgba(168, 198, 250, 0.7);
+  --color-md-marker: #93B8F9;
+  --color-md-blockquote-border: #93B8F9;
+  --color-md-blockquote-bg: rgba(147, 184, 249, 0.04);
+  --color-md-blockquote-text: #BFC3C8;
+  --color-md-code-inline: #E8B89E;
+  --color-md-code-inline-bg: rgba(255, 255, 255, 0.06);
+  --color-md-code-block-bg: #1A1D24;
+  --color-md-code-block-border: rgba(255, 255, 255, 0.06);
+  --color-md-code-text: #E4E6EB;
+  --color-md-table-header-bg: rgba(124, 169, 247, 0.08);
+  --color-md-table-border: rgba(255, 255, 255, 0.06);
+  --color-md-table-cell: #C8CCD0;
+  --color-md-table-stripe: rgba(30, 33, 40, 0.4);
+  --color-md-table-hover: rgba(124, 169, 247, 0.05);
+  --color-md-hr: rgba(255, 255, 255, 0.1);
+  --color-md-mark-bg: rgba(251, 191, 36, 0.2);
+  --color-md-mark-text: #FBBF24;
+  --color-md-comment: #7C8390;
+  --color-md-highlight-bg: rgba(251, 191, 36, 0.3);
+  --color-md-highlight-active-bg: rgba(251, 191, 36, 0.6);
+  --color-md-highlight-active-outline: rgba(251, 191, 36, 0.7);
+  --color-md-welcome-btn: #4A6AE5;
+
   /* Borders */
   --color-border-subtle: rgba(255, 255, 255, 0.04);
   --color-border: rgba(255, 255, 255, 0.08);
@@ -782,7 +818,7 @@ html, body, #root {
 
 .welcome-button {
   padding: 12px 28px;
-  background-color: #4A6AE5;
+  background-color: var(--color-md-welcome-btn);
   color: white;
   border: none;
   border-radius: 8px;
@@ -1130,7 +1166,7 @@ html, body, #root {
 .markdown-content h4,
 .markdown-content h5,
 .markdown-content h6 {
-  color: #F0F1F3;
+  color: var(--color-md-heading);
   font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   font-weight: 600;
   line-height: 1.2;
@@ -1144,7 +1180,7 @@ html, body, #root {
   font-size: 2.35rem;
   font-weight: 700;
   letter-spacing: -0.03em;
-  color: #F5F6F7;
+  color: var(--color-md-h1);
   margin-top: 0;
   margin-bottom: 0.8em;
   padding-bottom: 0.55em;
@@ -1153,7 +1189,7 @@ html, body, #root {
 
 .markdown-content h2 {
   font-size: 1.7rem;
-  color: #EDEEF0;
+  color: var(--color-md-h2);
   margin-top: 1.85em;
   padding-bottom: 0.4em;
   border-bottom: 1px solid var(--color-border-subtle);
@@ -1161,47 +1197,47 @@ html, body, #root {
 
 .markdown-content h3 {
   font-size: 1.3rem;
-  color: #E4E5E8;
+  color: var(--color-md-h3);
 }
 
 .markdown-content h4 {
   font-size: 1.15rem;
   font-weight: 500;
-  color: #D8DADE;
+  color: var(--color-md-h4);
 }
 
 .markdown-content h5 {
   font-size: 1rem;
   font-weight: 500;
-  color: #CBCED3;
+  color: var(--color-md-h5);
 }
 
 .markdown-content h6 {
   font-size: 0.92rem;
   font-weight: 500;
-  color: #BCC1C8;
+  color: var(--color-md-h6);
 }
 
 /* Paragraphs with refined spacing */
 .markdown-content p {
   margin-bottom: 1.65em;
-  color: #C8CCD0;
+  color: var(--color-md-paragraph);
   line-height: 1.7;
 }
 
 /* Links with subtle persistent underline */
 .markdown-content a {
-  color: #93B8F9;
+  color: var(--color-md-link);
   text-decoration: underline;
-  text-decoration-color: rgba(147, 184, 249, 0.3);
+  text-decoration-color: var(--color-md-link-underline);
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
   transition: color 0.2s ease, text-decoration-color 0.2s ease;
 }
 
 .markdown-content a:hover {
-  color: #A8C6FA;
-  text-decoration-color: rgba(168, 198, 250, 0.7);
+  color: var(--color-md-link-hover);
+  text-decoration-color: var(--color-md-link-hover-underline);
   text-decoration-thickness: 1.5px;
 }
 
@@ -1234,13 +1270,13 @@ html, body, #root {
 
 .markdown-content li {
   margin-bottom: 0.45em;
-  color: #C8CCD0;
+  color: var(--color-md-paragraph);
   line-height: 1.65;
   list-style-position: outside;
 }
 
 .markdown-content li::marker {
-  color: #93B8F9;
+  color: var(--color-md-marker);
 }
 
 .markdown-content ol li::marker {
@@ -1321,17 +1357,17 @@ html, body, #root {
 .markdown-content blockquote {
   margin: 1.65em 0;
   padding: 1.1em 1.4em;
-  border-left: 3px solid #93B8F9;
-  background-color: rgba(124, 169, 247, 0.04);
+  border-left: 3px solid var(--color-md-blockquote-border);
+  background-color: var(--color-md-blockquote-bg);
   border-radius: 0 8px 8px 0;
-  color: #BFC3C8;
+  color: var(--color-md-blockquote-text);
   font-style: normal;
   line-height: 1.7;
 }
 
 .markdown-content blockquote p {
   margin-bottom: 0.5em;
-  color: #BFC3C8;
+  color: var(--color-md-blockquote-text);
 }
 
 .markdown-content blockquote p:last-child {
@@ -1340,26 +1376,26 @@ html, body, #root {
 
 /* Inline code */
 .markdown-content code:not(pre code) {
-  background-color: rgba(255, 255, 255, 0.06);
+  background-color: var(--color-md-code-inline-bg);
   padding: 0.22em 0.48em;
   border-radius: 5px;
   font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
   font-size: 0.88em;
   font-weight: 400;
-  color: #E8B89E;
+  color: var(--color-md-code-inline);
   letter-spacing: -0.02em;
 }
 
 /* Code blocks */
 .markdown-content pre {
-  background-color: #1A1D24;
+  background-color: var(--color-md-code-block-bg);
   border-radius: 10px;
   padding: 1.35em 1.6em;
   margin: 1.65em 0;
   overflow-x: visible;
   overflow-wrap: break-word;
   white-space: pre-wrap;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--color-md-code-block-border);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
 }
 
@@ -1367,7 +1403,7 @@ html, body, #root {
   font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
   font-size: 14px;
   line-height: 1.7;
-  color: #E4E6EB;
+  color: var(--color-md-code-text);
   background: none;
   padding: 0;
   letter-spacing: -0.02em;
@@ -1379,7 +1415,7 @@ html, body, #root {
 /* Syntax highlighting - refined colors */
 .hljs {
   background: transparent !important;
-  color: #E4E6EB;
+  color: var(--color-md-code-text);
 }
 
 .hljs-keyword,
@@ -1409,7 +1445,7 @@ html, body, #root {
 .hljs-quote,
 .hljs-deletion,
 .hljs-meta {
-  color: #7C8390;
+  color: var(--color-md-comment);
   font-style: italic;
 }
 
@@ -1443,7 +1479,7 @@ html, body, #root {
   font-size: 14px;
   border-radius: 10px;
   overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--color-md-table-border);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
@@ -1451,11 +1487,11 @@ html, body, #root {
 .markdown-content td {
   padding: 14px 18px;
   text-align: left;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--color-border-subtle);
 }
 
 .markdown-content th {
-  background-color: rgba(124, 169, 247, 0.08);
+  background-color: var(--color-md-table-header-bg);
   font-weight: 600;
   color: var(--color-text-primary);
   font-size: 12.5px;
@@ -1464,7 +1500,7 @@ html, body, #root {
 }
 
 .markdown-content td {
-  color: #C8CCD0;
+  color: var(--color-md-table-cell);
 }
 
 .markdown-content tr:last-child td {
@@ -1472,18 +1508,18 @@ html, body, #root {
 }
 
 .markdown-content tr:nth-child(even) td {
-  background-color: rgba(30, 33, 40, 0.4);
+  background-color: var(--color-md-table-stripe);
 }
 
 .markdown-content tr:hover td {
-  background-color: rgba(124, 169, 247, 0.05);
+  background-color: var(--color-md-table-hover);
 }
 
 /* Horizontal rule — gradient fade */
 .markdown-content hr {
   border: none;
   height: 1px;
-  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
+  background: linear-gradient(to right, transparent, var(--color-md-hr), transparent);
   margin: 2.5em 0;
 }
 
@@ -1526,8 +1562,8 @@ html, body, #root {
 
 /* Mark/highlight */
 .markdown-content mark {
-  background-color: rgba(251, 191, 36, 0.2);
-  color: #FBBF24;
+  background-color: var(--color-md-mark-bg);
+  color: var(--color-md-mark-text);
   padding: 0.18em 0.38em;
   border-radius: 4px;
   font-weight: 500;
@@ -1559,7 +1595,7 @@ html, body, #root {
 
 /* Search highlights — high specificity to override Tailwind reset */
 span.search-highlight {
-  background-color: rgba(251, 191, 36, 0.3) !important;
+  background-color: var(--color-md-highlight-bg) !important;
   color: inherit !important;
   border-radius: 2px;
   padding: 1px 0;
@@ -1567,8 +1603,8 @@ span.search-highlight {
 }
 
 span.search-highlight.search-highlight-active {
-  background-color: rgba(251, 191, 36, 0.6) !important;
-  outline: 2px solid rgba(251, 191, 36, 0.7);
+  background-color: var(--color-md-highlight-active-bg) !important;
+  outline: 2px solid var(--color-md-highlight-active-outline);
   outline-offset: 1px;
 }