fix serve recipe: filter output to Development Server start + [200] requests only

refactor: unify CSS color variables across public and admin

- Replace old variable structure with new standardized naming:
  - Background: --bg-primary, --bg-secondary, --bg-tertiary, --bg-active
  - Text: --text-primary, --text-secondary, --text-tertiary
  - Border: --border-primary, --border-secondary
  - Status: --success, --error, --warning
  - Accent: --accent-primary, --accent-secondary, --accent-foreground, --accent-muted
- Remove admin-specific color variables (--admin-*)
- Update all CSS files to use shared variables:
  - variables.css, common.css, main.css, admin.css
  - tfe.css, search.css, apropos.css, system.css, colors.css

public/assets/css/README.md

@@ -0,0 +1,35 @@
+# CSS Architecture
+
+## File Structure
+
+- **variables.css** - CSS custom properties (variables) for colors and theme values
+- **colors.css** - Reference documentation of all color values used in the project
+- **common.css** - Shared styles: reset, header/nav, search bar, accessibility utilities
+- **main.css** - Home page styles
+- **admin.css** - Admin section styles
+- **system.css** - System page styles
+- **search.css** - Search/Directory page styles
+- **apropos.css** - About page styles
+- **tfe.css** - Individual thesis page styles
+- **easymde.min.css** - EasyMDE editor styles (minified, third-party)
+- **modern-normalize.min.css** - Modern normalize reset (minified, third-party)
+
+## Imports
+
+All CSS files automatically import `variables.css` to access CSS custom properties.
+
+## Variables
+
+### Shared Variables (public pages)
+- `--purple`, `--purple-dark`, `--purple-light` - Purple palette
+- `--black`, `--white` - Base colors
+- `--grey-light` - Light grey background
+- `--border-color` - Border color
+- `--text-muted` - Muted text color
+
+### Admin Variables
+- `--admin-bg`, `--admin-bg-alt` - Background colors
+- `--admin-border` - Border color
+- `--admin-text`, `--admin-text-muted` - Text colors
+- `--admin-purple` - Accent color
+- `--admin-input-bg` - Input background

public/assets/css/admin.css

@@ -2,22 +2,14 @@
    ADMIN SECTION
    ============================================================ */
 
-:root {
-  --admin-bg: #1a1a1a;
-  --admin-bg-alt: #242424;
-  --admin-border: #555;
-  --admin-text: #e8e8e8;
-  --admin-text-muted: #969696;
-  --admin-purple: #9557b5;
-  --admin-input-bg: transparent;
-}
+@import url("./variables.css");
 
 .admin-body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  /* background: var(--admin-bg); */
-  /* color: var(--admin-text); */
+  background: var(--bg-primary);
+  color: var(--text-primary);
   /* font-family inherited from common.css body */
 }
 
@@ -99,7 +91,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--admin-text);
+  color: var(--text-primary);
   margin: 0 0 2.5rem 0;
 }
 
@@ -114,33 +106,36 @@
   display: grid;
   grid-template-columns: 260px 1fr;
   align-items: start;
-  border-top: 1px solid var(--admin-border);
+  border-top: 1px solid var(--border-secondary);
   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 var(--border-secondary);
 }
 
 .admin-form > div:not(.admin-submit-wrap) > label {
   font-size: 0.92rem;
-  color: var(--admin-text);
+  color: var(--text-primary);
   padding-top: 0.5rem;
   font-weight: 400;
 }
 
-.admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
+.admin-form
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
+    [type="hidden"]
+  ):not([type="submit"]),
 .admin-form select,
 .admin-form textarea,
 .admin-inline-form input[type="text"],
 .admin-inline-form input[type="number"],
 .admin-inline-form select {
   width: 100%;
-  background: var(--admin-input-bg);
+  background: var(--bg-primary);
   border: none;
-  border-bottom: 1px solid var(--admin-border);
-  color: var(--admin-text);
+  border-bottom: 1px solid var(--border-secondary);
+  color: var(--text-primary);
   font-size: 0.92rem;
   font-family: inherit;
   padding: 0.4rem 0;
@@ -150,17 +145,20 @@
   appearance: none;
 }
 
-.admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):focus,
+.admin-form
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
+    [type="hidden"]
+  ):not([type="submit"]):focus,
 .admin-form select:focus,
 .admin-form textarea:focus,
 .admin-inline-form input:focus,
 .admin-inline-form select:focus {
-  border-bottom-color: var(--admin-purple);
+  border-bottom-color: var(--accent-primary);
 }
 
 .admin-form input::placeholder,
 .admin-form textarea::placeholder {
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   font-size: 0.88rem;
 }
 
