style: retheme system page to site light palette — remove dark --sys-* tokens

TODO.md

@@ -2,4 +2,5 @@
 
 ## Fixes
 - [x] Replace `mb_strlen`/`mb_substr` with `strlen`/`substr` in TfeController, SearchController, Parsedown — mbstring extension not available on production server
+- [x] system.css: retheme to site light palette — remove all `--sys-bg/border/text` dark tokens from variables.css; replace with standard `--bg-*`, `--border-*`, `--text-*` tokens; remap `--sys-syntax-*` to light-appropriate colours; remove dark terminal aesthetic
 - [x] SystemController: PHP-FPM status check — dynamically probe `phpX.Y-fpm` unit derived from running PHP version before static fallback list; add `php8.4-fpm` to cover current production PHP 8.4

public/assets/css/README.md

@@ -8,7 +8,7 @@
 - **search.css** — search/directory page
 - **tfe.css** — individual thesis page
 - **apropos.css** — about + licence pages
-- **system.css** — admin system dashboard (dark terminal panels)
+- **system.css** — admin system dashboard
 - **admin.css** — admin section (loaded alongside `common.css` on every admin page)
 - **modern-normalize.min.css** — third-party reset (minified, do not edit)
 
@@ -18,4 +18,4 @@
 - No hardcoded hex, rgb(), or rgba() in any other file.
 - All files `@import url("./variables.css")` at the top.
 - Admin and public share the same token names — no separate admin theme.
-- No dark-mode media query. The system page uses `--sys-*` tokens (intentionally dark terminal aesthetic).
+- No dark-mode media query. System page uses the same light tokens as the rest of the admin section.

public/assets/css/system.css

