From 7e0ac45a659bc5abd72ad19454475f433872e4a7 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Thu, 2 Apr 2026 17:42:07 +0200
Subject: [PATCH] Changed colors to the shared colors

---
 TODO.md                         |   6 +-
 public/assets/css/admin.css     | 582 +++++++++++---------------------
 public/assets/css/colors.css    |   4 +
 public/assets/css/system.css    |   6 +-
 public/assets/css/variables.css |   4 +
 5 files changed, 216 insertions(+), 386 deletions(-)

diff --git a/TODO.md b/TODO.md
index 0fcd811..d936e8f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,12 +2,12 @@
 
 - [x] Update CSS variables structure in variables.css
 - [x] Add gradient colors (#3C856C, #60ECB4, #E390FF, #9557B5)
-- [x] Keep admin-specific variables for dark theme
+- [x] Remove admin-specific color variables (use shared vars only)
 - [x] Update common.css to use new variables
 - [x] Update main.css to use new variables
-- [x] Update admin.css to use admin variables
+- [x] Update admin.css to use shared vars with inline dark values
 - [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 admin variables
+- [x] Update system.css to use shared vars with inline dark values
 - [x] Update colors.css reference file
diff --git a/public/assets/css/admin.css b/public/assets/css/admin.css
index 4b43026..ae1a64f 100644
--- a/public/assets/css/admin.css
+++ b/public/assets/css/admin.css
@@ -8,67 +8,9 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: #1a1a1a;
-  color: #e8e8e8;
   /* font-family inherited from common.css body */
 }
 
-/* Admin header / nav */
-/* .admin-body header { */
-/* flex-shrink: 0; */
-/* } */
-
-/* .admin-body header nav { */
-/* background: linear-gradient( */
-/* to bottom, */
-/* var(--admin-purple) 0%, */
-/* rgba(149, 87, 181, 0.0) 100% */
-/* ); */
-/* padding: 0.55rem 1.5rem; */
-/* display: flex; */
-/* align-items: center; */
-/* gap: 2.5rem; */
-/* } */
-
-/* .admin-body header nav > a { */
-/* font-size: 0.88rem; */
-/* letter-spacing: 0.12em; */
-/* text-transform: uppercase; */
-/* color: rgba(255, 255, 255, 0.8); */
-/* text-decoration: none; */
-/* font-weight: 400; */
-/* } */
-
-/* .admin-body header nav ul { */
-/* list-style: none; */
-/* margin: 0 0 0 auto; */
-/* padding: 0; */
-/* display: flex; */
-/* align-items: center; */
-/* gap: 2.5rem; */
-/* } */
-
-/* .admin-body header nav ul a { */
-/* font-size: 0.85rem; */
-/* letter-spacing: 0.1em; */
-/* text-transform: uppercase; */
-/* color: rgba(255, 255, 255, 0.9); */
-/* text-decoration: none; */
-/* font-weight: 400; */
-/* transition: opacity 0.15s; */
-/* } */
-
-/* .admin-body header nav ul a:hover, */
-/* .admin-body header nav ul a[aria-current="page"] { */
-/* opacity: 1; */
-/* color: #fff; */
-/* } */
-
-/* .admin-body header nav ul a[aria-current="page"] { */
-/* border-bottom: 1px solid rgba(255, 255, 255, 0.6); */
-/* padding-bottom: 1px; */
-/* } */
-
 /* Logout — visually subdued */
 .admin-body header nav ul [data-nav-logout] a {
   opacity: 0.6;
@@ -91,7 +33,6 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: #e8e8e8;
   margin: 0 0 2.5rem 0;
 }
 
@@ -106,18 +47,17 @@
   display: grid;
   grid-template-columns: 260px 1fr;
   align-items: start;
-  border-top: 1px solid #555;
+  border-top: 1px solid var(--border-primary);
   padding: 0.75rem 0;
   gap: 1rem;
 }
 
 .admin-form > div:not(.admin-submit-wrap):last-of-type {
-  border-bottom: 1px solid #555;
+  border-bottom: 1px solid / var(--border-primary);
 }
 
 .admin-form > div:not(.admin-submit-wrap) > label {
   font-size: 0.92rem;
-  color: #e8e8e8;
   padding-top: 0.5rem;
   font-weight: 400;
 }