@@ -182,8 +180,8 @@
 
 .admin-form select option,
 .admin-inline-form select option {
-  background: var(--admin-bg);
-  color: var(--admin-text);
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 /* File inputs */
@@ -195,9 +193,9 @@
 
 .admin-file-input input[type="file"] {
   font-size: 0.85rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   background: transparent;
-  border: 1px dashed var(--admin-border);
+  border: 1px dashed var(--border-secondary);
   padding: 0.4rem 0.6rem;
   border-radius: 3px;
   cursor: pointer;
@@ -205,12 +203,12 @@
 }
 
 .admin-file-input input[type="file"]:hover {
-  border-color: var(--admin-purple);
+  border-color: var(--accent-primary);
 }
 
 .admin-body form small {
   font-size: 0.78rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   margin-top: 0.15rem;
   display: block;
 }
@@ -228,12 +226,12 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
-  color: var(--admin-text);
+  color: var(--text-primary);
   cursor: pointer;
 }
 
 .admin-checkbox-label input[type="checkbox"] {
-  accent-color: var(--admin-purple);
+  accent-color: var(--accent-primary);
   width: 14px;
   height: 14px;
   cursor: pointer;
@@ -247,8 +245,8 @@
 
 .admin-btn {
   padding: 0.65rem 2.5rem;
-  background: var(--admin-purple);
-  color: #fff;
+  background: var(--accent-primary);
+  color: var(--accent-foreground);
   border: none;
   border-radius: 3px;
   font-size: 0.92rem;
@@ -259,14 +257,14 @@
 }
 
 .admin-btn:hover {
-  background: #7b3fa0;
+  background: var(--accent-secondary);
 }
 
 .admin-btn-secondary {
   padding: 0.5rem 1.5rem;
   background: transparent;
-  color: var(--admin-text-muted);
-  border: 1px solid var(--admin-border);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-secondary);
   border-radius: 3px;
   font-size: 0.88rem;
   font-family: inherit;
@@ -278,8 +276,8 @@
 }
 
 .admin-btn-secondary:hover {
-  border-color: var(--admin-text-muted);
-  color: var(--admin-text);
+  border-color: var(--text-secondary);
+  color: var(--text-primary);
 }
 
 /* ---- Alert Messages ---- */
@@ -313,8 +311,8 @@
 }
 
 .admin-stat {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: var(--bg-active);
+  border: 1px solid var(--border-secondary);
   border-radius: 4px;
   padding: 1rem 1.5rem;
   min-width: 140px;
@@ -325,17 +323,17 @@
 .admin-stat__number {
   font-size: 2rem;
   font-weight: 700;
-  color: var(--admin-purple);
+  color: var(--accent-primary);
   line-height: 1;
-  order: 1;   /* visually first despite dt/dd semantic order */
+  order: 1; /* visually first despite dt/dd semantic order */
   margin: 0;
 }
 
 .admin-stat__label {
   font-size: 0.82rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   margin-top: 0.25rem;
-  order: 2;   /* visually second */
+  order: 2; /* visually second */
 }
 
 /* ---- Filters bar ---- */
@@ -349,10 +347,10 @@
 
 .admin-filters input[type="text"],
 .admin-filters select {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: var(--bg-active);
+  border: 1px solid var(--border-secondary);
   border-radius: 3px;
-  color: var(--admin-text);
+  color: var(--text-primary);
   font-size: 0.88rem;
   font-family: inherit;
   padding: 0.45rem 0.75rem;
@@ -361,13 +359,13 @@
 
 .admin-filters input[type="text"]:focus,
 .admin-filters select:focus {
-  border-color: var(--admin-purple);
+  border-color: var(--accent-primary);
 }
 
 .admin-filters-btn {
   padding: 0.45rem 1rem;
-  background: var(--admin-purple);
-  color: #fff;
+  background: var(--accent-primary);
+  color: var(--accent-foreground);
   border: none;
   border-radius: 3px;
   font-size: 0.88rem;
@@ -377,7 +375,7 @@
 
 .admin-filters-reset {
   font-size: 0.88rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   text-decoration: underline;
   cursor: pointer;
 }
@@ -399,32 +397,32 @@
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--admin-border);
+  border-bottom: 1px solid var(--border-secondary);
   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 var(--border-secondary);
+  color: var(--text-primary);
   vertical-align: top;
 }
 
 .admin-body table tr:hover td {
-  background: var(--admin-bg-alt);
+  background: var(--bg-active);
 }
 
 .admin-body table .thesis-title {
   font-weight: 500;
-  color: var(--admin-text);
+  color: var(--text-primary);
 }
 
 .admin-body table .thesis-subtitle {
   font-size: 0.82rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   font-style: italic;
 }
 
@@ -521,8 +519,8 @@
   align-items: center;
   gap: 1rem;
   padding: 0.6rem 1rem;
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: var(--bg-active);
+  border: 1px solid var(--border-secondary);
   border-radius: 4px;
   margin-bottom: 1rem;
   font-size: 0.88rem;
@@ -535,7 +533,7 @@
 
 /* Thesis info sections (thanks page) */
 .admin-body main > section {
-  border: 1px solid var(--admin-border);
+  border: 1px solid var(--border-secondary);
   border-radius: 6px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
@@ -544,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 var(--border-secondary);
   padding-bottom: 0.5rem;
 }
 
@@ -557,7 +555,7 @@
 .admin-body main > section dt {
   font-weight: 600;
   font-size: 0.88rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
 }
 
 .admin-body main > section dd {
@@ -567,8 +565,8 @@
 
 /* Info/error messages */
 .info-message {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: var(--bg-active);
+  border: 1px solid var(--border-secondary);
   border-radius: 4px;
   padding: 1rem;
   font-size: 0.9rem;
@@ -590,8 +588,8 @@
 }
 
 .admin-login-box {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: var(--bg-active);
+  border: 1px solid var(--border-secondary);
   border-radius: 6px;
   padding: 2rem;
   width: 100%;
@@ -613,7 +611,7 @@
 
 .admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
   font-size: 0.82rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   padding: 0;
   margin-bottom: 0.2rem;
 }
@@ -648,7 +646,7 @@
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   padding: 0 0.5rem;
 }
 
@@ -678,8 +676,8 @@
 
 .admin-btn-remove {
   background: none;
-  border: 1px solid #555;
-  color: var(--admin-text-muted);
+  border: 1px solid var(--border-secondary);
+  color: var(--text-secondary);
   border-radius: 3px;
   padding: 0.2rem 0.45rem;
   font-size: 0.8rem;
@@ -687,8 +685,8 @@
   line-height: 1;
 }
 .admin-btn-remove:hover {
-  border-color: #e55;
-  color: #e55;
+  border-color: var(--error);
+  color: var(--error);
 }
 
 /* Inline form actions (tags page) */
@@ -738,19 +736,19 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  background: #1a1a2e;
-  border: 1px solid #333;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-secondary);
   border-radius: 4px;
   padding: 0.65rem 1rem;
   margin-bottom: 1.5rem;
   font-size: 0.88rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
 }
 
 .admin-maintenance-bar--active {
-  background: #2a1a00;
-  border-color: #7a5400;
-  color: #e0a030;
+  background: var(--accent-muted);
+  border-color: var(--accent-secondary);
+  color: var(--warning);
 }
 
 /* Visibility / access badges */
