From b4b650a26df3a5b4bebbecf9dbfd87a9fdc95770 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Mon, 30 Mar 2026 06:37:08 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Replaced=20all=20193=20hex=20colors=20a?=
 =?UTF-8?q?nd=2024=20rgba=20values=20in=20App.css=20with=2077=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/App.css"

GSD-Task: S02/T01
---
 frontend/src/App.css | 554 ++++++++++++++++++++++++++-----------------
 1 file changed, 337 insertions(+), 217 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 721fc4e..5ec1ae6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,123 @@
+/* ── Theme tokens ──────────────────────────────────────────────────────────── */
+
+:root {
+  /* Backgrounds */
+  --color-bg-page: #0f0f14;
+  --color-bg-surface: #1a1a24;
+  --color-bg-surface-hover: #22222e;
+  --color-bg-input: #1a1a24;
+  --color-bg-header: #0a0a12;
+  --color-bg-header-alt: #14141e;
+  --color-bg-transcript: #12121a;
+
+  /* Text */
+  --color-text-primary: #e2e2ea;
+  --color-text-secondary: #8b8b9a;
+  --color-text-muted: #6b6b7a;
+  --color-text-active: #e2e2ea;
+  --color-text-on-header: rgba(255, 255, 255, 0.8);
+  --color-text-on-header-hover: #fff;
+  --color-text-on-header-label: rgba(255, 255, 255, 0.9);
+
+  /* Borders */
+  --color-border: #2a2a38;
+  --color-border-active: #22d3ee;
+
+  /* Accent (cyan) */
+  --color-accent: #22d3ee;
+  --color-accent-hover: #67e8f9;
+  --color-accent-subtle: rgba(34, 211, 238, 0.1);
+  --color-accent-focus: rgba(34, 211, 238, 0.15);
+
+  /* Shadows / overlays */
+  --color-shadow: rgba(0, 0, 0, 0.2);
+  --color-shadow-heavy: rgba(0, 0, 0, 0.4);
+  --color-overlay: rgba(0, 0, 0, 0.6);
+
+  /* Status badges */
+  --color-badge-pending-bg: #422006;
+  --color-badge-pending-text: #fcd34d;
+  --color-badge-approved-bg: #052e16;
+  --color-badge-approved-text: #6ee7b7;
+  --color-badge-edited-bg: #1e1b4b;
+  --color-badge-edited-text: #93c5fd;
+  --color-badge-rejected-bg: #450a0a;
+  --color-badge-rejected-text: #fca5a5;
+
+  /* Semantic buttons */
+  --color-btn-approve: #059669;
+  --color-btn-approve-hover: #047857;
+  --color-btn-reject: #dc2626;
+  --color-btn-reject-hover: #b91c1c;
+
+  /* Mode toggle (green/amber work on dark) */
+  --color-toggle-review: #10b981;
+  --color-toggle-auto: #f59e0b;
+  --color-toggle-track: #6b7280;
+  --color-toggle-track-active: #059669;
+  --color-toggle-thumb: #fff;
+
+  /* Error */
+  --color-error: #f87171;
+  --color-error-bg: #450a0a;
+  --color-error-border: #7f1d1d;
+
+  /* Fallback / warning banners */
+  --color-banner-amber-bg: #422006;
+  --color-banner-amber-border: #854d0e;
+  --color-banner-amber-text: #fcd34d;
+
+  /* Pills / special badges */
+  --color-pill-bg: #22222e;
+  --color-pill-text: #e2e2ea;
+  --color-pill-plugin-bg: #2e1065;
+  --color-pill-plugin-text: #c4b5fd;
+  --color-badge-category-bg: #1e1b4b;
+  --color-badge-category-text: #93c5fd;
+  --color-badge-type-technique-bg: #1e1b4b;
+  --color-badge-type-technique-text: #93c5fd;
+  --color-badge-type-moment-bg: #422006;
+  --color-badge-type-moment-text: #fcd34d;
+  --color-badge-content-type-bg: #22222e;
+  --color-badge-content-type-text: #e2e2ea;
+  --color-badge-quality-structured-bg: #052e16;
+  --color-badge-quality-structured-text: #6ee7b7;
+  --color-badge-quality-unstructured-bg: #422006;
+  --color-badge-quality-unstructured-text: #fcd34d;
+
+  /* Genre pills */
+  --color-genre-pill-bg: #1a1a24;
+  --color-genre-pill-text: #e2e2ea;
+  --color-genre-pill-border: #2a2a38;
+  --color-genre-pill-hover-bg: #22222e;
+  --color-genre-pill-hover-border: #67e8f9;
+  --color-genre-pill-active-bg: #22d3ee;
+  --color-genre-pill-active-text: #0f0f14;
+  --color-genre-pill-active-border: #22d3ee;
+  --color-genre-pill-active-hover-bg: #67e8f9;
+
+  /* Sort toggle */
+  --color-sort-btn-bg: #1a1a24;
+  --color-sort-btn-text: #8b8b9a;
+  --color-sort-btn-border: #2a2a38;
+  --color-sort-btn-hover-bg: #22222e;
+  --color-sort-btn-hover-text: #e2e2ea;
+  --color-sort-btn-active-bg: #22d3ee;
+  --color-sort-btn-active-text: #0f0f14;
+  --color-sort-btn-active-hover-bg: #67e8f9;
+
+  /* Technique page creator link */
+  --color-link-accent: #22d3ee;
+
+  /* Search btn (dark variant) */
+  --color-btn-search-bg: #22d3ee;
+  --color-btn-search-text: #0f0f14;
+  --color-btn-search-hover-bg: #67e8f9;
+
+  /* Typeahead see-all link */
+  --color-typeahead-see-all: #22d3ee;
+}
+
 /* ── Base ─────────────────────────────────────────────────────────────────── */
 
 *,
