diff --git a/TODO.md b/TODO.md
index 3309c28..0fcd811 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,12 +1,13 @@
 # TODO
 
 - [x] Update CSS variables structure in variables.css
-- [x] Remove admin-specific color variables
+- [x] Add gradient colors (#3C856C, #60ECB4, #E390FF, #9557B5)
+- [x] Keep admin-specific variables for dark theme
 - [x] Update common.css to use new variables
 - [x] Update main.css to use new variables
-- [x] Update admin.css to use new variables
+- [x] Update admin.css to use admin variables
 - [x] Update tfe.css to use new variables
 - [x] Update search.css to use new variables
 - [x] Update apropos.css to use new variables
-- [x] Update system.css to use new variables
+- [x] Update system.css to use admin variables
 - [x] Update colors.css reference file
diff --git a/public/assets/css/admin.css b/public/assets/css/admin.css
index 58928a3..4b43026 100644
--- a/public/assets/css/admin.css
+++ b/public/assets/css/admin.css
@@ -8,8 +8,8 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: var(--admin-bg);
-  color: var(--admin-text);
+  background: #1a1a1a;
+  color: #e8e8e8;
   /* font-family inherited from common.css body */
 }
 
@@ -91,7 +91,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--admin-text);
+  color: #e8e8e8;
   margin: 0 0 2.5rem 0;
 }
 
@@ -106,18 +106,18 @@
   display: grid;
   grid-template-columns: 260px 1fr;
   align-items: start;
-  border-top: 1px solid var(--admin-border);
+  border-top: 1px solid #555;
   padding: 0.75rem 0;
   gap: 1rem;
 }
 
 .admin-form > div:not(.admin-submit-wrap):last-of-type {
-  border-bottom: 1px solid var(--admin-border);
+  border-bottom: 1px solid #555;
 }
 
 .admin-form > div:not(.admin-submit-wrap) > label {
   font-size: 0.92rem;
-  color: var(--admin-text);
+  color: #e8e8e8;
   padding-top: 0.5rem;
   font-weight: 400;
 }
@@ -132,10 +132,10 @@
 .admin-inline-form input[type="number"],
 .admin-inline-form select {
   width: 100%;
-  background: var(--admin-input-bg, transparent);
+  background: transparent;
   border: none;
-  border-bottom: 1px solid var(--admin-border);
-  color: var(--admin-text);
+  border-bottom: 1px solid #555;
+  color: #e8e8e8;
   font-size: 0.92rem;
   font-family: inherit;
   padding: 0.4rem 0;
@@ -158,7 +158,7 @@
 
 .admin-form input::placeholder,
 .admin-form textarea::placeholder {
-  color: var(--admin-text-muted);
+  color: #969696;
   font-size: 0.88rem;
 }
 
@@ -180,8 +180,8 @@
 
 .admin-form select option,
 .admin-inline-form select option {
-  background: var(--admin-bg);
-  color: var(--admin-text);
+  background: #1a1a1a;
+  color: #e8e8e8;
 }
 
 /* File inputs */
@@ -193,9 +193,9 @@
 
 .admin-file-input input[type="file"] {
   font-size: 0.85rem;
-  color: var(--admin-text-muted);
+  color: #969696;
   background: transparent;
-  border: 1px dashed var(--admin-border);
+  border: 1px dashed #555;
   padding: 0.4rem 0.6rem;
   border-radius: 3px;
   cursor: pointer;
@@ -208,7 +208,7 @@
 
 .admin-body form small {
   font-size: 0.78rem;
-  color: var(--admin-text-muted);
+  color: #969696;
   margin-top: 0.15rem;
   display: block;
 }
@@ -226,7 +226,7 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
-  color: var(--admin-text);
+  color: #e8e8e8;
   cursor: pointer;
 }
 
@@ -311,8 +311,8 @@
 }
 
 .admin-stat {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: #242424;
+  border: 1px solid #555;
   border-radius: 4px;
   padding: 1rem 1.5rem;
   min-width: 140px;
@@ -331,7 +331,7 @@
 
 .admin-stat__label {
   font-size: 0.82rem;
-  color: var(--admin-text-muted);
+  color: #969696;
   margin-top: 0.25rem;
   order: 2; /* visually second */
 }
@@ -347,10 +347,10 @@
 
 .admin-filters input[type="text"],
 .admin-filters select {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: #242424;
+  border: 1px solid #555;
   border-radius: 3px;
-  color: var(--admin-text);
+  color: #e8e8e8;
   font-size: 0.88rem;
   font-family: inherit;
   padding: 0.45rem 0.75rem;
@@ -375,7 +375,7 @@
 
 .admin-filters-reset {
   font-size: 0.88rem;
-  color: var(--admin-text-muted);
+  color: #969696;
   text-decoration: underline;
   cursor: pointer;
 }
@@ -397,32 +397,32 @@
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--admin-text-muted);
+  color: #969696;
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--admin-border);
+  border-bottom: 1px solid #555;
   font-weight: 400;
   white-space: nowrap;
 }
 
 .admin-body table td {
   padding: 0.65rem 0.75rem;
-  border-bottom: 1px solid var(--admin-border);
-  color: var(--admin-text);
+  border-bottom: 1px solid #555;
+  color: #e8e8e8;
   vertical-align: top;
 }
 
 .admin-body table tr:hover td {
-  background: var(--admin-bg-alt);
+  background: #242424;
 }
 
 .admin-body table .thesis-title {
   font-weight: 500;
-  color: var(--admin-text);
+  color: #e8e8e8;
 }
 
 .admin-body table .thesis-subtitle {
   font-size: 0.82rem;
-  color: var(--admin-text-muted);
+  color: #969696;
   font-style: italic;
 }
 