@@ -134,8 +74,7 @@
   width: 100%;
   background: transparent;
   border: none;
-  border-bottom: 1px solid #555;
-  color: #e8e8e8;
+  border-bottom: 1px solid var(--border-primary);
   font-size: 0.92rem;
   font-family: inherit;
   padding: 0.4rem 0;
@@ -158,7 +97,6 @@
 
 .admin-form input::placeholder,
 .admin-form textarea::placeholder {
-  color: #969696;
   font-size: 0.88rem;
 }
 
@@ -193,9 +131,8 @@
 
 .admin-file-input input[type="file"] {
   font-size: 0.85rem;
-  color: #969696;
   background: transparent;
-  border: 1px dashed #555;
+  border: 1px dashed var(--border-primary);
   padding: 0.4rem 0.6rem;
   border-radius: 3px;
   cursor: pointer;
@@ -208,7 +145,6 @@
 
 .admin-body form small {
   font-size: 0.78rem;
-  color: #969696;
   margin-top: 0.15rem;
   display: block;
 }
@@ -226,7 +162,6 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
-  color: #e8e8e8;
   cursor: pointer;
 }
 
@@ -246,7 +181,6 @@
 .admin-btn {
   padding: 0.65rem 2.5rem;
   background: var(--accent-primary);
-  color: #ffffff;
   border: none;
   border-radius: 3px;
   font-size: 0.92rem;
@@ -263,8 +197,8 @@
 .admin-btn-secondary {
   padding: 0.5rem 1.5rem;
   background: transparent;
-  color: var(--admin-text-muted);
-  border: 1px solid var(--admin-border);
+  color: var(--text-tertiary);
+  border: 1px solid var(--border-primary);
   border-radius: 3px;
   font-size: 0.88rem;
   font-family: inherit;
@@ -276,8 +210,8 @@
 }
 
 .admin-btn-secondary:hover {
-  border-color: var(--admin-text-muted);
-  color: var(--admin-text);
+  border-color: var(--text-tertiary);
+  color: var(--text-primary);
 }
 
 /* ---- Alert Messages ---- */
@@ -291,15 +225,13 @@
 }
 
 [role="alert"][data-type="error"] {
-  background: rgba(200, 0, 0, 0.1);
-  border-color: #c00;
-  color: #ff6b6b;
+  background: var(--error);
+  color: var(--text-primary);
 }
 
 [role="status"][data-type="success"] {
-  background: rgba(0, 150, 80, 0.1);
-  border-color: #0a0;
-  color: #4caf50;
+  background: var(--success);
+  color: var(--primary);
 }
 
 /* ---- Stats cards ---- */
