From 8f548afb179c04aed6ac023ad0deb46906a3ab27 Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Sat, 14 Mar 2026 16:41:23 +0100
Subject: [PATCH] Palette dynamique dans BookPlayer et admin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BookPlayer : toutes les couleurs HSL en dur remplacées par variables CSS palette
- Admin (sidebar, formulaires, pages, book, songs, messages, media, login) : idem
- L'ambiance graphique suit maintenant la palette active partout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/components/admin/AdminFieldList.vue      | 14 ++---
 app/components/admin/AdminFieldText.vue      |  8 +--
 app/components/admin/AdminFieldTextarea.vue  |  8 +--
 app/components/admin/AdminFormSection.vue    |  6 +--
 app/components/admin/AdminMarkdownEditor.vue | 20 ++++----
 app/components/admin/AdminMediaBrowser.vue   | 30 +++++------
 app/components/admin/AdminMediaUpload.vue    | 10 ++--
 app/components/admin/AdminSaveButton.vue     |  4 +-
 app/components/admin/AdminSidebar.vue        | 18 +++----
 app/components/book/BookPlayer.vue           | 38 +++++++-------
 app/pages/admin/book/[slug].vue              | 32 ++++++------
 app/pages/admin/book/index.vue               | 54 ++++++++++----------
 app/pages/admin/index.vue                    |  8 +--
 app/pages/admin/login.vue                    | 24 ++++-----
 app/pages/admin/messages.vue                 | 22 ++++----
 app/pages/admin/pages/[...path].vue          |  8 +--
 app/pages/admin/pages/index.vue              |  8 +--
 app/pages/admin/site.vue                     |  6 +--
 app/pages/admin/songs.vue                    | 22 ++++----
 19 files changed, 170 insertions(+), 170 deletions(-)

