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
2026-05-07 03:29:19 +02:00 · 2026-04-02 14:11:11 +02:00
parent ba7814c6dc
commit bf2594112b
15 changed files with 536 additions and 1656 deletions
--- a/TODO.md
+++ b/TODO.md
--- a/docs/ANALYSIS_PHP_VS_FLASK.md
+++ b/docs/ANALYSIS_PHP_VS_FLASK.md
--- a/docs/REFACTORING_RECOMMENDATIONS.md
+++ b/docs/REFACTORING_RECOMMENDATIONS.md
--- a/docs/chat-export-2026-04-02.md
+++ b/docs/chat-export-2026-04-02.md
@@ -0,0 +1,167 @@
+### User
+
+for a low traffic website, using a csv vs a sqlite or a nosql db, which would make sense ? it would be a php website.
+
+### Assistant
+
+Short answer:**use SQLite**for almost all low-traffic PHP sites unless your data is literally a tiny, read-only list best kept as a CSV. CSVs are fragile; NoSQL is usually overkill and adds operational cost.
+
+Here’s a practical breakdown to help you choose.
+
+# When to pick each
+
+**SQLite (recommended)**
+
+- Best for low-traffic sites with structured data (users, posts, settings, relations).
+- ACID transactions, SQL queries, indexes, easy backups (single file).
+- Very simple to use from PHP via PDO; no separate server to manage.
+- Handles many concurrent reads well; writes are serialized but fine for low write volume. Enable WAL for better concurrency.
+- Put the`.sqlite`file outside webroot and set tight file permissions.
+
+**CSV**
+
+- Accept if data is: tiny, mostly read-only, and never queried/joined (e.g., a static list of countries).
+- Pros: human-readable, editable in Excel.
+- Cons: no indexes, no transactions, parsing edge cases, concurrency problems, security issues if stored in webroot.
+- If you use CSV writes, you must handle locking and validation yourself.
+
+**NoSQL (MongoDB, CouchDB, etc.)**
+
+- Use only if you already need document DB features (flexible schema, distributed clustering) or will scale horizontally soon.
+- Adds server/process to manage, drivers, extra operational complexity — usually overkill for low traffic.
+
+**MySQL/Postgres**
+
+- Good if you expect to scale or need multi-user DB server now; slightly more operational overhead than SQLite but easier to scale later.
+
+# Practical considerations
+
+- **Concurrency:**SQLite serializes writes. For low traffic or mostly-read sites this is fine. Turn on WAL mode (`PRAGMA journal_mode = WAL`) to improve concurrency.
+- **Backups:**SQLite = copy the file (use`VACUUM`or use`sqlite3`online backup API). CSV = copy file but risk partial writes. NoSQL = backup routines/replication needed.
+- **Security:**Never keep your DB/CSV in webroot. Correct file permissions. Use prepared statements to avoid injection.
+- **Querying & indexing:**CSV has none — searching/joins are O(n). SQLite supports indexes and complex queries.
+- **Migrations:**SQLite supports schema migration (use a simple migration script). CSV makes schema evolution painful.
+- **Tooling:**PHP has native PDO for SQLite. Many tools can open SQLite files. CSV editing via spreadsheets is easy but risky.
+
+# Minimal PHP examples
+
+**SQLite (PDO) — recommended**
+```
+PHP// open$pdo = new PDO('sqlite:/path/outside_webroot/app.db');$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);// create$pdo->exec("CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT, created_at INTEGER)");// insert (prepared)$stmt = $pdo->prepare('INSERT INTO items (name, created_at) VALUES (:name, :ts)');$stmt->execute([':name' => 'Example', ':ts' => time()]);// queryforeach ($pdo->query('SELECT * FROM items ORDER BY id DESC') as $row) {    var_dump($row);}
+```
+
+Tip: after creating DB run`PRAGMA journal_mode = WAL;`once to set WAL mode if you expect concurrent reads.
+
+**CSV (with locking) — only for very simple data**
+```
+PHP$csvFile = '/path/outside_webroot/data.csv';// readif (($h = fopen($csvFile, 'r')) !== false) {    while (($row = fgetcsv($h)) !== false) {        // process $row array    }    fclose($h);}// append safelyif (($h = fopen($csvFile, 'a')) !== false) {    if (flock($h, LOCK_EX)) {        fputcsv($h, ['id', 'value', time()]);        fflush($h);        flock($h, LOCK_UN);    }    fclose($h);}
+```
+
+# Rule of thumb
+
+- If you need queries, joins, indexes, transactions →**SQLite**.
+- If it’s a single tiny static table you occasionally open in Excel →**CSV**.
+- If you need scaling, replication, distributed features, or already use NoSQL → consider**NoSQL**(but expect extra ops work).
+
+If you want, I can:
+
+- give a small migration plan from CSV → SQLite, or
+- provide a tiny PDO wrapper and migration scripts for your PHP project.
+
+Which would you like next?
+
+### User
+
+this is basically to make a libary for theses of a school. how could I implement a export import of the sqlite to csv ?
+
+### Assistant
+
+Nice — good fit for SQLite. Below are ready-to-use options (PHP functions + CLI commands) to**export**and**import**CSVs safely and efficiently for your school theses library. I include streaming (no huge memory use), header handling, transactions, column mapping, basic validation, and tips for Excel compatibility.
+
+# Quick notes before code
+
+- Put DB file outside webroot and set tight permissions.
+- Always back up DB before imports.
+- Use transactions for imports for speed and atomicity.
+- For Excel, prepend a UTF-8 BOM (`\xEF\xBB\xBF`) when exporting so Excel recognizes UTF-8.
+- For large imports, process in batches and use prepared statements.
+- Validate rows (required columns, types, length) to avoid corrupting DB.
+
+# 1) Export a table to CSV (streaming, low memory)
+```
+PHP<?phpfunction exportTableToCsv(PDO $pdo, string $table, string $csvPath, bool $includeHeader = true, string $bom = "\xEF\xBB\xBF") {    $stmt = $pdo->prepare("SELECT * FROM \"$table\"");    $stmt->execute();    $out = fopen($csvPath, 'w');    if ($out === false) {        throw new RuntimeException("Cannot open CSV file for writing: $csvPath");    }    // Write BOM for Excel/Windows compatibility (optional)    if ($bom !== '') {        fwrite($out, $bom);    }    // Write header    if ($includeHeader) {        $columnCount = $stmt->columnCount();        $headers = [];        for ($i = 0; $i < $columnCount; $i++) {            $meta = $stmt->getColumnMeta($i);            $headers[] = $meta['name'] ?? "col$i";        }        fputcsv($out, $headers);    }    // Stream rows    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {        fputcsv($out, array_values($row));    }    fclose($out);}
+```
+
+Usage:
+```
+PHP$pdo = new PDO('sqlite:/path/outside_webroot/library.db');$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);exportTableToCsv($pdo, 'theses', '/tmp/theses_export.csv');
+```
+
+# 2) Export an arbitrary query to CSV
+```
+PHPfunction exportQueryToCsv(PDO $pdo, string $sql, array $params, string $csvPath, bool $includeHeader = true, string $bom = "\xEF\xBB\xBF") {    $stmt = $pdo->prepare($sql);    $stmt->execute($params);    $out = fopen($csvPath, 'w');    if ($out === false) throw new RuntimeException("Cannot open CSV file: $csvPath");    if ($bom !== '') fwrite($out, $bom);    if ($includeHeader) {        $columnCount = $stmt->columnCount();        $headers = [];        for ($i = 0; $i < $columnCount; $i++) {            $meta = $stmt->getColumnMeta($i);            $headers[] = $meta['name'] ?? "col$i";        }        fputcsv($out, $headers);    }    while ($row = $stmt->fetch(PDO::FETCH_NUM)) {        fputcsv($out, $row);    }    fclose($out);}
+```
+
+# 3) Import CSV into a table (stream + prepared insert, with header mapping)
+```
+PHP<?phpfunction importCsvToTable(PDO $pdo, string $csvPath, string $table, array $columnMap = null, int $batchSize = 500, string $encoding = 'UTF-8') {    if (!file_exists($csvPath)) {        throw new RuntimeException("CSV file not found: $csvPath");    }    $h = fopen($csvPath, 'r');    if ($h === false) throw new RuntimeException("Cannot open CSV: $csvPath");    // Read header row    $header = fgetcsv($h);    if ($header === false) {        fclose($h);        throw new RuntimeException("CSV is empty or unreadable");    }    // Optional: strip BOM from first header cell    $header[0] = preg_replace('/^\x{FEFF}/u', '', $header[0]);    // Map incoming CSV columns to DB columns.    // $columnMap can be: null (assume header names match table columns)    // or an associative array: ['CSV Column Name' => 'db_column']    $map = [];    if ($columnMap === null) {        foreach ($header as $col) $map[$col] = $col;    } else {        foreach ($header as $col) {            if (isset($columnMap[$col])) $map[$col] = $columnMap[$col];            else $map[$col] = null; // skip if not mapped        }    }    // Determine DB columns we will insert (in order)    $dbCols = array_values(array_filter($map, fn($v) => $v !== null));    if (count($dbCols) === 0) {        fclose($h);        throw new RuntimeException("No CSV columns map to DB columns.");    }    // Prepare insert statement    $placeholders = implode(',', array_fill(0, count($dbCols), '?'));    $colList = implode(',', array_map(fn($c) => "\"$c\"", $dbCols));    $insertSql = "INSERT INTO \"$table\" ($colList) VALUES ($placeholders)";    $insertStmt = $pdo->prepare($insertSql);    // Read rows in batches inside a transaction    $rowCount = 0;    $batch = [];    $pdo->beginTransaction();    try {        while (($row = fgetcsv($h)) !== false) {            $assoc = array_combine($header, $row);            // Build values in dbCols order; do simple validation (you can extend)            $values = [];            foreach ($map as $csvCol => $dbCol) {                if ($dbCol === null) continue;            }            foreach ($dbCols as $dbCol) {                // find the CSV column that maps to this dbCol (reverse lookup)                $csvKey = array_search($dbCol, $map, true);                $values[] = $assoc[$csvKey] ?? null;            }            // Optional: basic validation example (skip blank required rows)            $allEmpty = true;            foreach ($values as $v) { if (trim((string)$v) !== '') { $allEmpty = false; break; } }            if ($allEmpty) continue;            $insertStmt->execute($values);            $rowCount++;            if ($rowCount % $batchSize === 0) {                $pdo->commit();                $pdo->beginTransaction();            }        }        $pdo->commit();    } catch (Exception $e) {        $pdo->rollBack();        fclose($h);        throw $e;    }    fclose($h);    return $rowCount;}
+```
+
+Usage with column mapping:
+```
+PHP$colMap = [  'Title' => 'title',  'Author' => 'author',  'Year' => 'year',  'Supervisor' => 'supervisor'];$count = importCsvToTable($pdo, '/tmp/theses_import.csv', 'theses', $colMap);echo "Imported $count rows\n";
+```
+
+# 4) Tips & extras
+
+**Detect table columns automatically**
+```
+PHPfunction getTableColumns(PDO $pdo, string $table): array {    $cols = [];    $stmt = $pdo->query("PRAGMA table_info(\"$table\")");    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $col) {        $cols[] = $col['name'];    }    return $cols;}
+```
+
+**Speed optimizations for large imports**
+
+- Wrap inserts in a transaction (done above).
+- Turn off synchronous temporarily for import:`PRAGMA synchronous = OFF;`then set back to`NORMAL`or`FULL`afterwards. (Be careful — power loss can cause corruption during import.)
+- Use`PRAGMA journal_mode = WAL;`for better concurrency.
+
+**CSV dialect**
+
+- Use`fgetcsv`/`fputcsv`which handle quoting/commas.
+- If you must support Excel-generated CSVs, handle`\r\n`line endings and possibly semicolon delimiters (region dependent).
+
+**Conflict handling**
+
+- If`theses`table has unique constraints (e.g.,`unique(identifier)`), you can use`INSERT OR REPLACE`or`INSERT OR IGNORE`depending on desired behavior:```
+SQLINSERT OR REPLACE INTO "theses" (col1, col2) VALUES (?, ?)
+```
+
+**CSV created by CLI (SQLite)**
+
+- If you have shell access, you can quickly export:```
+Bashsqlite3 library.db -header -csv "SELECT * FROM theses;" > theses.csv
+```
+
+- Import via sqlite3 CLI (beware: requires exact columns & table prepared):```
+Bashsqlite3 library.db.mode csv.import /path/to/theses.csv theses
+```
+
+# 5) Example end-to-end flow for your theses library
+
+- Create`theses`schema in SQLite with fields:`id, title, author, year, department, supervisor, abstract, filepath, created_at`.
+- Provide an admin page to**Export**: call`exportTableToCsv()`and stream the CSV to browser with correct headers and BOM.
+- Provide an admin**Import**form (file upload). On upload:
+
+  - Save uploaded CSV to a temp folder outside webroot.
+  - Make a backup copy of DB.
+  - Run`importCsvToTable()`with a column map (allow admins to map CSV columns to DB fields if header names differ).
+  - Show import summary: rows imported, rows skipped, errors.
+- For repeatable imports, keep a small import-log table to record timestamp, filename, rows imported, and admin user.
+
+If you want, I can:
+
+- produce a full single-file PHP admin script (upload UI + export button + import with mapping UI + summary) tailored to your`theses`schema, or
+- give a tiny migration script to convert an existing CSV folder into the`theses`SQLite DB.
+
+Which would you like me to generate now?
+
--- a/2
+++ b/2
@@ -13,7 +13,7 @@ setup:

 [group('dev')]
 serve: migrate
-    @php -S 127.0.0.1:8000 -t public/
+    @php -S 127.0.0.1:8000 -t public/ 2>&1 | stdbuf -oL grep -E '(Development Server|\[200\])' | stdbuf -oL grep -v 'live-reload\.php' || true

 [group('dev')]
 stop:
--- a/public/assets/css/README.md
+++ b/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
--- a/public/assets/css/admin.css
+++ b/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);
 }
--- a/public/assets/css/apropos.css
+++ b/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;
 }
--- a/public/assets/css/colors.css
+++ b/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;
--- a/public/assets/css/common.css
+++ b/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;
 }

--- a/public/assets/css/main.css
+++ b/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 */
--- a/public/assets/css/search.css
+++ b/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;
 }
--- a/public/assets/css/system.css
+++ b/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; }
--- a/public/assets/css/tfe.css
+++ b/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;
--- a/public/assets/css/variables.css
+++ b/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;
+}