@@ -311,8 +243,8 @@
 }
 
 .admin-stat {
-  background: #242424;
-  border: 1px solid #555;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: 4px;
   padding: 1rem 1.5rem;
   min-width: 140px;
@@ -331,7 +263,6 @@
 
 .admin-stat__label {
   font-size: 0.82rem;
-  color: #969696;
   margin-top: 0.25rem;
   order: 2; /* visually second */
 }
@@ -347,10 +278,8 @@
 
 .admin-filters input[type="text"],
 .admin-filters select {
-  background: #242424;
-  border: 1px solid #555;
+  border: 1px solid var(--border-primary);
   border-radius: 3px;
-  color: #e8e8e8;
   font-size: 0.88rem;
   font-family: inherit;
   padding: 0.45rem 0.75rem;
@@ -365,7 +294,6 @@
 .admin-filters-btn {
   padding: 0.45rem 1rem;
   background: var(--accent-primary);
-  color: #ffffff;
   border: none;
   border-radius: 3px;
   font-size: 0.88rem;
@@ -375,7 +303,6 @@
 
 .admin-filters-reset {
   font-size: 0.88rem;
-  color: #969696;
   text-decoration: underline;
   cursor: pointer;
 }
@@ -397,32 +324,28 @@
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: #969696;
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid #555;
+  border-bottom: 1px solid var(--border-primary);
   font-weight: 400;
   white-space: nowrap;
 }
 
 .admin-body table td {
   padding: 0.65rem 0.75rem;
-  border-bottom: 1px solid #555;
-  color: #e8e8e8;
+  border-bottom: 1px solid var(--border-primary);
   vertical-align: top;
 }
 
 .admin-body table tr:hover td {
-  background: #242424;
+  background: var(--bg-tertiary);
 }
 
 .admin-body table .thesis-title {
   font-weight: 500;
-  color: #e8e8e8;
 }
 
 .admin-body table .thesis-subtitle {
   font-size: 0.82rem;
-  color: #969696;
   font-style: italic;
 }
 
@@ -437,13 +360,13 @@
 }
 
 .status-published {
-  background: rgba(0, 150, 80, 0.15);
-  color: #4caf50;
+  background: rgba(76, 175, 80, 0.15);
+  color: var(--accent-green);
 }
 
 .status-pending {
-  background: rgba(255, 200, 0, 0.12);
-  color: #ffc107;
+  background: rgba(251, 202, 81, 0.12);
+  color: var(--warning);
 }
 
 /* Action buttons in table */
@@ -468,7 +391,7 @@
 
 .admin-btn-view {
   background: rgba(65, 173, 255, 0.15);
-  color: #41adff;
+  color: var(--accent-blue);
   border-color: rgba(65, 173, 255, 0.3);
 }
 
@@ -478,7 +401,7 @@
 
 .admin-btn-edit {
   background: rgba(243, 156, 18, 0.15);
-  color: #f39c12;
+  color: var(--accent-yellow);
   border-color: rgba(243, 156, 18, 0.3);
 }
 
@@ -487,14 +410,14 @@
 }
 
 .admin-btn-publish {
-  background: rgba(0, 150, 80, 0.15);
-  color: #4caf50;
-  border-color: rgba(0, 150, 80, 0.3);
-  border: 1px solid rgba(0, 150, 80, 0.3);
+  background: rgba(76, 175, 80, 0.15);
+  color: var(--accent-green);
+  border-color: rgba(76, 175, 80, 0.3);
+  border: 1px solid rgba(76, 175, 80, 0.3);
 }
 
 .admin-btn-publish:hover {
-  background: rgba(0, 150, 80, 0.25);
+  background: rgba(76, 175, 80, 0.25);
 }
 
 .admin-btn-unpublish {
@@ -520,7 +443,7 @@
   gap: 1rem;
   padding: 0.6rem 1rem;
   background: #242424;
-  border: 1px solid #555;
+  border: 1px solid var(--border-primary);
   border-radius: 4px;
   margin-bottom: 1rem;
   font-size: 0.88rem;
@@ -533,7 +456,7 @@
 
 /* Thesis info sections (thanks page) */
 .admin-body main > section {
-  border: 1px solid #555;
+  border: 1px solid var(--border-primary);
   border-radius: 6px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
@@ -542,7 +465,7 @@
 .admin-body main > section h2 {
   margin: 0 0 1rem;
   font-size: 1.2rem;
-  border-bottom: 1px solid #555;
+  border-bottom: 1px solid var(--border-primary);
   padding-bottom: 0.5rem;
 }
 
@@ -566,13 +489,11 @@
 /* Info/error messages */
 .info-message {
   background: #242424;
-  border: 1px solid #555;
+  border: 1px solid var(--border-primary);
   border-radius: 4px;
   padding: 1rem;
   font-size: 0.9rem;
 }
-
-.info-message pre {
   margin: 0;
   font-size: 0.85rem;
   white-space: pre-wrap;
@@ -589,313 +510,214 @@
 
 .admin-login-box {
   background: #242424;
-  border: 1px solid #555;
-  border-radius: 6px;
+  border: 1px solid var(--border-primary);
   padding: 2rem;
   width: 100%;
   max-width: 380px;
-}
 
-.admin-login-box h2 {
-  margin: 0 0 1.5rem;
-  font-size: 1.1rem;
-  font-weight: 500;
-  text-align: center;
-}
+  .admin-login-box h2 {
+    margin: 0 0 1.5rem;
+    font-size: 1.1rem;
+    font-weight: 500;
+    text-align: center;
+  }
 
-.admin-login-box .admin-form > div:not(.admin-submit-wrap) {
-  grid-template-columns: 1fr;
-  border: none;
-  padding: 0.4rem 0;
-}
+  .admin-login-box .admin-form > div:not(.admin-submit-wrap) {
+    grid-template-columns: 1fr;
+    border: none;
+    padding: 0.4rem 0;
+  }
 
-.admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
-  font-size: 0.82rem;
-  color: #969696;
-  padding: 0;
-  margin-bottom: 0.2rem;
-}
+  .admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
+    font-size: 0.82rem;
+    color: #969696;
+    margin-bottom: 0.2rem;
+  }
+    margin-top: 1rem;
+    padding-top: 0.5rem;
+  }
 