diff --git a/app/components/admin/AdminFieldList.vue b/app/components/admin/AdminFieldList.vue
index 93706cf..e9cab60 100644
--- a/app/components/admin/AdminFieldList.vue
+++ b/app/components/admin/AdminFieldList.vue
@@ -58,7 +58,7 @@ function addItem() {
 .field-label {
   font-size: 0.8rem;
   font-weight: 500;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
 }
 
 .list-item {
@@ -66,9 +66,9 @@ function addItem() {
   align-items: flex-start;
   gap: 0.5rem;
   padding: 0.5rem;
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
-  background: hsl(20 8% 5%);
+  background: hsl(var(--color-bg));
 }
 
 .list-item > :deep(*:first-child) {
@@ -101,9 +101,9 @@ function addItem() {
   gap: 0.375rem;
   padding: 0.375rem 0.75rem;
   border-radius: 0.5rem;
-  border: 1px dashed hsl(20 8% 22%);
+  border: 1px dashed hsl(var(--color-surface-light));
   background: none;
-  color: hsl(20 8% 50%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.8rem;
   cursor: pointer;
   transition: all 0.2s;
@@ -111,7 +111,7 @@ function addItem() {
 }
 
 .list-add:hover {
-  border-color: hsl(12 76% 48% / 0.4);
-  color: hsl(12 76% 68%);
+  border-color: hsl(var(--color-primary) / 0.4);
+  color: hsl(var(--color-primary));
 }
 </style>
diff --git a/app/components/admin/AdminFieldText.vue b/app/components/admin/AdminFieldText.vue
index 5d3ee62..2f18ada 100644
--- a/app/components/admin/AdminFieldText.vue
+++ b/app/components/admin/AdminFieldText.vue
@@ -36,14 +36,14 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
 .field-label {
   font-size: 0.8rem;
   font-weight: 500;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
 }
 
 .field-input {
   padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.875rem;
   transition: border-color 0.2s;
@@ -51,6 +51,6 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
 
 .field-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 </style>
diff --git a/app/components/admin/AdminFieldTextarea.vue b/app/components/admin/AdminFieldTextarea.vue
index 6d209b8..afddc12 100644
--- a/app/components/admin/AdminFieldTextarea.vue
+++ b/app/components/admin/AdminFieldTextarea.vue
@@ -37,14 +37,14 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
 .field-label {
   font-size: 0.8rem;
   font-weight: 500;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
 }
 
 .field-textarea {
   padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.875rem;
   resize: vertical;
@@ -55,6 +55,6 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
 
 .field-textarea:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 </style>
diff --git a/app/components/admin/AdminFormSection.vue b/app/components/admin/AdminFormSection.vue
index 891ab6a..bf87921 100644
--- a/app/components/admin/AdminFormSection.vue
+++ b/app/components/admin/AdminFormSection.vue
@@ -19,7 +19,7 @@ defineProps<{
 
 <style scoped>
 .admin-section {
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.75rem;
   overflow: hidden;
   margin-bottom: 1rem;
@@ -34,12 +34,12 @@ defineProps<{
   font-size: 0.9rem;
   color: white;
   cursor: pointer;
-  background: hsl(20 8% 6%);
+  background: hsl(var(--color-bg));
   user-select: none;
 }
 
 .admin-section-header:hover {
-  background: hsl(20 8% 8%);
+  background: hsl(var(--color-surface));
 }
 
 .admin-section[open] .section-arrow {
diff --git a/app/components/admin/AdminMarkdownEditor.vue b/app/components/admin/AdminMarkdownEditor.vue
index 06c4678..9a7d39e 100644
--- a/app/components/admin/AdminMarkdownEditor.vue
+++ b/app/components/admin/AdminMarkdownEditor.vue
@@ -98,7 +98,7 @@ const renderedHtml = computed(() => {
 
 <style scoped>
 .md-editor {
-  border: 1px solid hsl(20 8% 18%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
   overflow: hidden;
 }
@@ -107,8 +107,8 @@ const renderedHtml = computed(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: hsl(20 8% 6%);
-  border-bottom: 1px solid hsl(20 8% 14%);
+  background: hsl(var(--color-bg));
+  border-bottom: 1px solid hsl(var(--color-surface-light));
 }
 
 .md-tabs {
@@ -122,7 +122,7 @@ const renderedHtml = computed(() => {
   padding: 0.5rem 0.875rem;
   border: none;
   background: none;
-  color: hsl(20 8% 50%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.8rem;
   cursor: pointer;
   transition: all 0.2s;
@@ -130,12 +130,12 @@ const renderedHtml = computed(() => {
 
 .md-tab--active {
   color: white;
-  background: hsl(20 8% 10%);
+  background: hsl(var(--color-surface));
 }
 
 .md-fullscreen {
   padding: 0.5rem 0.75rem;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
   transition: color 0.2s;
 }
 .md-fullscreen:hover,
@@ -151,14 +151,14 @@ const renderedHtml = computed(() => {
 }
 
 .md-body--split .md-preview {
-  border-left: 1px solid hsl(20 8% 14%);
+  border-left: 1px solid hsl(var(--color-surface-light));
 }
 
 .md-body--fullscreen {
   position: fixed;
   inset: 0;
   z-index: 50;
-  background: hsl(20 8% 4%);
+  background: hsl(var(--color-bg));
 }
 
 .md-body--fullscreen .md-textarea,
@@ -170,7 +170,7 @@ const renderedHtml = computed(() => {
   width: 100%;
   padding: 1rem;
   border: none;
-  background: hsl(20 8% 4%);
+  background: hsl(var(--color-bg));
   color: white;
   font-family: var(--font-mono, monospace);
   font-size: 0.85rem;
@@ -189,6 +189,6 @@ const renderedHtml = computed(() => {
   min-height: 24rem;
   max-height: 70vh;
   overflow-y: auto;
-  background: hsl(20 8% 4%);
+  background: hsl(var(--color-bg));
 }
 </style>
diff --git a/app/components/admin/AdminMediaBrowser.vue b/app/components/admin/AdminMediaBrowser.vue
index 865a41e..9417ccc 100644
--- a/app/components/admin/AdminMediaBrowser.vue
+++ b/app/components/admin/AdminMediaBrowser.vue
@@ -102,18 +102,18 @@ function formatSize(bytes: number): string {
 .filter-btn {
   padding: 0.25rem 0.625rem;
   border-radius: 9999px;
-  border: 1px solid hsl(20 8% 18%);
+  border: 1px solid hsl(var(--color-surface-light));
   background: none;
-  color: hsl(20 8% 55%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.75rem;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .filter-btn--active {
-  background: hsl(12 76% 48% / 0.15);
-  border-color: hsl(12 76% 48% / 0.3);
-  color: hsl(12 76% 68%);
+  background: hsl(var(--color-primary) / 0.15);
+  border-color: hsl(var(--color-primary) / 0.3);
+  color: hsl(var(--color-primary));
 }
 
 .media-grid {
@@ -123,7 +123,7 @@ function formatSize(bytes: number): string {
 }
 
 .media-card {
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
   overflow: hidden;
   cursor: pointer;
@@ -131,18 +131,18 @@ function formatSize(bytes: number): string {
 }
 
 .media-card:hover {
-  border-color: hsl(20 8% 22%);
+  border-color: hsl(var(--color-surface-light));
 }
 
 .media-card--selected {
-  border-color: hsl(12 76% 48%);
-  box-shadow: 0 0 0 1px hsl(12 76% 48% / 0.3);
+  border-color: hsl(var(--color-primary));
+  box-shadow: 0 0 0 1px hsl(var(--color-primary) / 0.3);
 }
 
 .media-thumb {
   aspect-ratio: 1;
   overflow: hidden;
-  background: hsl(20 8% 6%);
+  background: hsl(var(--color-bg));
 }
 
 .media-thumb img {
@@ -156,8 +156,8 @@ function formatSize(bytes: number): string {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: hsl(20 8% 6%);
-  color: hsl(20 8% 40%);
+  background: hsl(var(--color-bg));
+  color: hsl(var(--color-text-muted));
 }
 
 .media-info {
@@ -177,7 +177,7 @@ function formatSize(bytes: number): string {
 
 .media-size {
   font-size: 0.65rem;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
 }
 
 .media-actions {
@@ -186,9 +186,9 @@ function formatSize(bytes: number): string {
   justify-content: space-between;
   margin-top: 1rem;
   padding: 0.75rem;
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
-  background: hsl(20 8% 5%);
+  background: hsl(var(--color-bg));
 }
 
 .delete-btn {
diff --git a/app/components/admin/AdminMediaUpload.vue b/app/components/admin/AdminMediaUpload.vue
index a210dc9..d73941c 100644
--- a/app/components/admin/AdminMediaUpload.vue
+++ b/app/components/admin/AdminMediaUpload.vue
@@ -73,7 +73,7 @@ async function upload(files: FileList) {
 
 <style scoped>
 .upload-zone {
-  border: 2px dashed hsl(20 8% 22%);
+  border: 2px dashed hsl(var(--color-surface-light));
   border-radius: 0.75rem;
   padding: 2rem;
   text-align: center;
@@ -82,12 +82,12 @@ async function upload(files: FileList) {
 }
 
 .upload-zone:hover {
-  border-color: hsl(12 76% 48% / 0.4);
+  border-color: hsl(var(--color-primary) / 0.4);
 }
 
 .upload-zone--active {
-  border-color: hsl(12 76% 48%);
-  background: hsl(12 76% 48% / 0.05);
+  border-color: hsl(var(--color-primary));
+  background: hsl(var(--color-primary) / 0.05);
 }
 
 .upload-progress {
@@ -95,7 +95,7 @@ async function upload(files: FileList) {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  color: hsl(20 8% 55%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.85rem;
 }
 
diff --git a/app/components/admin/AdminSaveButton.vue b/app/components/admin/AdminSaveButton.vue
index 4c85efe..25fb493 100644
--- a/app/components/admin/AdminSaveButton.vue
+++ b/app/components/admin/AdminSaveButton.vue
@@ -31,7 +31,7 @@ defineEmits<{
   padding: 0.625rem 1.25rem;
   border-radius: 0.5rem;
   border: none;
-  background: hsl(12 76% 48%);
+  background: hsl(var(--color-primary));
   color: white;
   font-weight: 600;
   font-size: 0.85rem;
@@ -40,7 +40,7 @@ defineEmits<{
 }
 
 .save-btn:hover:not(:disabled) {
-  background: hsl(12 76% 42%);
+  background: hsl(var(--color-primary));
 }
 
 .save-btn:disabled {
diff --git a/app/components/admin/AdminSidebar.vue b/app/components/admin/AdminSidebar.vue
index bcc7e8c..50f33b5 100644
--- a/app/components/admin/AdminSidebar.vue
+++ b/app/components/admin/AdminSidebar.vue
@@ -91,8 +91,8 @@ async function logout() {
 
 <style scoped>
 .admin-sidebar {
-  background: hsl(20 8% 5%);
-  border-right: 1px solid hsl(20 8% 14%);
+  background: hsl(var(--color-bg));
+  border-right: 1px solid hsl(var(--color-surface-light));
   display: flex;
   flex-direction: column;
   height: 100dvh;
@@ -102,7 +102,7 @@ async function logout() {
 
 .sidebar-header {
   padding: 1.25rem 1rem;
-  border-bottom: 1px solid hsl(20 8% 14%);
+  border-bottom: 1px solid hsl(var(--color-surface-light));
 }
 
 .sidebar-nav {
@@ -116,7 +116,7 @@ async function logout() {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
   padding: 1rem 0.75rem 0.375rem;
   margin: 0;
 }
@@ -128,7 +128,7 @@ async function logout() {
   padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
   font-size: 0.85rem;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
   text-decoration: none;
   transition: all 0.2s;
   border: none;
@@ -138,18 +138,18 @@ async function logout() {
 }
 
 .sidebar-link:hover {
-  background: hsl(20 8% 10%);
+  background: hsl(var(--color-surface));
   color: white;
 }
 
 .sidebar-link--active {
-  background: hsl(12 76% 48% / 0.12);
-  color: hsl(12 76% 68%);
+  background: hsl(var(--color-primary) / 0.12);
+  color: hsl(var(--color-primary));
 }
 
 .sidebar-footer {
   padding: 0.5rem;
-  border-top: 1px solid hsl(20 8% 14%);
+  border-top: 1px solid hsl(var(--color-surface-light));
 }
 
 @media (max-width: 768px) {
diff --git a/app/components/book/BookPlayer.vue b/app/components/book/BookPlayer.vue
index 7a6a789..40db53d 100644
--- a/app/components/book/BookPlayer.vue
+++ b/app/components/book/BookPlayer.vue
@@ -447,7 +447,7 @@ onUnmounted(() => {
   position: fixed;
   inset: 0;
   z-index: 60;
-  background: hsl(20 8% 3%);
+  background: hsl(var(--color-bg));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -538,7 +538,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   z-index: 10;
   font-size: 0.68rem;
-  color: hsl(20 8% 28%);
+  color: hsl(var(--color-text-muted));
   white-space: nowrap;
 }
 
@@ -582,7 +582,7 @@ onUnmounted(() => {
   width: 2.25rem; height: 2.25rem;
   border-radius: 0.5rem;
   background: transparent;
-  color: hsl(20 8% 45%);
+  color: hsl(var(--color-text-muted));
   border: none;
   cursor: pointer;
   transition: all 0.3s;
@@ -617,7 +617,7 @@ onUnmounted(() => {
 .reader-bar-pages {
   font-family: var(--font-mono, monospace);
   font-size: 0.75rem;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
   flex-shrink: 0;
 }
 
@@ -626,16 +626,16 @@ onUnmounted(() => {
   position: absolute;
   inset: 0;
   z-index: 72;
-  background: hsl(20 8% 3% / 0.6);
+  background: hsl(var(--color-bg) / 0.6);
   backdrop-filter: blur(4px);
   display: flex;
 }
 .sommaire-panel {
   width: min(300px, 80vw);
   height: 100%;
-  background: hsl(20 8% 6% / 0.95);
+  background: hsl(var(--color-surface) / 0.95);
   backdrop-filter: blur(16px);
-  border-right: 1px solid hsl(20 8% 14%);
+  border-right: 1px solid hsl(var(--color-surface-light));
   padding: 1.5rem;
   overflow-y: auto;
   display: flex;
@@ -646,7 +646,7 @@ onUnmounted(() => {
   font-family: var(--font-display, 'Syne', sans-serif);
   font-size: 0.85rem;
   font-weight: 700;
-  color: hsl(20 8% 45%);
+  color: hsl(var(--color-text-muted));
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 0.75rem;
@@ -658,7 +658,7 @@ onUnmounted(() => {
   padding: 0.625rem 0.75rem;
   border-radius: 0.5rem;
   font-size: 0.85rem;
-  color: hsl(20 8% 55%);
+  color: hsl(var(--color-text-muted));
   background: transparent;
   border: none;
   cursor: pointer;
@@ -667,7 +667,7 @@ onUnmounted(() => {
   width: 100%;
 }
 .sommaire-item:hover {
-  background: hsl(20 8% 12%);
+  background: hsl(var(--color-surface));
   color: white;
 }
 .sommaire-item--active {
@@ -683,8 +683,8 @@ onUnmounted(() => {
   font-size: 0.65rem;
   font-weight: 700;
   font-family: var(--font-mono, monospace);
-  color: hsl(20 8% 40%);
-  background: hsl(20 8% 12%);
+  color: hsl(var(--color-text-muted));
+  background: hsl(var(--color-surface));
   flex-shrink: 0;
 }
 .sommaire-item--active .sommaire-num {
@@ -713,7 +713,7 @@ onUnmounted(() => {
   width: 100%;
   overflow: hidden auto;
   border-radius: 0.75rem;
-  background: hsl(20 8% 5% / 0.4);
+  background: hsl(var(--color-bg) / 0.4);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
 }
@@ -809,7 +809,7 @@ onUnmounted(() => {
   height: 100%;
   pointer-events: none;
   opacity: 0;
-  background: linear-gradient(to left, hsl(20 8% 3% / 0.4), transparent);
+  background: linear-gradient(to left, hsl(var(--color-bg) / 0.4), transparent);
   transition: opacity 0.15s;
   border-radius: 0 0.75rem 0.75rem 0;
 }
@@ -833,7 +833,7 @@ onUnmounted(() => {
   width: 2.5rem; height: 2.5rem;
   border-radius: 50%;
   background: transparent;
-  color: hsl(20 8% 45%);
+  color: hsl(var(--color-text-muted));
   border: none;
   cursor: pointer;
   transition: all 0.3s;
@@ -861,7 +861,7 @@ onUnmounted(() => {
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
-  border: 2px solid hsl(20 8% 22%);
+  border: 2px solid hsl(var(--color-surface-light));
   box-shadow: 0 0 10px hsl(var(--scene-h1) 50% 40% / 0.15);
 }
 .reader-disc.spinning {
@@ -878,12 +878,12 @@ onUnmounted(() => {
   transform: translate(-50%, -50%);
   width: 0.5rem; height: 0.5rem;
   border-radius: 50%;
-  background: hsl(20 8% 5%);
-  border: 1.5px solid hsl(20 8% 18%);
+  background: hsl(var(--color-bg));
+  border: 1.5px solid hsl(var(--color-surface-light));
 }
 .reader-song-name {
   font-size: 0.75rem;
-  color: hsl(20 8% 50%);
+  color: hsl(var(--color-text-muted));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/app/pages/admin/book/[slug].vue b/app/pages/admin/book/[slug].vue
index b67eec1..07781ca 100644
--- a/app/pages/admin/book/[slug].vue
+++ b/app/pages/admin/book/[slug].vue
@@ -209,7 +209,7 @@ async function save() {
 .field-label {
   display: block;
   font-size: 0.75rem;
-  color: hsl(20 8% 50%);
+  color: hsl(var(--color-text-muted));
   margin-bottom: 0.25rem;
 }
 
@@ -217,15 +217,15 @@ async function save() {
   width: 100%;
   padding: 0.5rem 0.625rem;
   border-radius: 0.375rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.85rem;
 }
 
 .field-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 
 /* ── Song tags ── */
@@ -233,41 +233,41 @@ async function save() {
   display: inline-flex;
   align-items: center;
   border-radius: 9999px;
-  border: 1px solid hsl(20 8% 22%);
+  border: 1px solid hsl(var(--color-surface-light));
   transition: all 0.15s;
   overflow: hidden;
 }
 
 .song-tag:hover {
-  border-color: hsl(12 76% 48% / 0.4);
+  border-color: hsl(var(--color-primary) / 0.4);
 }
 
 .song-tag--active {
-  border-color: hsl(12 76% 48% / 0.6);
-  background: hsl(12 76% 48% / 0.08);
+  border-color: hsl(var(--color-primary) / 0.6);
+  background: hsl(var(--color-primary) / 0.08);
 }
 
 .song-tag--primary {
-  border-color: hsl(45 90% 55%);
-  background: hsl(45 90% 55% / 0.08);
+  border-color: hsl(var(--color-accent));
+  background: hsl(var(--color-accent) / 0.08);
 }
 
 .song-tag-label {
   padding: 0.375rem 0.75rem;
   background: none;
   border: none;
-  color: hsl(20 8% 50%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.8rem;
   cursor: pointer;
   transition: color 0.15s;
 }
 
 .song-tag--active .song-tag-label {
-  color: hsl(12 76% 68%);
+  color: hsl(var(--color-primary));
 }
 
 .song-tag--primary .song-tag-label {
-  color: hsl(45 90% 65%);
+  color: hsl(var(--color-accent));
 }
 
 .song-tag-label:hover {
@@ -281,16 +281,16 @@ async function save() {
   padding: 0.375rem 0 0.375rem 0.625rem;
   background: none;
   border: none;
-  color: hsl(20 8% 30%);
+  color: hsl(var(--color-text-muted));
   cursor: pointer;
   transition: color 0.15s;
 }
 
 .song-star:hover {
-  color: hsl(45 90% 55%);
+  color: hsl(var(--color-accent));
 }
 
 .song-star--active {
-  color: hsl(45 90% 55%);
+  color: hsl(var(--color-accent));
 }
 </style>
diff --git a/app/pages/admin/book/index.vue b/app/pages/admin/book/index.vue
index 6e34e74..aae4343 100644
--- a/app/pages/admin/book/index.vue
+++ b/app/pages/admin/book/index.vue
@@ -249,9 +249,9 @@ async function removeChapter(slug: string) {
 .pdf-section {
   margin-bottom: 1.5rem;
   padding: 1rem;
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
-  background: hsl(20 8% 5%);
+  background: hsl(var(--color-bg));
 }
 
 .save-pdf-btn {
@@ -260,9 +260,9 @@ async function removeChapter(slug: string) {
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
-  border: 1px solid hsl(20 8% 25%);
+  border: 1px solid hsl(var(--color-surface-light));
   background: none;
-  color: hsl(20 8% 55%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.8rem;
   cursor: pointer;
   transition: all 0.15s;
@@ -270,8 +270,8 @@ async function removeChapter(slug: string) {
 }
 
 .save-pdf-btn:hover:not(:disabled) {
-  border-color: hsl(12 76% 48% / 0.5);
-  color: hsl(12 76% 68%);
+  border-color: hsl(var(--color-primary) / 0.5);
+  color: hsl(var(--color-primary));
 }
 
 .save-pdf-btn:disabled {
@@ -284,14 +284,14 @@ async function removeChapter(slug: string) {
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
   transition: all 0.2s;
 }
 
 .chapter-item:hover {
-  border-color: hsl(12 76% 48% / 0.3);
-  background: hsl(20 8% 6%);
+  border-color: hsl(var(--color-primary) / 0.3);
+  background: hsl(var(--color-bg));
 }
 
 .chapter-item--dragging {
@@ -299,13 +299,13 @@ async function removeChapter(slug: string) {
 }
 
 .chapter-item--over {
-  border-top: 2px solid hsl(12 76% 48%);
+  border-top: 2px solid hsl(var(--color-primary));
 }
 
 .drag-handle {
   cursor: grab;
   padding: 0.25rem;
-  color: hsl(20 8% 35%);
+  color: hsl(var(--color-text-muted));
   flex-shrink: 0;
 }
 
@@ -316,7 +316,7 @@ async function removeChapter(slug: string) {
 .chapter-order {
   font-family: var(--font-mono, monospace);
   font-size: 0.85rem;
-  color: hsl(12 76% 48% / 0.5);
+  color: hsl(var(--color-primary) / 0.5);
   font-weight: 600;
   width: 1.75rem;
 }
@@ -334,7 +334,7 @@ async function removeChapter(slug: string) {
 }
 
 .chapter-title:hover {
-  color: hsl(12 76% 68%);
+  color: hsl(var(--color-primary));
 }
 
 .chapter-songs {
@@ -348,9 +348,9 @@ async function removeChapter(slug: string) {
   font-size: 0.65rem;
   padding: 0.1rem 0.5rem;
   border-radius: 9999px;
-  background: hsl(12 76% 48% / 0.1);
-  color: hsl(12 76% 60%);
-  border: 1px solid hsl(12 76% 48% / 0.2);
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  border: 1px solid hsl(var(--color-primary) / 0.2);
 }
 
 .page-select {
@@ -358,16 +358,16 @@ async function removeChapter(slug: string) {
   max-width: 14rem;
   padding: 0.25rem 0.4rem;
   border-radius: 0.375rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
-  color: hsl(20 8% 65%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
+  color: hsl(var(--color-text-muted));
   font-size: 0.7rem;
   cursor: pointer;
 }
 
 .page-select:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 
 .delete-btn {
@@ -388,15 +388,15 @@ async function removeChapter(slug: string) {
 .admin-input {
   padding: 0.375rem 0.5rem;
   border-radius: 0.375rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.8rem;
 }
 
 .admin-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 
 .add-btn {
@@ -405,9 +405,9 @@ async function removeChapter(slug: string) {
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
-  border: 1px solid hsl(20 8% 25%);
+  border: 1px solid hsl(var(--color-surface-light));
   background: none;
-  color: hsl(20 8% 55%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.85rem;
   cursor: pointer;
   transition: all 0.15s;
@@ -415,8 +415,8 @@ async function removeChapter(slug: string) {
 }
 
 .add-btn:hover:not(:disabled) {
-  border-color: hsl(12 76% 48% / 0.5);
-  color: hsl(12 76% 68%);
+  border-color: hsl(var(--color-primary) / 0.5);
+  color: hsl(var(--color-primary));
 }
 
 .add-btn:disabled {
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index 8a61106..21584ad 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -53,14 +53,14 @@ definePageMeta({
 .dash-card {
   padding: 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid hsl(20 8% 14%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   text-decoration: none;
   transition: all 0.2s;
 }
 
 .dash-card:hover {
-  border-color: hsl(12 76% 48% / 0.3);
-  background: hsl(20 8% 8%);
+  border-color: hsl(var(--color-primary) / 0.3);
+  background: hsl(var(--color-surface));
 }
 </style>
diff --git a/app/pages/admin/login.vue b/app/pages/admin/login.vue
index a2e866d..3ca3996 100644
--- a/app/pages/admin/login.vue
+++ b/app/pages/admin/login.vue
@@ -72,16 +72,16 @@ async function login() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: hsl(20 8% 3.5%);
+  background: hsl(var(--color-bg));
 }
 
 .login-form {
   width: 100%;
   max-width: 24rem;
   padding: 2.5rem;
-  border: 1px solid hsl(20 8% 14%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 1rem;
-  background: hsl(20 8% 6%);
+  background: hsl(var(--color-bg));
 }
 
 .login-error {
@@ -97,7 +97,7 @@ async function login() {
   display: block;
   font-size: 0.8rem;
   font-weight: 500;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
   margin-bottom: 0.375rem;
 }
 
@@ -105,8 +105,8 @@ async function login() {
   width: 100%;
   padding: 0.625rem 0.75rem;
   border-radius: 0.5rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 4%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.9rem;
   margin-bottom: 1.25rem;
@@ -114,7 +114,7 @@ async function login() {
 
 .login-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 
 .login-btn {
@@ -126,7 +126,7 @@ async function login() {
   padding: 0.625rem;
   border-radius: 0.5rem;
   border: none;
-  background: hsl(12 76% 48%);
+  background: hsl(var(--color-primary));
   color: white;
   font-weight: 600;
   font-size: 0.9rem;
@@ -135,7 +135,7 @@ async function login() {
 }
 
 .login-btn:hover:not(:disabled) {
-  background: hsl(12 76% 42%);
+  background: hsl(var(--color-primary));
 }
 
 .login-btn:disabled {
@@ -147,12 +147,12 @@ async function login() {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.75rem;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
 }
 
 .dev-hint code {
-  color: hsl(12 76% 60%);
-  background: hsl(20 8% 10%);
+  color: hsl(var(--color-primary));
+  background: hsl(var(--color-surface));
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
 }
diff --git a/app/pages/admin/messages.vue b/app/pages/admin/messages.vue
index 2eb3837..f268bda 100644
--- a/app/pages/admin/messages.vue
+++ b/app/pages/admin/messages.vue
@@ -130,14 +130,14 @@ function formatDate(iso: string) {
 
 <style scoped>
 .msg-row {
-  background: hsl(20 8% 6%);
-  border: 1px solid hsl(20 8% 14%);
+  background: hsl(var(--color-bg));
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.75rem;
   padding: 1rem 1.25rem;
 }
 
 .msg-row--draft {
-  border-left: 3px solid hsl(36 80% 52%);
+  border-left: 3px solid hsl(var(--color-accent));
 }
 
 .status-badge {
@@ -155,22 +155,22 @@ function formatDate(iso: string) {
 }
 
 .status-badge--draft {
-  background: hsl(36 80% 52% / 0.15);
-  color: hsl(36 80% 66%);
+  background: hsl(var(--color-accent) / 0.15);
+  color: hsl(var(--color-accent));
 }
 
 .admin-input {
   padding: 0.375rem 0.5rem;
   border-radius: 0.375rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.8rem;
 }
 
 .admin-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 
 .action-btn {
@@ -180,15 +180,15 @@ function formatDate(iso: string) {
   padding: 0.3rem 0.6rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
   background: none;
-  border: 1px solid hsl(20 8% 16%);
+  border: 1px solid hsl(var(--color-surface-light));
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .action-btn:hover {
-  background: hsl(20 8% 10%);
+  background: hsl(var(--color-surface));
   color: white;
 }
 
diff --git a/app/pages/admin/pages/[...path].vue b/app/pages/admin/pages/[...path].vue
index d6bb840..6f51d87 100644
--- a/app/pages/admin/pages/[...path].vue
+++ b/app/pages/admin/pages/[...path].vue
@@ -83,10 +83,10 @@ async function save() {
 .yaml-textarea {
   width: 100%;
   padding: 1rem;
-  border: 1px solid hsl(20 8% 18%);
+  border: 1px solid hsl(var(--color-surface-light));
   border-radius: 0.5rem;
-  background: hsl(20 8% 4%);
-  color: hsl(36 80% 76%);
+  background: hsl(var(--color-bg));
+  color: hsl(var(--color-accent));
   font-family: var(--font-mono, monospace);
   font-size: 0.85rem;
   line-height: 1.7;
@@ -96,6 +96,6 @@ async function save() {
 
 .yaml-textarea:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 </style>
diff --git a/app/pages/admin/pages/index.vue b/app/pages/admin/pages/index.vue
index 4b3ff01..1ddcbdb 100644
--- a/app/pages/admin/pages/index.vue
+++ b/app/pages/admin/pages/index.vue
@@ -84,14 +84,14 @@ const sections = computed(() => {
   flex-direction: column;
   padding: 1rem;
   border-radius: 0.5rem;
-  border: 1px solid hsl(20 8% 14%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   text-decoration: none;
   transition: all 0.2s;
 }
 
 .page-card:hover {
-  border-color: hsl(12 76% 48% / 0.3);
-  background: hsl(20 8% 8%);
+  border-color: hsl(var(--color-primary) / 0.3);
+  background: hsl(var(--color-surface));
 }
 </style>
diff --git a/app/pages/admin/site.vue b/app/pages/admin/site.vue
index feaab07..4764a44 100644
--- a/app/pages/admin/site.vue
+++ b/app/pages/admin/site.vue
@@ -103,14 +103,14 @@ async function save() {
 .admin-input {
   padding: 0.375rem 0.5rem;
   border-radius: 0.375rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.8rem;
 }
 
 .admin-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 </style>
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
index c32ce50..f979744 100644
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -163,7 +163,7 @@ async function save() {
   align-items: flex-start;
   gap: 0.75rem;
   padding: 0.75rem 0.5rem;
-  border-bottom: 1px solid hsl(20 8% 10%);
+  border-bottom: 1px solid hsl(var(--color-surface));
   transition: background 0.15s;
 }
 
@@ -172,13 +172,13 @@ async function save() {
 }
 
 .song-row--over {
-  border-top: 2px solid hsl(12 76% 48%);
+  border-top: 2px solid hsl(var(--color-primary));
 }
 
 .drag-handle {
   cursor: grab;
   padding: 0.25rem;
-  color: hsl(20 8% 35%);
+  color: hsl(var(--color-text-muted));
   flex-shrink: 0;
   margin-top: 0.25rem;
 }
@@ -190,7 +190,7 @@ async function save() {
 .song-num {
   font-family: var(--font-mono, monospace);
   font-size: 0.8rem;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
   width: 1.25rem;
   text-align: right;
   flex-shrink: 0;
@@ -200,8 +200,8 @@ async function save() {
 .admin-input {
   padding: 0.375rem 0.5rem;
   border-radius: 0.375rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 6%);
+  border: 1px solid hsl(var(--color-surface-light));
+  background: hsl(var(--color-bg));
   color: white;
   font-size: 0.8rem;
   width: 100%;
@@ -209,7 +209,7 @@ async function save() {
 
 .admin-input:focus {
   outline: none;
-  border-color: hsl(12 76% 48% / 0.5);
+  border-color: hsl(var(--color-primary) / 0.5);
 }
 
 .lyrics-textarea {
@@ -240,16 +240,16 @@ async function save() {
   margin-top: 1rem;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
-  border: 1px dashed hsl(20 8% 25%);
+  border: 1px dashed hsl(var(--color-surface-light));
   background: none;
-  color: hsl(20 8% 55%);
+  color: hsl(var(--color-text-muted));
   font-size: 0.85rem;
   cursor: pointer;
   transition: all 0.15s;
 }
 
 .add-btn:hover {
-  border-color: hsl(12 76% 48% / 0.5);
-  color: hsl(12 76% 68%);
+  border-color: hsl(var(--color-primary) / 0.5);
+  color: hsl(var(--color-primary));
 }
 </style>