@@ -788,8 +786,8 @@
 
 /* ---- Account page ---- */
 .admin-account-status {
-  background: var(--admin-bg-alt);
-  border: 1px solid var(--admin-border);
+  background: var(--bg-active);
+  border: 1px solid var(--border-secondary);
   border-radius: 4px;
   padding: 1.25rem 1.5rem;
   margin-bottom: 2.5rem;
@@ -806,18 +804,18 @@
 }
 
 .admin-account-status__label {
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   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: var(--bg-primary);
+  border: 1px solid var(--border-secondary);
   border-radius: 3px;
   padding: 0.1rem 0.4rem;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
 }
 
 .admin-account-status__note {
@@ -831,17 +829,17 @@
   font-weight: 600;
   letter-spacing: 0.07em;
   text-transform: uppercase;
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   margin: 0 0 1.25rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--admin-border);
+  border-bottom: 1px solid var(--border-secondary);
 }
 
 /* .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);
+  background: rgba(242, 90, 90, 0.07);
+  border: 1px solid rgba(242, 90, 90, 0.3);
   border-radius: 4px;
   padding: 1.25rem 1.5rem;
   display: flex;
@@ -857,7 +855,7 @@
 }
 
 .admin-danger-zone__description small {
-  color: var(--admin-text-muted);
+  color: var(--text-secondary);
   font-size: 0.9rem;
 }
 
@@ -874,7 +872,7 @@
   max-width: 320px;
   max-height: 100px;
   object-fit: cover;
-  border: 1px solid #444;
+  border: 1px solid var(--border-secondary);
   display: block;
 }
 
@@ -899,5 +897,5 @@
 
 /* Admin-specific focus outline colour override */
 :focus-visible {
-  outline-color: var(--admin-purple);
+  outline-color: var(--accent-primary);
 }

public/assets/css/apropos.css

@@ -2,11 +2,13 @@
    À PROPOS PAGE (apropos.php) + LICENCE PAGE (licence.php)
    ============================================================ */
 
+@import url("./variables.css");
+
 .apropos-body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: var(--white);
+  background: var(--bg-primary);
 }
 
 .apropos-main {
@@ -36,7 +38,7 @@
   font-family: "Courier New", Courier, monospace;
   font-size: 1.55rem;
   line-height: 1.45;
-  color: var(--black);
+  color: var(--text-primary);
   font-weight: 400;
   margin: 0 0 2rem 0;
 }
@@ -58,7 +60,7 @@
 .prose h3 { font-size: 1.1rem; }
 
 .prose a {
-  color: var(--purple);
+  color: var(--accent-primary);
   text-underline-offset: 2px;
 }
 
@@ -78,7 +80,7 @@
 .prose code {
   font-family: "Courier New", Courier, monospace;
   font-size: 0.9em;
-  background: rgba(0,0,0,.06);
+  background: var(--bg-tertiary);
   padding: .1em .3em;
   border-radius: 2px;
 }
@@ -97,7 +99,7 @@
   font-family: "Courier New", Courier, monospace;
   font-size: 1.55rem;
   font-weight: 400;
-  color: var(--black);
+  color: var(--text-primary);
   margin: 0 0 0.5rem 0;
   line-height: 1.2;
 }