-.admin-login-box .admin-submit-wrap {
-  margin-top: 1rem;
-  padding-top: 0.5rem;
-}
+  .admin-login-box .admin-btn {
+    width: 100%;
+  }
 
-.admin-login-box .admin-btn {
-  width: 100%;
-}
+  /* Import page */
+  .admin-import-area {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
 
-/* Import page */
-.admin-import-area {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
+  /* Jury fieldset */
+  .admin-body fieldset {
+    border: 1px solid #333;
+    padding: 1rem 1.25rem;
+    margin: 0.5rem 0 1rem;
+    background: rgba(255, 255, 255, 0.02);
+  }
 
-/* Jury fieldset */
-.admin-body fieldset {
-  border: 1px solid #333;
-  border-radius: 4px;
-  padding: 1rem 1.25rem;
-  margin: 0.5rem 0 1rem;
-  background: rgba(255, 255, 255, 0.02);
-}
+  .admin-body legend {
+    font-size: 0.82rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #969696;
+    padding: 0 0.5rem;
+  }
 
-.admin-body legend {
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #969696;
-  padding: 0 0.5rem;
-}
+  .admin-jury-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
 
-.admin-jury-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
+  .admin-jury-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 
-.admin-jury-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
+  .admin-jury-entry {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
 
-.admin-jury-entry {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
+    white-space: nowrap;
+  }
 
-.admin-jury-ext {
-  white-space: nowrap;
-}
+  .admin-btn-remove {
+    background: none;
+    border: 1px solid var(--border-primary);
+    color: #969696;
+    border-radius: 3px;
+    padding: 0.2rem 0.45rem;
+    font-size: 0.8rem;
+    line-height: 1;
+  }
+  .admin-btn-remove:hover {
+    border-color: #e55;
+  }
+  .admin-inline-form {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+  }
 
-.admin-btn-remove {
-  background: none;
-  border: 1px solid #555;
-  color: #969696;
-  border-radius: 3px;
-  padding: 0.2rem 0.45rem;
-  font-size: 0.8rem;
-  cursor: pointer;
-  line-height: 1;
-}
-.admin-btn-remove:hover {
-  border-color: #e55;
-  color: #e55;
-}
+  .admin-input--inline,
+  .admin-inline-form input[type="text"] {
+    font-size: 0.82rem;
+  }
 
-/* Inline form actions (tags page) */
-.admin-inline-form {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-}
+  .admin-select--inline,
+  .admin-inline-form select {
+    font-size: 0.82rem;
+  }
 
-.admin-input--inline,
-.admin-inline-form input[type="text"] {
-  padding: 0.28rem 0.5rem;
-  font-size: 0.82rem;
-}
+  .admin-btn--sm {
+    padding: 0.28rem 0.65rem;
+  }
 
-.admin-select--inline,
-.admin-inline-form select {
-  padding: 0.28rem 0.5rem;
-  font-size: 0.82rem;
-}
+  .admin-btn--warning {
+    background: #7a5400;
+    border-color: #b87a00;
+  }
+  .admin-btn--warning:hover {
+    background: #9a6a00;
+  }
 
-.admin-btn--sm {
-  padding: 0.28rem 0.65rem;
-  font-size: 0.8rem;
-}
+    background: #6b1a1a;
+    border-color: #a03030;
+  }
+    background: #8a20tertiary}
 
-.admin-btn--warning {
-  background: #7a5400;
-  border-color: #b87a00;
-}
-.admin-btn--warning:hover {
-  background: #9a6a00;
-}
+  /* Maintenade bar */
+  .admin-maintenance-bar displ---border-primaryay: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    background: #1a1a2e;
+    border: 1px solid #333;
+    border-radius: 4px;
+    padding: 0.65rem 1rem;
+    margin-bottom: 1.5rem;
+    font-size: 0.88rem;
+    co9696}
+tertiaryimary .adminenance-bar--active tertiaryackground: #2a    bo---border-primaryrder-color: #7a5400;
+    color: #e0a030;
+  }
 
