From c7a4ba0053822542a89ffb914b25d484f6163e41 Mon Sep 17 00:00:00 2001
From: Richard Dern <gitea.local.richard@dern.ovh>
Date: Tue, 16 Sep 2025 01:54:46 +0200
Subject: [PATCH] =?UTF-8?q?Factorise=20la=20palette=20du=20th=C3=A8me=20pa?=
 =?UTF-8?q?r=20d=C3=A9faut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/default/assets/css/article.css         |   4 +-
 themes/default/assets/css/base.css            |   9 +-
 themes/default/assets/css/footer.css          |  16 +--
 .../assets/css/generated/sections-colors.css  |   2 +-
 themes/default/assets/css/header.css          |  30 ++---
 themes/default/assets/css/list.css            |   8 +-
 themes/default/assets/css/pagination.css      |  16 +--
 themes/default/assets/css/timeline.css        |  18 +--
 themes/default/assets/css/typography.css      | 116 +++++++++---------
 themes/default/assets/css/variables.css       |  34 ++++-
 10 files changed, 142 insertions(+), 111 deletions(-)

diff --git a/themes/default/assets/css/article.css b/themes/default/assets/css/article.css
index 0dd4fcf6..f47f7cb8 100644
--- a/themes/default/assets/css/article.css
+++ b/themes/default/assets/css/article.css
@@ -22,7 +22,7 @@ article {
             transform: rotate(-90deg) translateX(100%);
 
             font-size: 0.75rem;
-            color: #bbb;
+            color: var(--text-soft);
             background: rgba(0, 0, 0, 0.75);
             padding: 0.4rem 0.6rem;
             border-radius: 6px 6px 0 0;
@@ -71,4 +71,4 @@ article {
     article .article-content {
         padding: 2rem 0;
     }
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/base.css b/themes/default/assets/css/base.css
index c4264505..1843684d 100644
--- a/themes/default/assets/css/base.css
+++ b/themes/default/assets/css/base.css
@@ -4,7 +4,12 @@ body {
     font-size: 1rem;
     min-height: 100vh;
     height: auto;
-    background: #121212 linear-gradient(to bottom, #232323 0%, #1a1a1a 50%, #121212 100%);
+    background: var(--body-bg-color) linear-gradient(
+        to bottom,
+        var(--body-bg-color2) 0%,
+        var(--body-bg-color3) 50%,
+        var(--body-bg-color) 100%
+    );
     background-size: 100% 100%;
     position: relative;
     display: flex;
@@ -36,4 +41,4 @@ main {
     margin-left: 0.2em;
     vertical-align: baseline;
     text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/footer.css b/themes/default/assets/css/footer.css
index d40ac0e1..eafaa49e 100644
--- a/themes/default/assets/css/footer.css
+++ b/themes/default/assets/css/footer.css
@@ -8,20 +8,20 @@ body>footer {
     border-radius: 2rem 2rem 0 0;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
     text-align: center;
-    color: #d0d0d0;
+    color: var(--text-dim);
     border-top: 2px solid rgba(255, 255, 255, 0.2);
 
     p {
         font-size: 0.85rem;
-        color: #999;
+        color: var(--text-muted2);
         margin-top: 1rem;
         text-align: center;
 
         a {
-            color: #8ab4f8;
+            color: var(--link-blue);
 
             &:hover {
-                color: #fff;
+                color: var(--text-white);
             }
         }
     }
@@ -30,14 +30,14 @@ body>footer {
         margin-bottom: 1.5rem;
 
         a {
-            color: #8ab4f8;
+            color: var(--link-blue);
             text-decoration: none;
             font-weight: 600;
             transition: color 0.3s ease-in-out, background 0.2s;
             white-space: nowrap;
 
             &:hover {
-                color: #fff;
+                color: var(--text-white);
                 background: rgba(138, 180, 248, 0.2);
                 border-radius: 3px;
             }
@@ -70,7 +70,7 @@ body>footer {
                     li {
                         padding: 0.2rem 0;
                         font-size: 0.9rem;
-                        color: #b0b0b0;
+                        color: var(--footer-text-muted);
                     }
                 }
             }
@@ -83,4 +83,4 @@ body>footer {
             border-radius: 4px;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/generated/sections-colors.css b/themes/default/assets/css/generated/sections-colors.css
index a0c66324..800afa28 100644
--- a/themes/default/assets/css/generated/sections-colors.css
+++ b/themes/default/assets/css/generated/sections-colors.css
@@ -7,7 +7,7 @@ color: var(--section-color);
 color: var(--section-color);
 }
 .section-{{ $section }} a:hover {
-color: #fff;
+color: var(--text-white);
 background-color: var(--section-color);
 }
 {{- end }}
diff --git a/themes/default/assets/css/header.css b/themes/default/assets/css/header.css
index 6032e4d5..7a075550 100644
--- a/themes/default/assets/css/header.css
+++ b/themes/default/assets/css/header.css
@@ -28,7 +28,7 @@ main>header {
         display: flex;
         flex-direction: column;
         justify-content: center;
-        color: #fff;
+        color: var(--text-white);
     }
 
     .page-title {
@@ -60,7 +60,7 @@ main>header {
     padding: 0.4rem 1rem;
     height: 2.5rem;
 
-    background-color: #2a2a2a;
+    background-color: var(--surface-elevated);
 
     background-image:
         /* Stries métalliques irrégulières */
@@ -105,8 +105,8 @@ main>header {
             justify-content: center;
 
             border-radius: 50%;
-            background: #2a2a2a;
-            color: #ccc;
+            background: var(--surface-elevated);
+            color: var(--text-light);
 
             font-size: 1rem;
             text-decoration: none;
@@ -118,8 +118,8 @@ main>header {
 
         >a:hover,
         summary:hover {
-            background-color: #3a3a3a;
-            color: white;
+            background-color: var(--surface-elevated-hover);
+            color: var(--text-white);
         }
 
         summary {
@@ -130,8 +130,8 @@ main>header {
         }
 
         details[open] summary {
-            background-color: #444;
-            color: white;
+            background-color: var(--border-dark);
+            color: var(--text-white);
         }
 
         /* Empêche l'effet de flèche par défaut dans WebKit */
@@ -155,7 +155,7 @@ main>header {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: #d0d0d0;
+        color: var(--text-dim);
         flex: 1;
     }
 
@@ -170,14 +170,14 @@ main>header {
             max-height: 50vh;
             right: 0;
             margin: 0 auto;
-            background-color: #2a2a2a;
-            border: 1px solid #3a3a3a;
+            background-color: var(--surface-elevated);
+            border: 1px solid var(--border-panel);
             border-radius: 0.5rem;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
             overflow: auto;
             padding: 1rem;
             scrollbar-width: thin;
-            scrollbar-color: #555 #2a2a2a;
+            scrollbar-color: var(--scrollbar-thumb) var(--surface-elevated);
         }
 
         #TableOfContents ul {
@@ -191,14 +191,14 @@ main>header {
 
         #TableOfContents a {
             text-decoration: none;
-            color: #ccc;
+            color: var(--text-light);
             transition: color 0.2s ease;
             display: block;
         }
 
         #TableOfContents a:hover {
-            color: #64c7ff;
+            color: var(--accent-blue);
             text-decoration: underline;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/list.css b/themes/default/assets/css/list.css
index 5662193a..819a5da5 100644
--- a/themes/default/assets/css/list.css
+++ b/themes/default/assets/css/list.css
@@ -63,8 +63,8 @@
     position: absolute;
     top: 160px;
     left: 0;
-    background: #b16a00;
-    color: white;
+    background: var(--accent-orange);
+    color: var(--text-white);
     font-weight: bold;
     font-size: 0.75rem;
     padding: 4px 12px;
@@ -92,13 +92,13 @@
 
 /* Titre devient bleu au survol */
 .article-card:hover .article-title {
-    color: #8ab4f8;
+    color: var(--link-blue);
 }
 
 /* Métadonnées (section + durée de lecture) bien ancrées en bas */
 .article-meta {
     font-size: 0.8rem;
-    color: #bbb;
+    color: var(--text-soft);
     display: flex;
     justify-content: space-between;
     width: 100%;
diff --git a/themes/default/assets/css/pagination.css b/themes/default/assets/css/pagination.css
index faba9580..021f6968 100644
--- a/themes/default/assets/css/pagination.css
+++ b/themes/default/assets/css/pagination.css
@@ -21,7 +21,7 @@
 
 .pagination-bar a,
 .pagination-bar .disabled {
-    color: #8ab4f8;
+    color: var(--link-blue);
     text-decoration: none;
     padding: 0.5rem 1rem;
     border-radius: 6px;
@@ -30,7 +30,7 @@
 }
 
 .pagination-bar a:hover {
-    color: #fff;
+    color: var(--text-white);
     background: rgba(138, 180, 248, 0.2);
 }
 
@@ -51,7 +51,7 @@
     &[open] {
         summary {
             background: rgba(138, 180, 248, 0.2);
-            color: #fff;
+            color: var(--text-white);
             border-color: rgba(138, 180, 248, 0.4);
         }
     }
@@ -102,10 +102,10 @@
 
     summary~* {
         position: absolute;
-        border: 1px solid #333;
+        border: 1px solid var(--border-darker);
         border-radius: 0.5rem;
-        background: #111;
-        box-shadow: 0 1px 1em #000;
+        background: var(--bg-dark);
+        box-shadow: 0 1px 1em var(--shadow-color);
         max-height: 50vh;
         overflow-y: auto;
         margin: 0;
@@ -137,7 +137,7 @@
     }
 
     li span.current {
-        color: white;
+        color: var(--text-white);
         font-weight: bold;
         background-color: rgba(255, 255, 255, 0.1);
     }
@@ -187,4 +187,4 @@
 .disabled {
     opacity: 0.4;
     pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/timeline.css b/themes/default/assets/css/timeline.css
index e9b894fb..e9d5d718 100644
--- a/themes/default/assets/css/timeline.css
+++ b/themes/default/assets/css/timeline.css
@@ -18,8 +18,8 @@
 .timeline .year>span {
     grid-column: 1;
     font-weight: bold;
-    color: #eee;
-    background: #2b2b2b;
+    color: var(--text-softest);
+    background: var(--surface-contrast);
     padding: 0.2rem 0.5rem;
     border-radius: 0.5rem;
     position: sticky;
@@ -34,8 +34,8 @@
 .timeline .month>span {
     grid-column: 2;
     font-style: italic;
-    color: #bceeff;
-    background: #2d3a3f;
+    color: var(--accent-blue-light);
+    background: var(--surface-accent);
     padding: 0.2rem 0.5rem;
     border-radius: 0.5rem;
     position: sticky;
@@ -49,8 +49,8 @@
 
 .timeline .day>span {
     grid-column: 3;
-    color: #ccc;
-    background: #333;
+    color: var(--text-light);
+    background: var(--surface-muted);
     padding: 0.2rem 0.5rem;
     border-radius: 0.5rem;
     position: sticky;
@@ -82,12 +82,12 @@
 
 .timeline .day>.list a {
     text-decoration: none;
-    color: #ddd;
+    color: var(--text-softer);
     font-weight: 500;
     display: block;
 }
 
 .timeline .day>.list a:hover {
-    color: #2da8f4;
+    color: var(--accent-blue-hover);
     text-decoration: underline;
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/typography.css b/themes/default/assets/css/typography.css
index 2aa9457e..cc807744 100644
--- a/themes/default/assets/css/typography.css
+++ b/themes/default/assets/css/typography.css
@@ -7,7 +7,7 @@ article {
 .article-content,
 article aside {
     a {
-        color: #8ab4f8;
+        color: var(--link-blue);
         text-decoration: underline;
         text-underline-offset: 2px;
         text-decoration-thickness: 1.5px;
@@ -15,40 +15,40 @@ article aside {
 
         &:hover,
         &:focus {
-            color: #64c7ff;
+            color: var(--accent-blue);
             outline: none;
         }
 
         &:focus-visible {
-            outline: 2px solid #64c7ff;
+            outline: 2px solid var(--accent-blue);
             outline-offset: 3px;
         }
     }
 
     a.affiliated {
-        color: #e553ff;
+        color: var(--accent-purple-bright);
         /* or: gold */
         text-decoration: underline;
     }
 
     a.affiliated:hover,
     a.affiliated:focus {
-        color: #f6a7ff;
+        color: var(--accent-pink-bright);
     }
 
     a.external {
-        color: #f38c8c;
+        color: var(--heading-pink);
         /* or: gold */
         text-decoration: underline;
     }
 
     a.external:hover,
     a.external:focus {
-        color: #ffd8d8;
+        color: var(--accent-rose-light);
     }
 
     a.active {
-        color: #fff !important;
+        color: var(--text-white) !important;
     }
 
     abbr {
@@ -60,10 +60,10 @@ article aside {
         display: block;
         margin: 2em;
         padding: 1em 1.5em;
-        border-left: 4px solid #64c7ff;
+        border-left: 4px solid var(--accent-blue);
         background-color: rgba(255, 255, 255, 0.03);
         font-size: 0.9em;
-        color: #ccc;
+        color: var(--text-light);
         font-style: normal;
         border-radius: 0.5em;
         line-height: 1.6;
@@ -79,8 +79,8 @@ article aside {
     blockquote {
         margin: 2em 0;
         padding-left: 1.5em;
-        border-left: 4px solid #64c7ff;
-        color: #ccc;
+        border-left: 4px solid var(--accent-blue);
+        color: var(--text-light);
         font-style: italic;
         font-size: 1.1em;
         line-height: 1.6;
@@ -91,7 +91,7 @@ article aside {
             margin-top: 1em;
             font-style: normal;
             font-size: 0.9em;
-            color: #999;
+            color: var(--text-muted2);
             text-align: right;
         }
     }
@@ -100,7 +100,7 @@ article aside {
         display: grid;
         grid-template-columns: 40% 60%;
         row-gap: 0;
-        border: 1px solid #444;
+        border: 1px solid var(--border-dark);
         border-radius: 4px;
         overflow: hidden;
         margin: 2em 0;
@@ -110,37 +110,37 @@ article aside {
     dt,
     dd {
         padding: 0.6em 1em;
-        border-bottom: 1px solid #444;
+        border-bottom: 1px solid var(--border-dark);
     }
 
     /* Colonne de gauche */
     dt {
         font-weight: bold;
-        color: #fff;
-        border-right: 1px solid #444;
+        color: var(--text-white);
+        border-right: 1px solid var(--border-dark);
     }
 
     /* Colonne de droite */
     dd {
-        color: #ccc;
+        color: var(--text-light);
         line-height: 1.6;
     }
 
     /* Effet zébré sur les paires dt/dd */
     dl dt:nth-of-type(odd),
     dl dd:nth-of-type(odd) {
-        background-color: #222;
+        background-color: var(--surface-dark);
     }
 
     dl dt:nth-of-type(even),
     dl dd:nth-of-type(even) {
-        background-color: #1a1a1a;
+        background-color: var(--surface-overlay);
     }
 
     del {
         display: inline;
         text-decoration: line-through;
-        color: #d44;
+        color: var(--text-red);
         background-color: rgba(255, 0, 0, 0.1);
         padding: 0 0.2em;
         border-radius: 0.2em;
@@ -160,11 +160,11 @@ article aside {
         }
 
         &.spoiler {
-            border-left: 4px solid #888;
+            border-left: 4px solid var(--border-muted);
             background-color: rgba(255, 255, 255, 0.03);
 
             summary {
-                color: #aaa;
+                color: var(--text-muted);
 
                 &::before {
                     content: "⚠️ ";
@@ -173,16 +173,16 @@ article aside {
             }
 
             &[open] summary {
-                color: #fff;
+                color: var(--text-white);
             }
         }
 
         &.update {
-            border-left: 4px solid #64c7ff;
+            border-left: 4px solid var(--accent-blue);
             background-color: rgba(100, 199, 255, 0.1);
 
             summary {
-                color: #64c7ff;
+                color: var(--accent-blue);
 
                 &::before {
                     content: "🛈 ";
@@ -191,7 +191,7 @@ article aside {
             }
 
             &[open] summary {
-                color: #fff;
+                color: var(--text-white);
             }
         }
 
@@ -201,7 +201,7 @@ article aside {
 
             summary {
                 font-weight: normal;
-                color: #8ab4f8;
+                color: var(--link-blue);
                 text-decoration: underline dotted;
 
                 &::before {
@@ -210,7 +210,7 @@ article aside {
                 }
 
                 &:hover {
-                    color: #64c7ff;
+                    color: var(--accent-blue);
                 }
             }
 
@@ -223,7 +223,7 @@ article aside {
     dfn {
         font-style: italic;
         font-weight: normal;
-        border-bottom: 1px dashed #64c7ff;
+        border-bottom: 1px dashed var(--accent-blue);
         cursor: help;
         text-decoration: none;
     }
@@ -257,7 +257,7 @@ article aside {
         }
 
         figcaption {
-            color: #aaa;
+            color: var(--text-muted);
             margin-top: 0.5em;
             line-height: 1.4;
             font-style: italic;
@@ -265,7 +265,7 @@ article aside {
             font-size: 1rem;
 
             em {
-                color: #eee;
+                color: var(--text-softest);
             }
         }
     }
@@ -290,7 +290,7 @@ article aside {
         margin-right: 0.5em;
         vertical-align: text-bottom;
         /* ⬅ correction ici */
-        border: 2px solid #888;
+        border: 2px solid var(--border-muted);
         border-radius: 0.2em;
         background-color: transparent;
         position: relative;
@@ -303,7 +303,7 @@ article aside {
             left: 50%;
             transform: translate(-50%, -50%);
             /* ⬅ centrage parfait */
-            color: #64c7ff;
+            color: var(--accent-blue);
             font-weight: bold;
             font-size: 0.85em;
             /* ⬅ très léger ajustement */
@@ -319,7 +319,7 @@ article aside {
         display: inline;
         text-decoration: none;
         font-weight: bold;
-        color: #2c5;
+        color: var(--text-green);
         background-color: rgba(0, 255, 0, 0.1);
         padding: 0 0.2em;
         border-radius: 0.2em;
@@ -332,8 +332,8 @@ article aside {
         font-family: inherit;
         font-size: 0.9em;
         line-height: 1.2;
-        color: #aaa;
-        background-color: #111;
+        color: var(--text-muted);
+        background-color: var(--bg-dark);
         border-radius: 0.3em;
         box-shadow:
             0 0 6px rgba(255, 255, 255, 0.25),
@@ -378,7 +378,7 @@ article aside {
 
             &::before {
                 content: "•";
-                color: #64c7ff;
+                color: var(--accent-blue);
                 position: absolute;
                 left: 0;
                 top: 0.1em;
@@ -397,7 +397,7 @@ article aside {
         list-style: decimal;
 
         li::marker {
-            color: #9fd356;
+            color: var(--heading-green);
             font-variant-numeric: tabular-nums;
         }
     }
@@ -421,7 +421,7 @@ article aside {
     q {
         quotes: "«\00a0" " »" "“" "”";
         font-style: italic;
-        color: #aaa;
+        color: var(--text-muted);
 
         &::before {
             content: open-quote;
@@ -439,8 +439,8 @@ article aside {
         font-family: 'Courier New', monospace;
         font-size: 0.9em;
         line-height: 1.4;
-        color: #a8ff60;
-        background-color: #111;
+        color: var(--accent-green-bright);
+        background-color: var(--bg-dark);
         border-radius: 0.3em;
         box-shadow:
             0 0 1px rgba(0, 255, 0, 0.2),
@@ -452,8 +452,8 @@ article aside {
         display: block;
         padding: 1em;
         margin: 2em auto;
-        background-color: #111;
-        color: #a8ff60;
+        background-color: var(--bg-dark);
+        color: var(--accent-green-bright);
         border-radius: 0.5em;
         box-shadow:
             0 0 10px rgba(0, 255, 100, 0.05),
@@ -464,7 +464,7 @@ article aside {
     }
 
     strong {
-        color: white;
+        color: var(--text-white);
     }
 
     sub,
@@ -489,7 +489,7 @@ article aside {
         margin: 3em 0;
         font-size: 0.95em;
         line-height: 1.5;
-        border: 1px solid #444;
+        border: 1px solid var(--border-dark);
         background-color: rgba(255, 255, 255, 0.015);
         /* Suppression des coins arrondis */
         border-radius: 0;
@@ -497,13 +497,13 @@ article aside {
 
     thead {
         background-color: rgba(255, 255, 255, 0.04);
-        color: #fff;
+        color: var(--text-white);
         font-weight: bold;
     }
 
     thead th {
         padding: 0.75em 1em;
-        border: 1px solid #444;
+        border: 1px solid var(--border-dark);
         text-align: left;
         white-space: nowrap;
         background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
@@ -511,10 +511,10 @@ article aside {
 
     tbody td {
         padding: 0.75em 1em;
-        border: 1px solid #444;
+        border: 1px solid var(--border-dark);
         vertical-align: top;
         text-align: left;
-        color: #ccc;
+        color: var(--text-light);
         background-color: transparent;
         transition: background-color 0.2s;
     }
@@ -538,9 +538,9 @@ article aside {
     tfoot td {
         padding: 0.75em 1em;
         font-style: italic;
-        color: #aaa;
+        color: var(--text-muted);
         background-color: rgba(255, 255, 255, 0.02);
-        border: 1px solid #444;
+        border: 1px solid var(--border-dark);
     }
 }
 
@@ -561,7 +561,7 @@ aside {
         counter-increment: h2;
         margin: 2.2em 0 1em;
         font-size: 1.8em;
-        color: #64c7ff;
+        color: var(--accent-blue);
         scroll-margin-top: 4rem;
 
         &::before {
@@ -574,7 +574,7 @@ aside {
         counter-increment: h3;
         margin: 2em 0 0.8em;
         font-size: 1.5em;
-        color: #9fd356;
+        color: var(--heading-green);
         scroll-margin-top: 4rem;
 
         &::before {
@@ -587,7 +587,7 @@ aside {
         counter-increment: h4;
         margin: 1.8em 0 0.7em;
         font-size: 1.3em;
-        color: #e6c84f;
+        color: var(--heading-yellow);
         scroll-margin-top: 4rem;
 
         &::before {
@@ -600,7 +600,7 @@ aside {
         counter-increment: h5;
         margin: 1.6em 0 0.6em;
         font-size: 1.1em;
-        color: #da88ff;
+        color: var(--heading-purple);
         scroll-margin-top: 4rem;
 
         &::before {
@@ -612,11 +612,11 @@ aside {
         counter-increment: h6;
         margin: 1.4em 0 0.5em;
         font-size: 1em;
-        color: #f38c8c;
+        color: var(--heading-pink);
         scroll-margin-top: 4rem;
 
         &::before {
             content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
         }
     }
-}
\ No newline at end of file
+}
diff --git a/themes/default/assets/css/variables.css b/themes/default/assets/css/variables.css
index 2e2e474e..3214b6e5 100644
--- a/themes/default/assets/css/variables.css
+++ b/themes/default/assets/css/variables.css
@@ -1,18 +1,31 @@
 :root {
-    --body-bg-color: #000000;
-    --body-bg-color2: #232f3b;
-    --body-bg-color3: #232f3b55;
+    --body-bg-color: #121212;
+    --body-bg-color2: #232323;
+    --body-bg-color3: #1a1a1a;
     --text-color: hsl(213 20% 80%);
     --footer-bg-color: #000000;
     --footer-link-color: hsl(213, 20%, 65%);
     --footer-link-hover-color: hsl(211, 98%, 90%);
 
     --accent-blue: #64c7ff;
+    --accent-blue-hover: #2da8f4;
+    --accent-blue-light: #bceeff;
     --link-blue: #8ab4f8;
+    --accent-orange: #b16a00;
+    --accent-green-bright: #a8ff60;
+    --accent-purple-bright: #e553ff;
+    --accent-pink-bright: #f6a7ff;
+    --accent-rose-light: #ffd8d8;
+
     --text-muted: #aaa;
     --text-muted2: #999;
     --text-light: #ccc;
+    --text-soft: #bbb;
+    --text-softer: #ddd;
+    --text-softest: #eee;
+    --text-dim: #d0d0d0;
     --text-white: #fff;
+    --footer-text-muted: #b0b0b0;
     --text-red: #d44;
     --text-green: #22cc55;
     --heading-green: #9fd356;
@@ -21,9 +34,22 @@
     --heading-pink: #f38c8c;
 
     --border-dark: #444;
+    --border-darker: #333;
+    --border-panel: #3a3a3a;
     --border-muted: #888;
 
     --bg-dark: #111;
+    --surface-dark: #222;
+    --surface-overlay: #1a1a1a;
+    --surface-elevated: #2a2a2a;
+    --surface-contrast: #2b2b2b;
+    --surface-accent: #2d3a3f;
+    --surface-muted: #333;
+    --surface-elevated-hover: #3a3a3a;
+    --shadow-color: #000000;
+
+    --scrollbar-thumb: #555;
+
     --bg-white-015: rgba(255, 255, 255, 0.015);
     --bg-white-02: rgba(255, 255, 255, 0.02);
     --bg-white-03: rgba(255, 255, 255, 0.03);
@@ -35,4 +61,4 @@
     --bg-accent-blue-01: rgba(100, 199, 255, 0.1);
     --bg-accent-blue-005: rgba(100, 199, 255, 0.05);
     --bg-accent-blue-008: rgba(100, 199, 255, 0.08);
-}
\ No newline at end of file
+}