@@ -117,7 +119,7 @@
 .apropos-aside address strong {
   font-weight: 700;
   font-size: 0.95rem;
-  color: var(--black);
+  color: var(--text-primary);
   display: block;
   margin-bottom: 0.15rem;
 }
@@ -125,7 +127,7 @@
 .apropos-aside address span,
 .apropos-aside address a {
   font-size: 0.9rem;
-  color: var(--black);
+  color: var(--text-primary);
   line-height: 1.4;
   display: block;
 }
@@ -137,7 +139,7 @@
 
 .apropos-credits-text {
   font-size: 0.9rem;
-  color: var(--black);
+  color: var(--text-primary);
   line-height: 1.6;
 }
 
@@ -155,7 +157,7 @@
 
 .apropos-licences p {
   font-size: 0.9rem;
-  color: var(--black);
+  color: var(--text-primary);
   line-height: 1.6;
   margin: 0 0 0.75rem 0;
 }

public/assets/css/colors.css

@@ -0,0 +1,29 @@
+/* ============================================================
+   COLOR VALUES REFERENCE
+   ============================================================ */
+
+/* Background colors */
+--bg-primary: #000000;
+--bg-secondary: #000000;
+--bg-tertiary: #0d0d0d;
+--bg-active: #1a1a1a;
+
+/* Text colors */
+--text-primary: #ffffff;
+--text-secondary: #a6a6a6;
+--text-tertiary: #666666;
+
+/* Border colors */
+--border-primary: #737373;
+--border-secondary: #404040;
+
+/* Status colors */
+--success: #5cd69d;
+--error: #f25a5a;
+--warning: #fbca51;
+
+/* Accent colors */
+--accent-primary: #9557b5;
+--accent-secondary: #683d7f;
+--accent-foreground: #000000;
+--accent-muted: #25162d;

public/assets/css/common.css

@@ -1,23 +1,11 @@
+@import url("./variables.css");
+
 @font-face {
   font-family: "police1";
   src: url("../fonts/Combinedd.otf");
   font-display: swap;
 }
 
-/* ============================================================
-   SHARED VARIABLES & RESET
-   ============================================================ */
-:root {
-  --purple: #9557b5;
-  --purple-dark: #7b3fa0;
-  --purple-light: rgba(149, 87, 181, 0.12);
-  --black: #111;
-  --white: #fff;
-  --grey-light: #f5f5f5;
-  --border-color: #ddd;
-  --text-muted: #666;
-}
-
 *,
 *::before,
 *::after {
@@ -35,8 +23,8 @@ body {
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
     Arial, sans-serif;
-  background: var(--white);
-  color: var(--black);
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 a {
@@ -53,14 +41,13 @@ a:hover {
    ============================================================ */
 header {
   flex-shrink: 0;
-  background: #3c856c;
   background: linear-gradient(
     180deg,
-    rgba(60, 133, 108, 1) 0%,
-    rgba(96, 236, 180, 1) 20%,
-    rgba(227, 144, 255, 1) 40%,
-    rgba(149, 87, 181, 1) 60%,
-    rgba(149, 87, 181, 1) 88%,
+    var(--gradient-start) 0%,
+    var(--gradient-2) 20%,
+    var(--gradient-3) 40%,
+    var(--gradient-4) 60%,
+    var(--gradient-4) 88%,
     rgba(149, 87, 181, 0) 96%
   );
 }
@@ -77,7 +64,7 @@ header nav > a {
   font-size: 0.95rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--white);
+  color: var(--accent-foreground);
   text-decoration: none;
   /* font-weight: 400; */
 }
@@ -95,7 +82,7 @@ header nav ul a {
   font-size: 0.85rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--white);
+  color: var(--accent-foreground);
   text-decoration: none;
   /* font-weight: 400; */
   transition: opacity 0.15s;
@@ -119,33 +106,33 @@ header form[role="search"] {
   align-items: center;
   gap: 0.5rem;
   padding: 0.25rem 1.5rem;
-  border: 1px solid #9557b5;
+  border: 1px solid var(--accent-primary);
   border-radius: 8px;
-  background: var(--white);
+  background: var(--bg-primary);
   flex-shrink: 0;
-  color: #9557b5;
+  color: var(--accent-primary);
 }
 
 header form[role="search"] svg {
-  color: var(--text-muted);
+  color: var(--text-tertiary);
   flex-shrink: 0;
   width: 16px;
   height: 16px;
-  stroke: #9557b5;
+  stroke: var(--accent-primary);
 }
 
 header form[role="search"] input {
   flex: 1;
   border: none;
   font-size: 0.95rem;
-  color: var(--black);
+  color: var(--text-primary);
   background: transparent;
   padding: 0.15rem 0;
   font-family: inherit;
 }
 
 header form[role="search"] input::placeholder {
-  color: #9557b5;
+  color: var(--accent-primary);
 }
 
 /* ============================================================
@@ -172,8 +159,8 @@ header form[role="search"] input::placeholder {
   left: 1rem;
   z-index: 9999;
   padding: 0.5rem 1rem;
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent-primary);
+  color: var(--text-primary);
   font-size: 0.9rem;
   font-weight: 600;
   text-decoration: none;
@@ -186,7 +173,7 @@ header form[role="search"] input::placeholder {
 
 /* Consistent keyboard-focus outline for all interactive elements */
 :focus-visible {
-  outline: 2px solid var(--purple);
+  outline: 2px solid var(--accent-primary);
   outline-offset: 2px;
 }
 

public/assets/css/main.css

@@ -2,12 +2,14 @@
    HOME PAGE (index.php)
    ============================================================ */
 
+@import url("./variables.css");
+
 .home-body {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
-  background: var(--white);
+  background: var(--bg-primary);
 }
 
 /* Cards grid — scrollable main area */
@@ -45,7 +47,7 @@
   flex-direction: column;
   cursor: pointer;
   border: none;
-  background: var(--white);
+  background: var(--bg-primary);
   overflow: hidden;
 }
 
@@ -62,7 +64,7 @@
   width: 100%;
   aspect-ratio: 4/3;
   overflow: hidden;
-  background: #e8e8e8;
+  background: var(--bg-tertiary);
   position: relative;
   margin: 0; /* reset <figure> default margin */
 }
@@ -84,11 +86,11 @@
 .card__media--placeholder {
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
+  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active));
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #aaa;
+  color: var(--text-tertiary);
   font-size: 2rem;
 }
 