@@ -8,7 +8,7 @@
 .sys-tabs {
     display: flex;
     gap: 0;
-    border-bottom: 1px solid var(--sys-border);
+    border-bottom: 1px solid var(--border-primary);
     margin-bottom: var(--space-m);
 }
 .sys-tab {
@@ -16,14 +16,14 @@
     padding: var(--space-3xs) var(--space-s);
     font-size: var(--step--1);
     font-weight: 500;
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     text-decoration: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     transition: color .15s, border-color .15s;
 }
 .sys-tab:hover {
-    color: var(--sys-text-bright);
+    color: var(--text-primary);
 }
 .sys-tab.active {
     color: var(--accent-primary);
@@ -32,8 +32,8 @@
 
 /* ── Status section (always-visible panel above tabs) ─────────────────── */
 .sys-status-section {
-    background: var(--sys-bg-panel);
+    background: var(--bg-secondary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
     border-radius: 6px;
     padding: var(--space-s) var(--space-m);
     margin-bottom: var(--space-m);
@@ -46,8 +46,8 @@
 }
 .sys-status-toggle {
     background: none;
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     border-radius: 3px;
     font-size: var(--step--2);
     font-family: inherit;
@@ -57,8 +57,8 @@
     transition: color .15s, border-color .15s;
 }
 .sys-status-toggle:hover {
-    color: var(--sys-text-bright);
+    color: var(--text-primary);
-    border-color: var(--sys-border-hover);
+    border-color: var(--border-secondary);
 }
 .sys-status-meta {
     display: grid;
@@ -66,7 +66,7 @@
     gap: var(--space-m) var(--space-l);
     margin-top: var(--space-m);
     padding-top: var(--space-m);
-    border-top: 1px solid var(--sys-border-deep);
+    border-top: 1px solid var(--border-primary);
 }
 @media (max-width: 700px) {
     .sys-status-meta { grid-template-columns: 1fr; }
@@ -80,8 +80,8 @@
     margin-bottom: var(--space-l);
 }
 .srv-card {
-    background: var(--sys-bg-surface);
+    background: var(--bg-primary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
     border-radius: 5px;
     padding: var(--space-s) var(--space-m);
 }
@@ -95,26 +95,26 @@
     font-size: var(--step--1);
     text-transform: uppercase;
     letter-spacing: .07em;
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     font-weight: 500;
 }
 .srv-card__detail {
     font-size: var(--step--2);
-    color: var(--sys-text-dim);
+    color: var(--text-tertiary);
     margin-top: var(--space-3xs);
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
 }
-.status-ok      { color: var(--accent-green);   font-weight: 600; font-size: var(--step--1); }
+.status-ok      { color: var(--accent-green);  font-weight: 600; font-size: var(--step--1); }
-.status-warn    { color: var(--warning);         font-weight: 600; font-size: var(--step--1); }
+.status-warn    { color: var(--warning);        font-weight: 600; font-size: var(--step--1); }
-.status-err     { color: var(--error);           font-weight: 600; font-size: var(--step--1); }
+.status-err     { color: var(--error);          font-weight: 600; font-size: var(--step--1); }
-.status-unknown { color: var(--text-tertiary);   font-weight: 600; font-size: var(--step--1); }
+.status-unknown { color: var(--text-tertiary);  font-weight: 600; font-size: var(--step--1); }
 
 .srv-section-title {
     font-size: var(--step--1);
     text-transform: uppercase;
     letter-spacing: .1em;
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
-    border-bottom: 1px solid var(--sys-border);
+    border-bottom: 1px solid var(--border-primary);
     padding-bottom: var(--space-3xs);
     margin: 0 0 var(--space-s);
     font-weight: 500;
@@ -138,8 +138,8 @@
 /* Flush variant: no bottom margin — used inside sys-status-meta cell */
 .php-grid--flush { margin-bottom: 0; }
 .php-item {
-    background: var(--sys-bg-surface);
+    background: var(--bg-primary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
     border-radius: 4px;
     padding: var(--space-3xs) var(--space-xs);
 }
@@ -147,18 +147,18 @@
     font-size: var(--step--2);
     text-transform: uppercase;
     letter-spacing: .06em;
-    color: var(--sys-text-dim);
+    color: var(--text-tertiary);
 }
 .php-item__val {
     font-size: var(--step--1);
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
-    color: var(--sys-text-bright);
+    color: var(--text-primary);
     margin-top: var(--space-3xs);
 }
 
 /* ── Disk bar ──────────────────────────────────────────────────────────── */
 .disk-bar-wrap {
-    background: var(--sys-border);
+    background: var(--border-primary);
     border-radius: 3px;
     height: 6px;
     margin-top: var(--space-2xs);
@@ -175,7 +175,7 @@
     display: flex;
     justify-content: space-between;
     font-size: var(--step--2);
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     margin-top: var(--space-3xs);
 }
 
@@ -197,8 +197,8 @@
         -45deg,
         transparent,
         transparent 6px,
-        var(--sys-overlay) 6px,
+        rgba(0,0,0,0.03) 6px,
-        var(--sys-overlay) 12px
+        rgba(0,0,0,0.03) 12px
     );
     border-radius: 4px;
     animation: sys-panel-shimmer 1s linear infinite;
@@ -222,9 +222,9 @@
     color: var(--text-secondary);
 }
 .log-toolbar select {
-    background: var(--sys-bg-surface);
+    background: var(--bg-primary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
-    color: var(--sys-text-bright);
+    color: var(--text-primary);
     border-radius: 4px;
     padding: var(--space-3xs) var(--space-xs);
     font-size: var(--step--1);
@@ -234,7 +234,7 @@
 
 .log-meta {
     font-size: var(--step--2);
-    color: var(--sys-text-dim);
+    color: var(--text-tertiary);
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
     margin-bottom: var(--space-xs);
     display: flex;
@@ -244,11 +244,11 @@
 .log-meta span::before { content: attr(data-label) ": "; opacity: .6; }
 
 .log-unavailable {
-    background: var(--sys-bg-surface);
+    background: var(--bg-secondary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
     border-radius: 4px;
     padding: var(--space-m);
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     font-size: var(--step--1);
 }
 .log-unavail-path {
@@ -263,13 +263,13 @@
     opacity: .7;
 }
 .log-empty {
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     font-size: var(--step--1);
     padding: var(--space-s) 0;
 }
 .log-output {
-    background: var(--sys-bg-deep);
+    background: var(--bg-secondary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
     border-radius: 4px;
     padding: var(--space-s);
     overflow-x: auto;
@@ -285,10 +285,10 @@
     white-space: pre;
     padding: var(--space-3xs) var(--space-3xs);
     border-radius: 2px;
-    color: var(--sys-text-body);
+    color: var(--text-primary);
 }
-.log-line + .log-line { border-top: 1px solid var(--sys-overlay); }
+.log-line + .log-line { border-top: 1px solid var(--border-primary); }
-.log-crit   { color: var(--sys-syntax-crit);   background: var(--error-muted-bg); }
+.log-crit   { color: var(--sys-syntax-crit);    background: var(--error-muted-bg); }
 .log-error  { color: var(--error); }
 .log-warn   { color: var(--warning); }
 .log-notice { color: var(--sys-syntax-notice); }
@@ -302,21 +302,21 @@
     user-select: none;
 }
 .log-count-badge {
-    background: var(--sys-bg-surface);
+    background: var(--bg-secondary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
     border-radius: 3px;
     font-size: var(--step--2);
     padding: var(--space-3xs) var(--space-2xs);
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     font-family: ui-monospace, monospace;
 }
 .log-copy-btn {
     position: absolute;
     top: var(--space-2xs);
     right: var(--space-2xs);
-    background: var(--sys-bg-surface);
+    background: var(--bg-primary);
-    border: 1px solid var(--sys-border);
+    border: 1px solid var(--border-primary);
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     border-radius: 4px;
     font-size: var(--step--2);
     padding: var(--space-3xs) var(--space-2xs);
@@ -326,7 +326,7 @@
     z-index: 2;
 }
 .log-copy-btn:hover {
-    color: var(--sys-text-bright);
+    color: var(--text-primary);
     border-color: var(--accent-primary);
 }
 .log-copy-btn.copied {
@@ -336,7 +336,7 @@
 
 .sys-refresh-note {
     font-size: var(--step--2);
-    color: var(--sys-text-dim);
+    color: var(--text-secondary);
     margin-bottom: var(--space-m);
 }
 .sys-refresh-note a {

public/assets/css/variables.css

@@ -92,26 +92,14 @@
   --search-error-border: #cc0000;
   --search-error-color:  #cc0000;
 
-  /* System / terminal panel (dark surfaces) */
+  /* System page — log/config syntax highlight */
-  --sys-bg-surface:   #242424;
+  --sys-syntax-comment:   #999999;
-  --sys-bg-deep:      #0d0d0d;
+  --sys-syntax-directive: #1a6fb5;
-  --sys-bg-panel:     #1a1a1a;
+  --sys-syntax-block:     #7a2fa0;
-  --sys-border:       #555555;
+  --sys-syntax-value:     #a05c00;
-  --sys-border-deep:  #333333;
+  --sys-syntax-location:  #1a7a6b;
-  --sys-border-hover: #888888;
+  --sys-syntax-notice:    #3a6ea8;
-  --sys-text-dim:     #969696;
+  --sys-syntax-crit:      #c0392b;
-  --sys-text-bright:  #e8e8e8;
-  --sys-text-body:    #bbbbbb;
-  --sys-overlay:      rgba(255, 255, 255, 0.03);
-
-  /* System syntax highlight */
-  --sys-syntax-comment:   #666666;
-  --sys-syntax-directive: #7eb8f7;
-  --sys-syntax-block:     #d4a0ff;
-  --sys-syntax-value:     #e2c08d;
-  --sys-syntax-location:  #79dac8;
-  --sys-syntax-notice:    #a0c8ff;
-  --sys-syntax-crit:      #ff7070;
 
   /* Muted alpha overlays — derived from semantic tokens */
   --success-muted-bg:     rgba(92,  214, 157, 0.12);