@@ -519,8 +519,8 @@
   align-items: center;
   gap: 1rem;
   padding: 0.6rem 1rem;
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: #242424;
+  border: 1px solid #555;
   border-radius: 4px;
   margin-bottom: 1rem;
   font-size: 0.88rem;
@@ -533,7 +533,7 @@
 
 /* Thesis info sections (thanks page) */
 .admin-body main > section {
-  border: 1px solid var(--admin-border);
+  border: 1px solid #555;
   border-radius: 6px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
@@ -542,7 +542,7 @@
 .admin-body main > section h2 {
   margin: 0 0 1rem;
   font-size: 1.2rem;
-  border-bottom: 1px solid var(--admin-border);
+  border-bottom: 1px solid #555;
   padding-bottom: 0.5rem;
 }
 
@@ -555,7 +555,7 @@
 .admin-body main > section dt {
   font-weight: 600;
   font-size: 0.88rem;
-  color: var(--admin-text-muted);
+  color: #969696;
 }
 
 .admin-body main > section dd {
@@ -565,8 +565,8 @@
 
 /* Info/error messages */
 .info-message {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: #242424;
+  border: 1px solid #555;
   border-radius: 4px;
   padding: 1rem;
   font-size: 0.9rem;
@@ -588,8 +588,8 @@
 }
 
 .admin-login-box {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: #242424;
+  border: 1px solid #555;
   border-radius: 6px;
   padding: 2rem;
   width: 100%;
@@ -611,7 +611,7 @@
 
 .admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
   font-size: 0.82rem;
-  color: var(--admin-text-muted);
+  color: #969696;
   padding: 0;
   margin-bottom: 0.2rem;
 }
@@ -646,7 +646,7 @@
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: var(--admin-text-muted);
+  color: #969696;
   padding: 0 0.5rem;
 }
 
@@ -676,8 +676,8 @@
 
 .admin-btn-remove {
   background: none;
-  border: 1px solid var(--admin-border);
-  color: var(--admin-text-muted);
+  border: 1px solid #555;
+  color: #969696;
   border-radius: 3px;
   padding: 0.2rem 0.45rem;
   font-size: 0.8rem;
@@ -742,7 +742,7 @@
   padding: 0.65rem 1rem;
   margin-bottom: 1.5rem;
   font-size: 0.88rem;
-  color: var(--admin-text-muted);
+  color: #969696;
 }
 
 .admin-maintenance-bar--active {
@@ -786,8 +786,8 @@
 
 /* ---- Account page ---- */
 .admin-account-status {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: #242424;
+  border: 1px solid #555;
   border-radius: 4px;
   padding: 1.25rem 1.5rem;
   margin-bottom: 2.5rem;
@@ -804,18 +804,18 @@
 }
 
 .admin-account-status__label {
-  color: var(--admin-text-muted);
+  color: #969696;
   min-width: 220px;
 }
 
 .admin-account-status__code {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.82rem;
-  background: var(--admin-bg);
-  border: 1px solid var(--admin-border);
+  background: #1a1a1a;
+  border: 1px solid #555;
   border-radius: 3px;
   padding: 0.1rem 0.4rem;
-  color: var(--admin-text-muted);
+  color: #969696;
 }
 
 .admin-account-status__note {
@@ -829,10 +829,10 @@
   font-weight: 600;
   letter-spacing: 0.07em;
   text-transform: uppercase;
-  color: var(--admin-text-muted);
+  color: #969696;
   margin: 0 0 1.25rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--admin-border);
+  border-bottom: 1px solid #555;
 }
 
 /* .admin-field-hint replaced by .admin-body form small */
@@ -855,7 +855,7 @@
 }
 
 .admin-danger-zone__description small {
-  color: var(--admin-text-muted);
+  color: #969696;
   font-size: 0.9rem;
 }
 