@@ -105,7 +107,7 @@
 }
 
 .card__gradient-author {
-  color: #fff;
+  color: #ffffff;
   font-size: 0.75rem;
   opacity: .85;
   margin-bottom: .25rem;
@@ -113,7 +115,7 @@
 }
 
 .card__gradient-title {
-  color: #fff;
+  color: #ffffff;
   font-size: 0.85rem;
   font-weight: 600;
   display: -webkit-box;
@@ -132,7 +134,7 @@
   padding: 0.55rem 0.5rem 0.65rem;
   font-size: 0.88rem;
   line-height: 1.35;
-  color: var(--black);
+  color: var(--text-primary);
   margin: 0;
   font-weight: 400;
 }
@@ -140,15 +142,15 @@
 /* Empty-state message shown when no cards exist */
 .cards-empty {
   padding: 2rem;
-  color: #6b6b6b;
+  color: var(--text-tertiary);
   font-size: 0.9rem;
   list-style: none;
 }
 
 /* Filter info */
 .filter-info {
-  background: var(--purple-light);
-  color: var(--purple-dark);
+  background: var(--accent-muted);
+  color: var(--accent-secondary);
   padding: 0.4rem 1.5rem;
   font-size: 0.85rem;
   display: flex;
@@ -158,22 +160,22 @@
 }
 
 .clear-filter {
-  color: var(--purple-dark);
+  color: var(--accent-secondary);
   text-decoration: none;
   padding: 0.15rem 0.6rem;
-  background: rgba(149, 87, 181, 0.12);
+  background: var(--accent-muted);
   border-radius: 3px;
   font-size: 0.82rem;
 }
 
 .clear-filter:hover {
-  background: rgba(149, 87, 181, 0.22);
+  background: var(--accent-secondary);
 }
 
 /* Pagination */
 .pagination-wrap {
-  border-top: 1px solid var(--border-color);
-  background: var(--white);
+  border-top: 1px solid var(--border-secondary);
+  background: var(--bg-primary);
   flex-shrink: 0;
 }
 
@@ -194,17 +196,17 @@
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.5rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-secondary);
   border-radius: 3px;