@@ -12,8 +132,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
   line-height: 1.5;
-  color: #1a1a2e;
-  background: #f4f4f8;
+  color: var(--color-text-primary);
+  background: var(--color-bg-page);
 }
 
 /* ── App shell ────────────────────────────────────────────────────────────── */
@@ -23,8 +143,8 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1.5rem;
-  background: #1a1a2e;
-  color: #fff;
+  background: var(--color-bg-header);
+  color: var(--color-text-on-header-hover);
 }
 
 .app-header h1 {
@@ -40,13 +160,13 @@ body {
 }
 
 .app-header nav a {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--color-text-on-header);
   text-decoration: none;
   font-size: 0.875rem;
 }
 
 .app-header nav a:hover {
-  color: #fff;
+  color: var(--color-text-on-header-hover);
 }
 
 .app-main {
@@ -84,9 +204,9 @@ body {
   align-items: center;
   padding: 0.75rem;
   border-radius: 0.5rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 1px 3px var(--color-shadow);
 }
 
 .stats-card__count {
@@ -99,21 +219,21 @@ body {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-top: 0.25rem;
 }
 
-.stats-card--pending .stats-card__count { color: #92400e; }
-.stats-card--approved .stats-card__count { color: #065f46; }
-.stats-card--edited .stats-card__count { color: #1e40af; }
-.stats-card--rejected .stats-card__count { color: #991b1b; }
+.stats-card--pending .stats-card__count { color: var(--color-badge-pending-text); }
+.stats-card--approved .stats-card__count { color: var(--color-badge-approved-text); }
+.stats-card--edited .stats-card__count { color: var(--color-badge-edited-text); }
+.stats-card--rejected .stats-card__count { color: var(--color-badge-rejected-text); }
 
 /* ── Filter tabs ──────────────────────────────────────────────────────────── */
 
 .filter-tabs {
   display: flex;
   gap: 0;
-  border-bottom: 2px solid #e2e2e8;
+  border-bottom: 2px solid var(--color-border);
   margin-bottom: 1rem;
 }
 
@@ -123,7 +243,7 @@ body {
   background: none;
   font-size: 0.875rem;
   font-weight: 500;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
@@ -131,23 +251,23 @@ body {
 }
 
 .filter-tab:hover {
-  color: #374151;
+  color: var(--color-text-primary);
 }
 
 .filter-tab--active {
-  color: #1a1a2e;
-  border-bottom-color: #1a1a2e;
+  color: var(--color-text-active);
+  border-bottom-color: var(--color-border-active);
 }
 
 /* ── Cards ────────────────────────────────────────────────────────────────── */
 
 .card {
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   padding: 1.25rem;
   margin-bottom: 1rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
 }
 
 .card h2 {
@@ -158,7 +278,7 @@ body {
 
 .card p {
   font-size: 0.875rem;
-  color: #555;
+  color: var(--color-text-secondary);
 }
 
 /* ── Queue cards ──────────────────────────────────────────────────────────── */
@@ -171,19 +291,19 @@ body {
 
 .queue-card {
   display: block;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   padding: 1rem 1.25rem;
   text-decoration: none;
   color: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .queue-card:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+  border-color: var(--color-accent-hover);
+  box-shadow: 0 2px 8px var(--color-accent-subtle);
 }
 
 .queue-card__header {
@@ -200,7 +320,7 @@ body {
 
 .queue-card__summary {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 0.375rem;
   line-height: 1.4;
 }
@@ -210,11 +330,11 @@ body {
   align-items: center;
   gap: 0.375rem;
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
 }
 
 .queue-card__separator {
-  color: #d1d5db;
+  color: var(--color-border);
 }
 
 /* ── Status badges ────────────────────────────────────────────────────────── */
@@ -229,23 +349,23 @@ body {
 }
 
 .badge--pending {
-  background: #fef3c7;
-  color: #92400e;
+  background: var(--color-badge-pending-bg);
+  color: var(--color-badge-pending-text);
 }
 
 .badge--approved {
-  background: #d1fae5;
-  color: #065f46;
+  background: var(--color-badge-approved-bg);
+  color: var(--color-badge-approved-text);
 }
 
 .badge--edited {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-badge-edited-bg);
+  color: var(--color-badge-edited-text);
 }
 
 .badge--rejected {
-  background: #fee2e2;
-  color: #991b1b;
+  background: var(--color-badge-rejected-bg);
+  color: var(--color-badge-rejected-text);
 }
 
 /* ── Buttons ──────────────────────────────────────────────────────────────── */
@@ -255,19 +375,19 @@ body {
   align-items: center;
   gap: 0.375rem;
   padding: 0.5rem 1rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
-  background: #fff;
-  color: #374151;
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
   transition: background 0.15s, border-color 0.15s, opacity 0.15s;
 }
 
 .btn:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
+  background: var(--color-bg-surface-hover);
+  border-color: var(--color-text-muted);
 }
 
 .btn:disabled {
@@ -276,23 +396,23 @@ body {
 }
 
 .btn--approve {
-  background: #059669;
-  color: #fff;
-  border-color: #059669;
+  background: var(--color-btn-approve);
+  color: var(--color-text-on-header-hover);
+  border-color: var(--color-btn-approve);
 }
 
 .btn--approve:hover {
-  background: #047857;
+  background: var(--color-btn-approve-hover);
 }
 
 .btn--reject {
-  background: #dc2626;
-  color: #fff;
-  border-color: #dc2626;
+  background: var(--color-btn-reject);
+  color: var(--color-text-on-header-hover);
+  border-color: var(--color-btn-reject);
 }
 
 .btn--reject:hover {
-  background: #b91c1c;
+  background: var(--color-btn-reject-hover);
 }
 
 /* ── Mode toggle ──────────────────────────────────────────────────────────── */
@@ -312,15 +432,15 @@ body {
 }
 
 .mode-toggle__dot--review {
-  background: #10b981;
+  background: var(--color-toggle-review);
 }
 
 .mode-toggle__dot--auto {
-  background: #f59e0b;
+  background: var(--color-toggle-auto);
 }
 
 .mode-toggle__label {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--color-text-on-header-label);
   white-space: nowrap;
 }
 
@@ -328,7 +448,7 @@ body {
   position: relative;
   width: 2.5rem;
   height: 1.25rem;
-  background: #6b7280;
+  background: var(--color-toggle-track);
   border: none;
   border-radius: 9999px;
   cursor: pointer;
@@ -337,7 +457,7 @@ body {
 }
 
 .mode-toggle__switch--active {
-  background: #059669;
+  background: var(--color-toggle-track-active);
 }
 
 .mode-toggle__switch::after {
@@ -347,7 +467,7 @@ body {
   left: 0.125rem;
   width: 1rem;
   height: 1rem;
-  background: #fff;
+  background: var(--color-toggle-thumb);
   border-radius: 50%;
   transition: transform 0.2s;
 }
@@ -374,7 +494,7 @@ body {
 
 .pagination__info {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
 
 /* ── Detail page ──────────────────────────────────────────────────────────── */
@@ -382,13 +502,13 @@ body {
 .back-link {
   display: inline-block;
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   text-decoration: none;
   margin-bottom: 0.5rem;
 }
 
 .back-link:hover {
-  color: #374151;
+  color: var(--color-text-primary);
 }
 
 .detail-header {
@@ -420,13 +540,13 @@ body {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #9ca3af;
+  color: var(--color-text-muted);
 }
 
 .detail-field span,
 .detail-field p {
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
 }
 
 .detail-field--full {
@@ -434,7 +554,7 @@ body {
 }
 
 .detail-transcript {
-  background: #f9fafb;
+  background: var(--color-bg-transcript);
   padding: 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.8125rem;
@@ -454,11 +574,11 @@ body {
 }
 
 .action-error {
-  background: #fef2f2;
-  border: 1px solid #fecaca;
+  background: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
   border-radius: 0.375rem;
   padding: 0.5rem 0.75rem;
-  color: #991b1b;
+  color: var(--color-badge-rejected-text);
   font-size: 0.8125rem;
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -484,7 +604,7 @@ body {
   display: block;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 0.25rem;
 }
 
@@ -493,13 +613,13 @@ body {
 .edit-field select {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   font-size: 0.875rem;
   font-family: inherit;
   line-height: 1.5;
-  color: #374151;
-  background: #fff;
+  color: var(--color-text-primary);
+  background: var(--color-bg-input);
   transition: border-color 0.15s;
 }
 
@@ -507,8 +627,8 @@ body {
 .edit-field textarea:focus,
 .edit-field select:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-focus);
 }
 
 .edit-actions {
@@ -522,7 +642,7 @@ body {
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -530,12 +650,12 @@ body {
 }
 
 .dialog {
-  background: #fff;
+  background: var(--color-bg-surface);
   border-radius: 0.75rem;
   padding: 1.5rem;
   width: 90%;
   max-width: 28rem;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 10px 40px var(--color-shadow-heavy);
 }
 
 .dialog h3 {
@@ -546,7 +666,7 @@ body {
 
 .dialog__hint {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 1rem;
 }
 
@@ -561,19 +681,19 @@ body {
 .loading {
   text-align: center;
   padding: 3rem 1rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
 }
 
 .empty-state {
   text-align: center;
   padding: 3rem 1rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
   font-size: 0.875rem;
 }
 
 .error-text {
-  color: #dc2626;
+  color: var(--color-error);
 }
 
 /* ── Responsive ───────────────────────────────────────────────────────────── */
@@ -637,14 +757,14 @@ body {
 }
 
 .app-nav a {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--color-text-on-header);
   text-decoration: none;
   font-size: 0.875rem;
   transition: color 0.15s;
 }
 
 .app-nav a:hover {
-  color: #fff;
+  color: var(--color-text-on-header-hover);
 }
 
 /* ── Home / Hero ──────────────────────────────────────────────────────────── */
@@ -663,7 +783,7 @@ body {
 
 .home-hero__subtitle {
   font-size: 1rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 1.5rem;
 }
 
@@ -691,19 +811,19 @@ body {
 .search-input {
   flex: 1;
   padding: 0.625rem 1rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   font-size: 0.9375rem;
   font-family: inherit;
-  color: #374151;
-  background: #fff;
+  color: var(--color-text-primary);
+  background: var(--color-bg-input);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .search-input:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-focus);
 }
 
 .search-input--hero {
@@ -713,16 +833,16 @@ body {
 }
 
 .btn--search {
-  background: #1a1a2e;
-  color: #fff;
-  border-color: #1a1a2e;
+  background: var(--color-btn-search-bg);
+  color: var(--color-btn-search-text);
+  border-color: var(--color-btn-search-bg);
   border-radius: 0.5rem;
   padding: 0.625rem 1.25rem;
   font-weight: 600;
 }
 
 .btn--search:hover {
-  background: #2d2d4e;
+  background: var(--color-btn-search-hover-bg);
 }
 
 /* ── Typeahead dropdown ───────────────────────────────────────────────────── */
@@ -732,10 +852,10 @@ body {
   top: calc(100% + 0.25rem);
   left: 0;
   right: 0;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 24px var(--color-shadow-heavy);
   z-index: 50;
   overflow: hidden;
 }
@@ -751,7 +871,7 @@ body {
 }
 
 .typeahead-item:hover {
-  background: #f3f4f6;
+  background: var(--color-bg-surface-hover);
 }
 
 .typeahead-item__title {
@@ -764,7 +884,7 @@ body {
   align-items: center;
   gap: 0.5rem;
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
 
 .typeahead-item__type {
@@ -777,13 +897,13 @@ body {
 }
 
 .typeahead-item__type--technique_page {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-badge-type-technique-bg);
+  color: var(--color-badge-type-technique-text);
 }
 
 .typeahead-item__type--key_moment {
-  background: #fef3c7;
-  color: #92400e;
+  background: var(--color-badge-type-moment-bg);
+  color: var(--color-badge-type-moment-text);
 }
 
 .typeahead-see-all {
@@ -791,14 +911,14 @@ body {
   padding: 0.5rem 1rem;
   text-align: center;
   font-size: 0.8125rem;
-  color: #6366f1;
+  color: var(--color-typeahead-see-all);
   text-decoration: none;
-  border-top: 1px solid #e2e2e8;
+  border-top: 1px solid var(--color-border);
   transition: background 0.1s;
 }
 
 .typeahead-see-all:hover {
-  background: #f3f4f6;
+  background: var(--color-bg-surface-hover);
 }
 
 /* ── Navigation cards ─────────────────────────────────────────────────────── */
@@ -814,18 +934,18 @@ body {
 .nav-card {
   display: block;
   padding: 1.5rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.625rem;
   text-decoration: none;
   color: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
   transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 }
 
 .nav-card:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
+  border-color: var(--color-accent-hover);
+  box-shadow: 0 4px 12px var(--color-accent-subtle);
   transform: translateY(-1px);
 }
 
@@ -837,7 +957,7 @@ body {
 
 .nav-card__desc {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.4;
 }
 
@@ -865,8 +985,8 @@ body {
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.875rem 1rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   text-decoration: none;
   color: inherit;
@@ -874,8 +994,8 @@ body {
 }
 
 .recent-card:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+  border-color: var(--color-accent-hover);
+  box-shadow: 0 2px 8px var(--color-accent-subtle);
 }
 
 .recent-card__title {
@@ -892,7 +1012,7 @@ body {
 
 .recent-card__summary {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.4;
 }
 
@@ -904,11 +1024,11 @@ body {
 
 .search-fallback-banner {
   padding: 0.5rem 0.75rem;
-  background: #fef3c7;
-  border: 1px solid #fcd34d;
+  background: var(--color-banner-amber-bg);
+  border: 1px solid var(--color-banner-amber-border);
   border-radius: 0.375rem;
   font-size: 0.8125rem;
-  color: #92400e;
+  color: var(--color-banner-amber-text);
   margin-bottom: 1rem;
 }
 
@@ -920,7 +1040,7 @@ body {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #374151;
+  color: var(--color-text-primary);
 }
 
 .search-group__list {
@@ -932,18 +1052,18 @@ body {
 .search-result-card {
   display: block;
   padding: 1rem 1.25rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   text-decoration: none;
   color: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .search-result-card:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+  border-color: var(--color-accent-hover);
+  box-shadow: 0 2px 8px var(--color-accent-subtle);
 }
 
 .search-result-card__header {
@@ -960,7 +1080,7 @@ body {
 
 .search-result-card__summary {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.4;
   margin-bottom: 0.375rem;
 }
@@ -970,7 +1090,7 @@ body {
   align-items: center;
   gap: 0.375rem;
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
   flex-wrap: wrap;
 }
 
@@ -988,13 +1108,13 @@ body {
   border-radius: 9999px;
   font-size: 0.6875rem;
   font-weight: 500;
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--color-pill-bg);
+  color: var(--color-pill-text);
 }
 
 .pill--plugin {
-  background: #ede9fe;
-  color: #5b21b6;
+  background: var(--color-pill-plugin-bg);
+  color: var(--color-pill-plugin-text);
 }
 
 .pill-list {
@@ -1004,8 +1124,8 @@ body {
 }
 
 .badge--category {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-badge-category-bg);
+  color: var(--color-badge-category-text);
 }
 
 .badge--type {
@@ -1015,18 +1135,18 @@ body {
 }
 
 .badge--type-technique_page {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-badge-type-technique-bg);
+  color: var(--color-badge-type-technique-text);
 }
 
 .badge--type-key_moment {
-  background: #fef3c7;
-  color: #92400e;
+  background: var(--color-badge-type-moment-bg);
+  color: var(--color-badge-type-moment-text);
 }
 
 .badge--content-type {
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--color-badge-content-type-bg);
+  color: var(--color-badge-content-type-text);
   font-size: 0.6875rem;
 }
 
@@ -1036,13 +1156,13 @@ body {
 }
 
 .badge--quality-structured {
-  background: #d1fae5;
-  color: #065f46;
+  background: var(--color-badge-quality-structured-bg);
+  color: var(--color-badge-quality-structured-text);
 }
 
 .badge--quality-unstructured {
-  background: #fef3c7;
-  color: #92400e;
+  background: var(--color-badge-quality-unstructured-bg);
+  color: var(--color-badge-quality-unstructured-text);
 }
 
 /* ── Technique page ───────────────────────────────────────────────────────── */
@@ -1063,7 +1183,7 @@ body {
 }
 
 .technique-404 p {
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 1.5rem;
 }
 
@@ -1075,9 +1195,9 @@ body {
 }
 
 .technique-banner--amber {
-  background: #fef3c7;
-  border: 1px solid #fcd34d;
-  color: #92400e;
+  background: var(--color-banner-amber-bg);
+  border: 1px solid var(--color-banner-amber-border);
+  color: var(--color-banner-amber-text);
 }
 
 .technique-header {
@@ -1106,7 +1226,7 @@ body {
 
 .technique-header__creator {
   font-size: 0.875rem;
-  color: #6366f1;
+  color: var(--color-link-accent);
   text-decoration: none;
 }
 
@@ -1122,7 +1242,7 @@ body {
 
 .technique-summary p {
   font-size: 1rem;
-  color: #374151;
+  color: var(--color-text-primary);
   line-height: 1.6;
 }
 
@@ -1142,12 +1262,12 @@ body {
 
 .technique-prose__section p {
   font-size: 0.9375rem;
-  color: #374151;
+  color: var(--color-text-primary);
   line-height: 1.7;
 }
 
 .technique-prose__json {
-  background: #f9fafb;
+  background: var(--color-bg-transcript);
   padding: 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.8125rem;
@@ -1176,8 +1296,8 @@ body {
 
 .technique-moment {
   padding: 0.875rem 1rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
 }
 
@@ -1196,13 +1316,13 @@ body {
 
 .technique-moment__time {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   font-variant-numeric: tabular-nums;
 }
 
 .technique-moment__summary {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.5;
 }
 
@@ -1221,8 +1341,8 @@ body {
 .technique-chain {
   margin-bottom: 1rem;
   padding: 1rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
 }
 
@@ -1236,7 +1356,7 @@ body {
   padding-left: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.6;
-  color: #374151;
+  color: var(--color-text-primary);
 }
 
 /* ── Plugins ──────────────────────────────────────────────────────────────── */
@@ -1271,7 +1391,7 @@ body {
 }
 
 .technique-related__list a {
-  color: #6366f1;
+  color: var(--color-link-accent);
   text-decoration: none;
   font-size: 0.9375rem;
 }
@@ -1282,7 +1402,7 @@ body {
 
 .technique-related__rel {
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
   margin-left: 0.375rem;
 }
 
@@ -1303,7 +1423,7 @@ body {
 
 .creators-browse__subtitle {
   font-size: 0.9375rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 1.25rem;
 }
 
@@ -1319,7 +1439,7 @@ body {
 
 .sort-toggle {
   display: inline-flex;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-sort-btn-border);
   border-radius: 0.375rem;
   overflow: hidden;
 }
@@ -1327,49 +1447,49 @@ body {
 .sort-toggle__btn {
   padding: 0.375rem 0.75rem;
   border: none;
-  background: #fff;
+  background: var(--color-sort-btn-bg);
   font-size: 0.8125rem;
   font-weight: 500;
-  color: #6b7280;
+  color: var(--color-sort-btn-text);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
 
 .sort-toggle__btn + .sort-toggle__btn {
-  border-left: 1px solid #d1d5db;
+  border-left: 1px solid var(--color-sort-btn-border);
 }
 
 .sort-toggle__btn:hover {
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--color-sort-btn-hover-bg);
+  color: var(--color-sort-btn-hover-text);
 }
 
 .sort-toggle__btn--active {
-  background: #1a1a2e;
-  color: #fff;
+  background: var(--color-sort-btn-active-bg);
+  color: var(--color-sort-btn-active-text);
 }
 
 .sort-toggle__btn--active:hover {
-  background: #2d2d4e;
+  background: var(--color-sort-btn-active-hover-bg);
 }
 
 .creators-filter-input {
   flex: 1;
   min-width: 12rem;
   padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   font-size: 0.875rem;
   font-family: inherit;
-  color: #374151;
-  background: #fff;
+  color: var(--color-text-primary);
+  background: var(--color-bg-input);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .creators-filter-input:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-focus);
 }
 
 /* ── Genre pills ──────────────────────────────────────────────────────────── */
@@ -1384,29 +1504,29 @@ body {
 .genre-pill {
   display: inline-block;
   padding: 0.25rem 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-genre-pill-border);
   border-radius: 9999px;
   font-size: 0.75rem;
   font-weight: 500;
-  background: #fff;
-  color: #374151;
+  background: var(--color-genre-pill-bg);
+  color: var(--color-genre-pill-text);
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
 .genre-pill:hover {
-  border-color: #a5b4fc;
-  background: #eef2ff;
+  border-color: var(--color-genre-pill-hover-border);
+  background: var(--color-genre-pill-hover-bg);
 }
 
 .genre-pill--active {
-  background: #1a1a2e;
-  color: #fff;
-  border-color: #1a1a2e;
+  background: var(--color-genre-pill-active-bg);
+  color: var(--color-genre-pill-active-text);
+  border-color: var(--color-genre-pill-active-border);
 }
 
 .genre-pill--active:hover {
-  background: #2d2d4e;
+  background: var(--color-genre-pill-active-hover-bg);
 }
 
 /* ── Creator list ─────────────────────────────────────────────────────────── */
@@ -1422,19 +1542,19 @@ body {
   align-items: center;
   gap: 1rem;
   padding: 0.875rem 1.25rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   text-decoration: none;
   color: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
   transition: border-color 0.15s, box-shadow 0.15s;
   flex-wrap: wrap;
 }
 
 .creator-row:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+  border-color: var(--color-accent-hover);
+  box-shadow: 0 2px 8px var(--color-accent-subtle);
 }
 
 .creator-row__name {
@@ -1455,7 +1575,7 @@ body {
   align-items: center;
   gap: 0.375rem;
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   white-space: nowrap;
 }
 
@@ -1464,7 +1584,7 @@ body {
 }
 
 .creator-row__separator {
-  color: #d1d5db;
+  color: var(--color-border);
 }
 
 /* ══════════════════════════════════════════════════════════════════════════════
@@ -1502,7 +1622,7 @@ body {
 
 .creator-detail__stats {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
 
 .creator-techniques {
@@ -1526,18 +1646,18 @@ body {
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.875rem 1rem;
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   text-decoration: none;
   color: inherit;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .creator-technique-card:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+  border-color: var(--color-accent-hover);
+  box-shadow: 0 2px 8px var(--color-accent-subtle);
 }
 
 .creator-technique-card__title {
@@ -1559,7 +1679,7 @@ body {
 
 .creator-technique-card__summary {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.4;
 }
 
@@ -1580,7 +1700,7 @@ body {
 
 .topics-browse__subtitle {
   font-size: 0.9375rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   margin-bottom: 1.25rem;
 }
 
@@ -1588,20 +1708,20 @@ body {
   width: 100%;
   max-width: 24rem;
   padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   font-size: 0.875rem;
   font-family: inherit;
-  color: #374151;
-  background: #fff;
+  color: var(--color-text-primary);
+  background: var(--color-bg-input);
   margin-bottom: 1.25rem;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .topics-filter-input:focus {
   outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-focus);
 }
 
 /* ── Topics hierarchy ─────────────────────────────────────────────────────── */
@@ -1613,11 +1733,11 @@ body {
 }
 
 .topic-category {
-  background: #fff;
-  border: 1px solid #e2e2e8;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 3px var(--color-shadow);
 }
 
 .topic-category__header {
@@ -1635,12 +1755,12 @@ body {
 }
 
 .topic-category__header:hover {
-  background: #f9fafb;
+  background: var(--color-bg-surface-hover);
 }
 
 .topic-category__chevron {
   font-size: 0.625rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
   flex-shrink: 0;
   width: 0.75rem;
 }
@@ -1648,18 +1768,18 @@ body {
 .topic-category__name {
   font-size: 1rem;
   font-weight: 700;
-  color: #1a1a2e;
+  color: var(--color-text-primary);
 }
 
 .topic-category__desc {
   font-size: 0.8125rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   flex: 1;
 }
 
 .topic-category__count {
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
   white-space: nowrap;
   margin-left: auto;
 }
@@ -1667,7 +1787,7 @@ body {
 /* ── Sub-topics ───────────────────────────────────────────────────────────── */
 
 .topic-subtopics {
-  border-top: 1px solid #e2e2e8;
+  border-top: 1px solid var(--color-border);
 }
 
 .topic-subtopic {
@@ -1682,16 +1802,16 @@ body {
 }
 
 .topic-subtopic:hover {
-  background: #f3f4f6;
+  background: var(--color-bg-surface-hover);
 }
 
 .topic-subtopic + .topic-subtopic {
-  border-top: 1px solid #f3f4f6;
+  border-top: 1px solid var(--color-bg-surface-hover);
 }
 
 .topic-subtopic__name {
   font-weight: 500;
-  color: #374151;
+  color: var(--color-text-primary);
   text-transform: capitalize;
 }
 
@@ -1700,7 +1820,7 @@ body {
   align-items: center;
   gap: 0.375rem;
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
 }
 
 .topic-subtopic__count {
@@ -1708,7 +1828,7 @@ body {
 }
 
 .topic-subtopic__separator {
-  color: #d1d5db;
+  color: var(--color-border);
 }
 
 /* ── Public responsive (extended) ─────────────────────────────────────────── */