-.admin-btn--danger {
-  background: #6b1a1a;
-  border-color: #a03030;
-}
-.admin-btn--danger:hover {
-  background: #8a2020;
-}
+  /* Visibility / access badges */
+  .status-access {
+    display: inline-block;
+    font-size: 0.7rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 3px;
+    background: #333;
+    color: #aaa;
+    letteing: 0.03}
+    color: #6fvar(--error);
+    border: 1pxvar(--text-primarya5a2a;
+  }
 
-/* Maintenance mode bar */
-.admin-maintenance-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  background: #1a1a2e;
-  border: 1px solid #333;
-  border-radius: 4px;
-  padding: 0.65rem 1rem;
-  margin-bottom: 1.5rem;
-  font-size: 0.88rem;
-  color: #969696;
-}
+  .status-access--var(--success): #7a8fcc;
+  }
 
-.admin-maintenance-bar--active {
-  background: #2a1a00;
-  border-color: #7a5400;
-  color: #e0a030;
-}
+  .svar(--primaryar(--erroror: #cc6060;
+    border: 1px var(--errord #7a202var(--text-primary)}
 
-/* Visibility / access badges */
-.status-access {
-  display: inline-block;
-  font-size: 0.7rem;
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-  margin-top: 0.2rem;
-  background: #333;
-  color: #aaa;
-  letter-spacing: 0.03em;
-}
+  /* ---- Account page ---- */
+  .admin-var(--successr: 1px solid var(--border-primary);
+    paddivar(--primary5rem 1.5rem;
+    display: flex;
+    gap: 0.75rem;
+  }
 
-.status-access--Libre,
-.status-access--libre {
-  background: #0a2a0a;
-  color: #6fbe6f;
-  border: 1px solid #2a5a2a;
-}
+  .admin-account-status__row {
+    display: flex;
+    alignvar(--bg-secondaryenter;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+  }
 
-.status-access--Interne,
-.status-access--interne {
-  background: #1a1a2a;
-  color: #7a8fcc;
-  border: 1px solid #3a4a8a;
-}
+  .admin-accountvar(--bg-secondary)__label {
+    color: #969696;
+    min-width: 220px;
+  }
 
-.status-access--Interdit,
-.status-access--interdit {
-  background: #2a0a0a;
-  color: #cc6060;
-  border: 1px solid #7a2020;
-}
+  .admin-account-status__code {
+    font-family:
+    font-size: 0.82rem;
+    border: 1px solid var(--border-primary);
+    border-radius: 3px;
+    padding: 0.1rem 0.4rem;
+    color: #969696;
+  }
+    font-size: 0.88rem;
+    color: #ffc107;
+  }
 
-/* ---- Account page ---- */
-.admin-account-status {
-  background: #242424;
-  border: 1px solid #555;
-  border-radius: 4px;
-  padding: 1.25rem 1.5rem;
-  margin-bottom: 2.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
+  .admin-section-title {
+    font-size: 1rem;
+    letter-spacing: 0.07em;
+    text-transform: uppercasetertiaryolor: #969696;
+    margin: 05rem;
+    padding-bottom: 0.5r  bord---border-primaryer-bottom: 1px solid var(--border-primary);
+  }
 
-.admin-account-status__row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.9rem;
-}
-
-.admin-account-status__label {
-  color: #969696;
-  min-width: 220px;
-}
-
-.admin-account-status__code {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-  font-size: 0.82rem;
-  background: #1a1a1a;
-  border: 1px solid #555;
-  border-radius: 3px;
-  padding: 0.1rem 0.4rem;
-  color: #969696;
-}
-
-.admin-account-status__note {
-  font-size: 0.88rem;
-  color: #ffc107;
-  margin: 0.25rem 0 0;
-}
-
-.admin-section-title {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: #969696;
-  margin: 0 0 1.25rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid #555;
-}
-
-/* .admin-field-hint replaced by .admin-body form small */
-
-.admin-danger-zone {
-  background: rgba(180, 0, 0, 0.07);
   border: 1px solid rgba(200, 60, 60, 0.3);
-  border-radius: 4px;
   padding: 1.25rem 1.5rem;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 1.5rem;
-  flex-wrap: wrap;
 }
-
-.admin-danger-zone__description {
-  font-size: 0.9rem;
-  line-height: 1.5;
-}
-
-.admin-danger-zone__description small {
-  color: #969696;
   font-size: 0.9rem;
 }
 
-.admin-section-title--danger {
-  margin-top: 3rem;
-}
-
-/* Banner image preview in edit form */
-.admin-banner-preview {
-  margin-bottom: 0.5rem;
-}
-
-.admin-banner-preview img {
-  max-width: 320px;
-  max-height: 100px;
-  object-fit: cover;
-  border: 1px solid #444;
-  display: block;
-}
-
-.admin-banner-preview .admin-checkbox-label {
-  margin-top: 0.35rem;
-  display: block;
-}
-
-/* Cancel / secondary action link in submit row */
-.admin-cancel-link {
-  margin-left: 0.75rem;
-}
-
-/* Add-jury button below list */
-.admin-add-jury-btn {
-  margin-top: 0.5rem;
 }
+  var(--errorbanner-preview img {tertiary-width: 320px;
+  max-hevar(--error): 100px;
+  object-fit:var(--text-primaryr;
 
 /* ============================================================
-   ACCESSIBILITY UTILITIES
-   ============================================================ */
-
-/* Admin-specific focus outline colour override */
-:focus-visible {
-  outline-color: var(--accent-primary);
-}
diff --git a/public/assets/css/colors.css b/public/assets/css/colors.css
index 68e9e9a..48c0fc7 100644
--- a/public/assets/css/colors.css
+++ b/public/assets/css/colors.css
@@ -27,6 +27,10 @@
 --accent-secondary: #683d7f;
 --accent-foreground: #ffffff;
 --accent-muted: rgba(149, 87, 181, 0.12);
+--accent-blue: #41adff;
+--accent-green: #4caf50;
+--accent-yellow: #f39c12;
+--accent-red: #f25a5a;
 
 /* Gradient colors */
 --gradient-start: #3C856C;
diff --git a/public/assets/css/system.css b/public/assets/css/system.css
index 36d9dc3..ddb8f8d 100644
--- a/public/assets/css/system.css
+++ b/public/assets/css/system.css
@@ -62,7 +62,7 @@
     margin-top: .25rem;
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
 }
-.status-ok      { color: var(--success); font-weight: 600; font-size: .85rem; }
+.status-ok      { color: var(--accent-green); font-weight: 600; font-size: .85rem; }
 .status-warn    { color: var(--warning); font-weight: 600; font-size: .85rem; }
 .status-err     { color: var(--error); font-weight: 600; font-size: .85rem; }
 .status-unknown { color: var(--text-tertiary);    font-weight: 600; font-size: .85rem; }
@@ -245,8 +245,8 @@
     border-color: var(--accent-primary);
 }
 .log-copy-btn.copied {
-    color: #4caf50;
-    border-color: #4caf50;
+    color: var(--accent-green);
+    border-color: var(--accent-green);
 }
 
 .sys-refresh-note {
diff --git a/public/assets/css/variables.css b/public/assets/css/variables.css
index 6cb25a1..c8efa35 100644
--- a/public/assets/css/variables.css
+++ b/public/assets/css/variables.css
@@ -19,6 +19,10 @@
   --accent-secondary: #683d7f;
   --accent-foreground: #ffffff;
   --accent-muted: rgba(149, 87, 181, 0.12);
+  --accent-blue: #41adff;
+  --accent-green: #4caf50;
+  --accent-yellow: #f39c12;
+  --accent-red: #f25a5a;
   --gradient-start: #3C856C;
   --gradient-2: #60ECB4;
   --gradient-3: #E390FF;