-  color: var(--black);
+  color: var(--text-primary);
   font-size: 0.9rem;
   text-decoration: none;
   transition: all 0.15s;
 }
 
 .pagination-btn:hover:not(.disabled) {
-  border-color: var(--purple);
-  color: var(--purple);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
 .pagination-btn.disabled {
@@ -215,13 +217,13 @@
 
 .pagination-info {
   font-size: 0.9rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   padding: 0 0.5rem;
 }
 
 .page-current {
   font-weight: 600;
-  color: var(--black);
+  color: var(--text-primary);
 }
 
 /* Suppress card hover scale for users who prefer reduced motion */

public/assets/css/search.css

@@ -2,12 +2,14 @@
    RÉPERTOIRE / SEARCH PAGE (search.php)
    ============================================================ */
 
+@import url("./variables.css");
+
 .search-body {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
-  background: var(--white);
+  background: var(--bg-primary);
 }
 
 .search-main {
@@ -45,7 +47,7 @@
 
 .repertoire-col {
   padding: 0.75rem 0.5rem 2rem;
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-secondary);
 }
 
 .repertoire-col:last-child {
@@ -56,11 +58,11 @@
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-weight: 400;
   margin: 0 0 0.5rem 0;
   padding-bottom: 0.4rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-secondary);
 }
 
 /* Strip list chrome inside repertoire columns */
@@ -76,7 +78,7 @@
   font-size: 2.2rem;
   font-weight: 700;
   line-height: 1.1;
-  color: var(--black);
+  color: var(--text-primary);
   text-decoration: none;
   padding: 0.1rem 0;
   transition: color 0.15s;
@@ -85,7 +87,7 @@
 
 .repertoire-col:first-child ul a:hover,
 .repertoire-col:first-child ul a[aria-current] {
-  color: var(--purple);
+  color: var(--accent-primary);
 }
 
 /* Categories column */
@@ -93,7 +95,7 @@
   font-size: 0.72rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-weight: 400;
   display: block;
   margin-bottom: 0.15rem;
@@ -104,7 +106,7 @@
 .repertoire-col:not(:first-child) ul a {
   display: block;
   font-size: 0.95rem;
-  color: var(--black);
+  color: var(--text-primary);
   text-decoration: none;
   padding: 0.1rem 0;
   line-height: 1.4;
@@ -113,14 +115,14 @@
 
 .repertoire-col:not(:first-child) ul a:hover,
 .repertoire-col:not(:first-child) ul a[aria-current] {
-  color: var(--purple);
+  color: var(--accent-primary);
 }
 
 /* ---- Search results view (grid) ---- */
 .search-results-header {
   display: block;
   font-size: 0.85rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   margin: 1rem 1.5rem 0.5rem;
 }
 
@@ -144,12 +146,12 @@
 .result-card__authors {
   font-size: 0.9rem;
   font-weight: 500;
-  color: var(--black);
+  color: var(--text-primary);
 }
 
 .result-card__title {
   font-size: 0.85rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -159,7 +161,7 @@
 
 .result-card__meta {
   font-size: 0.78rem;
-  color: var(--purple);
+  color: var(--accent-primary);
   font-style: normal;
 }
 
@@ -167,7 +169,7 @@
 .view-toggle {
   display: flex;
   gap: 0;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-secondary);
   border-radius: 3px;
   overflow: hidden;
   flex-shrink: 0;
@@ -176,8 +178,8 @@
 .view-toggle__btn {
   padding: 0.25rem 0.75rem;
   font-size: 0.78rem;
-  background: var(--white);
-  color: var(--text-muted);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
   border: none;
   cursor: pointer;
   text-decoration: none;
@@ -188,8 +190,8 @@
 
 .view-toggle__btn.active,
 .view-toggle__btn:hover {
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent-primary);
+  color: var(--text-primary);
 }
 
 /* Search controls bar */
@@ -198,7 +200,7 @@
   align-items: center;
   gap: 1rem;
   padding: 0.4rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-secondary);
   flex-shrink: 0;
   flex-wrap: wrap;
 }
@@ -209,7 +211,7 @@
   align-items: center;
   gap: 0.4rem;
   font-size: 0.78rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   white-space: nowrap;
@@ -218,24 +220,24 @@
 
 .search-filter-select {
   font-size: 0.82rem;
-  border: 1px solid #949494;
+  border: 1px solid var(--border-primary);
   border-radius: 3px;
   padding: 0.2rem 0.5rem;
-  background: var(--white);
-  color: var(--black);
+  background: var(--bg-primary);
+  color: var(--text-primary);
   font-family: inherit;
   cursor: pointer;
 }
 
 .search-filter-select:focus {
-  border-color: var(--purple);
+  border-color: var(--accent-primary);
 }
 
 .search-apply-btn {
   font-size: 0.82rem;
   padding: 0.2rem 0.8rem;
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent-primary);
+  color: var(--accent-foreground);
   border: none;
   border-radius: 3px;
   cursor: pointer;
@@ -244,12 +246,12 @@
 }
 
 .search-apply-btn:hover {
-  background: var(--purple-dark);
+  background: var(--accent-secondary);
 }
 
 .search-reset-link {
   font-size: 0.82rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   text-decoration: underline;
   cursor: pointer;
 }
@@ -270,17 +272,17 @@
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.5rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-secondary);
   border-radius: 3px;
-  color: var(--black);
+  color: var(--text-primary);
   font-size: 0.9rem;
   text-decoration: none;
   transition: all 0.15s;
 }
 
 .pagination-btn:hover:not(.disabled) {
-  border-color: var(--purple);
-  color: var(--purple);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
 .pagination-btn.disabled {
@@ -291,13 +293,13 @@
 
 .pagination-info {
   font-size: 0.9rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   padding: 0 0.5rem;
 }
 
 .search-empty {
   padding: 3rem 1.5rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-size: 1rem;
   text-align: center;
 }

public/assets/css/system.css

@@ -1,8 +1,14 @@
+/* ============================================================
+   SYSTEM PAGE
+   ============================================================ */
+
+@import url("./variables.css");
+
 /* ── System page tabs ──────────────────────────────────────────────────── */
 .sys-tabs {
     display: flex;
     gap: 0;
-    border-bottom: 1px solid var(--admin-border);
+    border-bottom: 1px solid var(--border-secondary);
     margin-bottom: 1.75rem;
 }
 .sys-tab {
@@ -10,18 +16,18 @@
     padding: .55rem 1.1rem;
     font-size: .84rem;
     font-weight: 500;
-    color: var(--admin-text-muted);
+    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(--admin-text);
+    color: var(--text-primary);
 }
 .sys-tab.active {
-    color: var(--admin-purple);
-    border-bottom-color: var(--admin-purple);
+    color: var(--accent-primary);
+    border-bottom-color: var(--accent-primary);
 }
 
 /* ── Status cards ──────────────────────────────────────────────────────── */
@@ -32,8 +38,8 @@
     margin-bottom: 2.5rem;
 }
 .srv-card {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: var(--bg-active);
+    border: 1px solid var(--border-secondary);
     border-radius: 5px;
     padding: 1rem 1.25rem;
 }
@@ -47,26 +53,26 @@
     font-size: .82rem;
     text-transform: uppercase;
     letter-spacing: .07em;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     font-weight: 500;
 }
 .srv-card__detail {
     font-size: .8rem;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     margin-top: .25rem;
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
 }