diff --git a/public/assets/css/colors.css b/public/assets/css/colors.css
index 047886f..68e9e9a 100644
--- a/public/assets/css/colors.css
+++ b/public/assets/css/colors.css
@@ -3,19 +3,19 @@
    ============================================================ */
 
 /* Background colors */
---bg-primary: #000000;
---bg-secondary: #000000;
---bg-tertiary: #0d0d0d;
---bg-active: #1a1a1a;
+--bg-primary: #ffffff;
+--bg-secondary: #f5f5f5;
+--bg-tertiary: #e8e8e8;
+--bg-active: #d0d0d0;
 
 /* Text colors */
---text-primary: #ffffff;
---text-secondary: #a6a6a6;
---text-tertiary: #666666;
+--text-primary: #111111;
+--text-secondary: #666666;
+--text-tertiary: #999999;
 
 /* Border colors */
---border-primary: #737373;
---border-secondary: #404040;
+--border-primary: #ddd;
+--border-secondary: #ccc;
 
 /* Status colors */
 --success: #5cd69d;
@@ -25,5 +25,11 @@
 /* Accent colors */
 --accent-primary: #9557b5;
 --accent-secondary: #683d7f;
---accent-foreground: #000000;
---accent-muted: #25162d;
+--accent-foreground: #ffffff;
+--accent-muted: rgba(149, 87, 181, 0.12);
+
+/* Gradient colors */
+--gradient-start: #3C856C;
+--gradient-2: #60ECB4;
+--gradient-3: #E390FF;
+--gradient-4: #9557B5;
diff --git a/public/assets/css/system.css b/public/assets/css/system.css
index dfd26a1..36d9dc3 100644
--- a/public/assets/css/system.css
+++ b/public/assets/css/system.css
@@ -8,7 +8,7 @@
 .sys-tabs {
     display: flex;
     gap: 0;
-    border-bottom: 1px solid var(--admin-border);
+    border-bottom: 1px solid #555;
     margin-bottom: 1.75rem;
 }
 .sys-tab {
@@ -16,14 +16,14 @@
     padding: .55rem 1.1rem;
     font-size: .84rem;
     font-weight: 500;
-    color: var(--admin-text-muted);
+    color: #969696;
     text-decoration: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     transition: color .15s, border-color .15s;
 }
 .sys-tab:hover {
-    color: var(--admin-text);
+    color: #e8e8e8;
 }
 .sys-tab.active {
     color: var(--accent-primary);
@@ -38,8 +38,8 @@
     margin-bottom: 2.5rem;
 }
 .srv-card {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: #242424;
+    border: 1px solid #555;
     border-radius: 5px;
     padding: 1rem 1.25rem;
 }
@@ -53,12 +53,12 @@
     font-size: .82rem;
     text-transform: uppercase;
     letter-spacing: .07em;
-    color: var(--admin-text-muted);
+    color: #969696;
     font-weight: 500;
 }
 .srv-card__detail {
     font-size: .8rem;
-    color: var(--admin-text-muted);
+    color: #969696;
     margin-top: .25rem;
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
 }
@@ -71,8 +71,8 @@
     font-size: .82rem;
     text-transform: uppercase;
     letter-spacing: .1em;
-    color: var(--admin-text-muted);
-    border-bottom: 1px solid var(--admin-border);
+    color: #969696;
+    border-bottom: 1px solid #555;
     padding-bottom: .4rem;
     margin: 0 0 1rem;
     font-weight: 500;
