Palette dynamique dans BookPlayer et admin

- 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>
2026-03-14 16:41:23 +01:00
parent 9caf11c8ab
commit 8f548afb17
19 changed files with 170 additions and 170 deletions
--- 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>
--- 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>
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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;
 }

--- 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 {
--- 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) {
--- 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;
--- 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>
--- 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 {
--- 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>
--- 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;
 }
--- 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;
 }

--- 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>
--- 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>
--- 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>
--- 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>