-.status-ok      { color: #4caf50; font-weight: 600; font-size: .85rem; }
-.status-warn    { color: #ffc107; font-weight: 600; font-size: .85rem; }
-.status-err     { color: #e05555; font-weight: 600; font-size: .85rem; }
-.status-unknown { color: #888;    font-weight: 600; font-size: .85rem; }
+.status-ok      { color: var(--success); 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; }
 
 .srv-section-title {
     font-size: .82rem;
     text-transform: uppercase;
     letter-spacing: .1em;
-    color: var(--admin-text-muted);
-    border-bottom: 1px solid var(--admin-border);
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-secondary);
     padding-bottom: .4rem;
     margin: 0 0 1rem;
     font-weight: 500;
@@ -80,8 +86,8 @@
     margin-bottom: 2.5rem;
 }
 .php-item {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: var(--bg-active);
+    border: 1px solid var(--border-secondary);
     border-radius: 4px;
     padding: .5rem .75rem;
 }
@@ -89,18 +95,18 @@
     font-size: .75rem;
     text-transform: uppercase;
     letter-spacing: .06em;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
 }
 .php-item__val {
     font-size: .92rem;
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
-    color: var(--admin-text);
+    color: var(--text-primary);
     margin-top: .15rem;
 }
 
 /* ── Disk bar ──────────────────────────────────────────────────────────── */
 .disk-bar-wrap {
-    background: var(--admin-border);
+    background: var(--border-secondary);
     border-radius: 3px;
     height: 6px;
     margin-top: .5rem;
@@ -118,7 +124,7 @@
     display: flex;
     justify-content: space-between;
     font-size: .78rem;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     margin-top: .25rem;
 }
 
@@ -131,19 +137,19 @@
     margin-bottom: 1.25rem;
 }
 .log-toolbar select {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
-    color: var(--admin-text);
+    background: var(--bg-active);
+    border: 1px solid var(--border-secondary);
+    color: var(--text-primary);
     border-radius: 4px;
     padding: .4rem .7rem;
     font-size: .85rem;
     font-family: inherit;
 }
-.log-toolbar select:focus { outline: 2px solid var(--admin-purple); }
+.log-toolbar select:focus { outline: 2px solid var(--accent-primary); }
 
 .log-meta {
     font-size: .78rem;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
     margin-bottom: .75rem;
     display: flex;
@@ -153,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: var(--bg-active);
+    border: 1px solid var(--border-secondary);
     border-radius: 4px;
     padding: 1.5rem;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     font-size: .88rem;
 }
 .log-unavail-path {
@@ -172,13 +178,13 @@
     opacity: .7;
 }
 .log-empty {
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     font-size: .88rem;
     padding: 1rem 0;
 }
 .log-output {
-    background: #0d0d0d;
-    border: 1px solid var(--admin-border);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-secondary);
     border-radius: 4px;
     padding: 1rem;
     overflow-x: auto;
@@ -194,12 +200,12 @@
     white-space: pre;
     padding: .05rem .1rem;
     border-radius: 2px;
-    color: #bbb;
+    color: var(--text-secondary);
 }
 .log-line + .log-line { border-top: 1px solid rgba(255,255,255,.03); }