@@ -86,8 +86,8 @@
     margin-bottom: 2.5rem;
 }
 .php-item {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: #242424;
+    border: 1px solid #555;
     border-radius: 4px;
     padding: .5rem .75rem;
 }
@@ -95,18 +95,18 @@
     font-size: .75rem;
     text-transform: uppercase;
     letter-spacing: .06em;
-    color: var(--admin-text-muted);
+    color: #969696;
 }
 .php-item__val {
     font-size: .92rem;
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
-    color: var(--admin-text);
+    color: #e8e8e8;
     margin-top: .15rem;
 }
 
 /* ── Disk bar ──────────────────────────────────────────────────────────── */
 .disk-bar-wrap {
-    background: var(--admin-border);
+    background: #555;
     border-radius: 3px;
     height: 6px;
     margin-top: .5rem;
@@ -124,7 +124,7 @@
     display: flex;
     justify-content: space-between;
     font-size: .78rem;
-    color: var(--admin-text-muted);
+    color: #969696;
     margin-top: .25rem;
 }
 
@@ -137,9 +137,9 @@
     margin-bottom: 1.25rem;
 }
 .log-toolbar select {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
-    color: var(--admin-text);
+    background: #242424;
+    border: 1px solid #555;
+    color: #e8e8e8;
     border-radius: 4px;
     padding: .4rem .7rem;
     font-size: .85rem;
@@ -149,7 +149,7 @@
 
 .log-meta {
     font-size: .78rem;
-    color: var(--admin-text-muted);
+    color: #969696;
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
     margin-bottom: .75rem;
     display: flex;
@@ -159,11 +159,11 @@
 .log-meta span::before { content: attr(data-label) ": "; opacity: .6; }
 
 .log-unavailable {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: #242424;
+    border: 1px solid #555;
     border-radius: 4px;
     padding: 1.5rem;
-    color: var(--admin-text-muted);
+    color: #969696;
     font-size: .88rem;
 }
 .log-unavail-path {
@@ -178,7 +178,7 @@
     opacity: .7;
 }
 .log-empty {
-    color: var(--admin-text-muted);
+    color: #969696;
     font-size: .88rem;
     padding: 1rem 0;
 }
@@ -217,21 +217,21 @@
     user-select: none;
 }
 .log-count-badge {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: #242424;
+    border: 1px solid #555;
     border-radius: 3px;
     font-size: .76rem;
     padding: .15rem .5rem;
-    color: var(--admin-text-muted);
+    color: #969696;
     font-family: ui-monospace, monospace;
 }
 .log-copy-btn {
     position: absolute;
     top: .6rem;
     right: .6rem;
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
-    color: var(--admin-text-muted);
+    background: #242424;
+    border: 1px solid #555;
+    color: #969696;
     border-radius: 4px;
     font-size: .76rem;
     padding: .25rem .6rem;
@@ -241,7 +241,7 @@
     z-index: 2;
 }
 .log-copy-btn:hover {
-    color: var(--admin-text);
+    color: #e8e8e8;
     border-color: var(--accent-primary);
 }
 .log-copy-btn.copied {
@@ -251,7 +251,7 @@
 
 .sys-refresh-note {
     font-size: .78rem;
-    color: var(--admin-text-muted);
+    color: #969696;
     margin-bottom: 1.25rem;
 }
 .sys-refresh-note a {
diff --git a/public/assets/css/variables.css b/public/assets/css/variables.css
index edaa479..6cb25a1 100644
--- a/public/assets/css/variables.css
+++ b/public/assets/css/variables.css
@@ -3,7 +3,6 @@
    ============================================================ */
 
 :root {
-  /* Public / Light theme */
   --bg-primary: #ffffff;
   --bg-secondary: #f5f5f5;
   --bg-tertiary: #e8e8e8;
@@ -13,15 +12,6 @@
   --text-tertiary: #999999;
   --border-primary: #ddd;
   --border-secondary: #ccc;
-  
-  /* Admin / Dark theme */
-  --admin-bg: #1a1a1a;
-  --admin-bg-alt: #242424;
-  --admin-text: #e8e8e8;
-  --admin-text-muted: #969696;
-  --admin-border: #555;
-  
-  /* Shared colors */
   --success: #5cd69d;
   --error: #f25a5a;
   --warning: #fbca51;