-.log-crit   { color: #ff7070; background: rgba(200,0,0,.12); }
+.log-crit   { color: #ff7070; background: rgba(242, 90, 90, 0.12); }
 .log-error  { color: #f08080; }
-.log-warn   { color: #ffd080; }
+.log-warn   { color: var(--warning); }
 .log-notice { color: #a0c8ff; }
 .log-line::before {
     content: attr(data-n);
@@ -211,21 +217,21 @@
     user-select: none;
 }
 .log-count-badge {
-    background: var(--admin-bg-alt);
-    border: 1px solid var(--admin-border);
+    background: var(--bg-active);
+    border: 1px solid var(--border-secondary);
     border-radius: 3px;
     font-size: .76rem;
     padding: .15rem .5rem;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     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: var(--bg-active);
+    border: 1px solid var(--border-secondary);
+    color: var(--text-secondary);
     border-radius: 4px;
     font-size: .76rem;
     padding: .25rem .6rem;
@@ -235,21 +241,21 @@
     z-index: 2;
 }
 .log-copy-btn:hover {
-    color: var(--admin-text);
-    border-color: var(--admin-purple);
+    color: var(--text-primary);
+    border-color: var(--accent-primary);
 }
 .log-copy-btn.copied {
-    color: #4caf50;
-    border-color: #4caf50;
+    color: var(--success);
+    border-color: var(--success);
 }
 
 .sys-refresh-note {
     font-size: .78rem;
-    color: var(--admin-text-muted);
+    color: var(--text-secondary);
     margin-bottom: 1.25rem;
 }
 .sys-refresh-note a {
-    color: var(--admin-purple);
+    color: var(--accent-primary);
     text-decoration: none;
 }
 .sys-refresh-note a:hover { text-decoration: underline; }
@@ -267,14 +273,14 @@
     line-height: 1.6;
 }
 .sys-cache-badge--hit {
-    background: rgba(255,193,7,.12);
-    color: #ffc107;
-    border: 1px solid rgba(255,193,7,.35);
+    background: rgba(251, 202, 81, 0.12);
+    color: var(--warning);
+    border: 1px solid rgba(251, 202, 81, 0.35);
 }
 .sys-cache-badge--miss {
-    background: rgba(76,175,80,.12);
-    color: #4caf50;
-    border: 1px solid rgba(76,175,80,.35);
+    background: rgba(92, 214, 157, 0.12);
+    color: var(--success);
+    border: 1px solid rgba(92, 214, 157, 0.35);
 }
 
 /* ── Nginx config viewer ───────────────────────────────────────────────── */
@@ -288,14 +294,14 @@
     vertical-align: middle;
 }
 .nginx-source-badge--live {
-    background: rgba(76,175,80,.15);
-    color: #4caf50;
-    border: 1px solid rgba(76,175,80,.35);
+    background: rgba(92, 214, 157, 0.15);
+    color: var(--success);
+    border: 1px solid rgba(92, 214, 157, 0.35);
 }
 .nginx-source-badge--local {
-    background: rgba(255,193,7,.12);
-    color: #ffc107;
-    border: 1px solid rgba(255,193,7,.35);
+    background: rgba(251, 202, 81, 0.12);
+    color: var(--warning);
+    border: 1px solid rgba(251, 202, 81, 0.35);
 }
 /* Nginx syntax highlight layers inside .log-output */
 .nginx-comment   { color: #666; font-style: italic; }

public/assets/css/tfe.css

@@ -2,11 +2,13 @@
    TFE INDIVIDUAL PAGE (tfe.php)
    ============================================================ */
 
+@import url("./variables.css");
+
 .tfe-body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: var(--white);
+  background: var(--bg-primary);
 }
 
 .tfe-main {
@@ -33,7 +35,7 @@
 /* Back link — top of left column */
 .tfe-back-link {
   font-size: .88rem;
-  color: #666;
+  color: var(--text-tertiary);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -42,7 +44,7 @@
 .tfe-title {
   font-size: 2.2rem;
   font-weight: 400;
-  color: var(--black);
+  color: var(--text-primary);
   margin: 0;
   line-height: 1.15;
   letter-spacing: -0.01em;
@@ -52,7 +54,7 @@
 .tfe-author {
   font-size: 1.9rem;
   font-weight: 400;
-  color: var(--black);
+  color: var(--text-primary);
   margin: 0;
   line-height: 1.15;
   letter-spacing: -0.01em;
@@ -76,13 +78,13 @@ article dl > div {
 }
 
 article dl dt {
-  color: var(--black);
+  color: var(--text-primary);
   font-weight: 400;
   flex-shrink: 0;
 }
 
 article dl dd {
-  color: var(--black);
+  color: var(--text-primary);
   font-weight: 700;
   margin: 0;
 }
@@ -106,7 +108,7 @@ article dl dd a {
 .tfe-synopsis-text {
   font-size: 0.95rem;
   line-height: 1.7;
-  color: var(--black);
+  color: var(--text-primary);
   margin: 0;
 }
 
@@ -147,7 +149,7 @@ aside figure embed {
 /* figcaption under media — target <figcaption> inside <aside> */
 aside figcaption {
   font-size: 0.8rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   margin: 0.3rem 0 0;
   font-style: italic;
 }
@@ -159,7 +161,7 @@ aside figcaption {
 }
 
 .tfe-pdf-fallback a {
-  color: var(--black);
+  color: var(--text-primary);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -168,7 +170,7 @@ aside figcaption {
 .tfe-restricted,
 .tfe-no-files {
   font-size: 0.95rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-style: italic;
   padding: 1rem 0;
   margin: 0;

public/assets/css/variables.css

@@ -0,0 +1,36 @@
+/* ============================================================
+   CSS VARIABLES (CUSTOM PROPERTIES)
+   ============================================================ */
+
+:root {
+  /* Public / Light theme */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #e8e8e8;
+  --bg-active: #d0d0d0;
+  --text-primary: #111111;
+  --text-secondary: #666666;
+  --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;
+  --accent-primary: #9557b5;
+  --accent-secondary: #683d7f;
+  --accent-foreground: #ffffff;
+  --accent-muted: rgba(149, 87, 181, 0.12);
+  --gradient-start: #3C856C;
+  --gradient-2: #60ECB4;
+  --gradient-3: #E390FF;
+  --gradient-4: #9557B5;
+}