diff --git a/public/themes-manifest.json b/public/themes-manifest.json
index 080cc03..fce2bb3 100644
--- a/public/themes-manifest.json
+++ b/public/themes-manifest.json
@@ -12,5 +12,5 @@
       "hasMasterSlide": true
     }
   },
-  "generated": "2025-08-21T17:31:29.998Z"
+  "generated": "2025-08-21T18:05:29.649Z"
 }
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index a092c76..02fd906 100644
--- a/src/App.css
+++ b/src/App.css
@@ -12,8 +12,8 @@
 }
 
 .app-header {
-  border-bottom: 1px solid #e5e7eb;
-  background: #ffffff;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
   width: 100%;
   box-sizing: border-box;
 }
@@ -23,19 +23,19 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem 2rem;
-  border-bottom: 1px solid #f1f5f9;
+  border-bottom: 1px solid var(--border-primary);
 }
 
 .app-logo {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #1e293b;
+  color: var(--text-primary);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .app-logo:hover {
-  color: #3b82f6;
+  color: var(--text-accent);
 }
 
 .nav-actions {
@@ -56,16 +56,16 @@
 }
 
 .nav-button.primary {
-  background: #3b82f6;
-  color: white;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
 }
 
 .nav-button.primary:hover {
-  background: #2563eb;
+  background: var(--btn-primary-bg-hover);
 }
 
 .nav-link {
-  color: #64748b;
+  color: var(--text-secondary);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
@@ -73,7 +73,7 @@
 }
 
 .nav-link:hover {
-  color: #334155;
+  color: var(--text-primary);
 }
 
 .page-title-section {
@@ -83,14 +83,14 @@
 
 .app-header h1 {
   margin: 0;
-  color: #1f2937;
+  color: var(--text-primary);
   font-size: 2rem;
   font-weight: 600;
 }
 
 .app-header p {
   margin: 0.5rem 0 0 0;
-  color: #6b7280;
+  color: var(--text-tertiary);
   font-size: 1rem;
 }
 
@@ -105,14 +105,14 @@
 .selected-theme-section {
   margin-top: 2rem;
   padding: 1.5rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--border-secondary);
   border-radius: 0.5rem;
-  background: #f9fafb;
+  background: var(--bg-muted);
 }
 
 .selected-theme-title {
   margin: 0 0 1rem 0;
-  color: #1f2937;
+  color: var(--text-primary);
   font-size: 1.25rem;
   font-weight: 600;
 }
@@ -125,11 +125,11 @@
 }
 
 .selected-theme-item {
-  color: #374151;
+  color: var(--text-secondary);
 }
 
 .selected-theme-item strong {
-  color: #1f2937;
+  color: var(--text-primary);
   font-weight: 600;
 }
 
diff --git a/src/components/presentations/PresentationEditor.css b/src/components/presentations/PresentationEditor.css
index 0ae7d77..8a50526 100644
--- a/src/components/presentations/PresentationEditor.css
+++ b/src/components/presentations/PresentationEditor.css
@@ -1,14 +1,14 @@
 .presentation-editor {
   min-height: 100vh;
-  background: #f8fafc;
+  background: var(--bg-primary);
   display: flex;
   flex-direction: column;
 }
 
 /* Header */
 .editor-header {
-  background: white;
-  border-bottom: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-primary);
   padding: 1rem 2rem;
   display: flex;
   justify-content: space-between;
@@ -26,7 +26,7 @@
 }
 
 .back-link {
-  color: #64748b;
+  color: var(--text-secondary);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
@@ -37,12 +37,12 @@
 }
 
 .back-link:hover {
-  background: #f1f5f9;
-  color: #334155;
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .presentation-title span  {
-  color: #64748b;
+  color: var(--text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -56,8 +56,8 @@
 }
 
 .theme-badge {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-blue-100);
+  color: var(--color-blue-800);
   padding: 0.25rem 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
@@ -65,13 +65,13 @@
 }
 
 .slide-counter {
-  color: #6b7280;
+  color: var(--text-tertiary);
   font-size: 0.875rem;
   font-weight: 500;
 }
 
 .saving-indicator {
-  color: #f59e0b;
+  color: var(--text-warning);
   font-size: 0.875rem;
   font-weight: 500;
 }
@@ -97,23 +97,23 @@
 }
 
 .action-button.primary {
-  background: #3b82f6;
-  color: white;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
 }
 
 .action-button.primary:hover:not(:disabled) {
-  background: #2563eb;
+  background: var(--btn-primary-bg-hover);
 }
 
 .action-button.secondary {
-  background: #f8fafc;
-  color: #64748b;
-  border: 1px solid #e2e8f0;
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+  border: 1px solid var(--btn-secondary-border);
 }
 
 .action-button.secondary:hover:not(:disabled) {
-  background: #f1f5f9;
-  color: #475569;
+  background: var(--btn-secondary-bg-hover);
+  color: var(--btn-secondary-text-hover);
 }
 
 .action-button.large {
@@ -149,20 +149,20 @@
 
 .empty-content h2 {
   margin: 0 0 0.5rem 0;
-  color: #374151;
+  color: var(--text-secondary);
   font-size: 1.5rem;
 }
 
 .empty-content p {
   margin: 0 0 2rem 0;
-  color: #6b7280;
+  color: var(--text-tertiary);
   font-size: 1rem;
 }
 
 /* Theme Preview in Empty State */
 .theme-preview {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
   border-radius: 0.75rem;
   padding: 2rem;
   margin: 2rem 0;
@@ -175,14 +175,14 @@
 
 .theme-preview h3 {
   margin: 0 0 0.5rem 0;
-  color: #1e293b;
+  color: var(--text-primary);
   font-size: 1.25rem;
   font-weight: 600;
 }
 
 .theme-description {
   margin: 0 0 1.5rem 0;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.875rem;
 }
 
@@ -195,7 +195,7 @@
 
 .available-layouts h4 {
   margin: 0 0 1rem 0;
-  color: #374151;
+  color: var(--text-secondary);
   font-size: 1rem;
   font-weight: 600;
   flex-shrink: 0;
@@ -216,48 +216,48 @@
 }
 
 .layouts-grid::-webkit-scrollbar-track {
-  background: #f1f5f9;
+  background: var(--bg-tertiary);
   border-radius: 3px;
 }
 
 .layouts-grid::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
+  background: var(--border-hover);
   border-radius: 3px;
 }
 
 .layouts-grid::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+  background: var(--color-slate-400);
 }
 
 .layout-preview-card {
-  background: white;
-  border: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: 0.5rem;
   padding: 1rem;
   transition: all 0.2s ease;
 }
 
 .layout-preview-card:hover {
-  border-color: #cbd5e1;
+  border-color: var(--border-hover);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .layout-name {
   font-weight: 600;
-  color: #1e293b;
+  color: var(--text-primary);
   font-size: 0.875rem;
   margin-bottom: 0.25rem;
 }
 
 .layout-description {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.75rem;
   margin-bottom: 0.5rem;
   line-height: 1.4;
 }
 
 .slot-count {
-  color: #059669;
+  color: var(--color-emerald-600);
   font-size: 0.75rem;
   font-weight: 500;
 }
@@ -266,11 +266,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f1f5f9;
-  border: 1px dashed #cbd5e1;
+  background: var(--bg-tertiary);
+  border: 1px dashed var(--border-hover);
   border-radius: 0.5rem;
   padding: 1rem;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.875rem;
   font-weight: 500;
 }
@@ -285,15 +285,15 @@
 /* Slide Sidebar */
 .slide-sidebar {
   width: 280px;
-  background: white;
-  border-right: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-primary);
   display: flex;
   flex-direction: column;
 }
 
 .sidebar-header {
   padding: 1rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border-primary);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -303,18 +303,18 @@
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--text-primary);
 }
 
 .add-slide-button {
   width: 32px;
   height: 32px;
-  border: 1px solid #e2e8f0;
-  background: white;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
   border-radius: 0.375rem;
   cursor: pointer;
   font-size: 1.25rem;
-  color: #3b82f6;
+  color: var(--text-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -322,8 +322,8 @@
 }
 
 .add-slide-button:hover:not(:disabled) {
-  background: #f8fafc;
-  border-color: #3b82f6;
+  background: var(--bg-hover);
+  border-color: var(--border-accent);
 }
 
 .add-slide-button:disabled {
@@ -337,126 +337,13 @@
   padding: 0.5rem;
 }
 
+/* Slide thumbnails specific to editor layout - positioning only */
 .slide-thumbnail {
-  background: white;
-  border: 2px solid #e2e8f0;
-  border-radius: 0.5rem;
   margin-bottom: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
 }
 
-.slide-thumbnail:hover {
-  border-color: #cbd5e1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+/* Layout-related thumbnail styles moved to SlideThumbnail.css */
 
-.slide-thumbnail.active {
-  border-color: #3b82f6;
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
-}
-
-.thumbnail-number {
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  background: #374151;
-  color: white;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 500;
-  z-index: 10;
-}
-
-.slide-thumbnail.active .thumbnail-number {
-  background: #3b82f6;
-}
-
-.thumbnail-preview {
-  padding: 2rem 1rem 1rem;
-  min-height: 80px;
-  background: #f8fafc;
-  border-radius: 0.25rem;
-  margin: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbnail-content {
-  text-align: center;
-}
-
-.layout-name {
-  display: block;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #374151;
-  margin-bottom: 0.25rem;
-}
-
-.content-count {
-  display: block;
-  font-size: 0.625rem;
-  color: #6b7280;
-}
-
-.thumbnail-actions {
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  justify-content: center;
-  border-top: 1px solid #f1f5f9;
-}
-
-.thumbnail-action {
-  width: 28px;
-  height: 28px;
-  border: 1px solid #e2e8f0;
-  background: white;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: #6b7280;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.thumbnail-action:hover:not(:disabled) {
-  background: #f8fafc;
-  border-color: #cbd5e1;
-}
-
-.thumbnail-action.edit {
-  background: #eff6ff;
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.thumbnail-action.edit:hover:not(:disabled) {
-  background: #dbeafe;
-  border-color: #2563eb;
-  color: #2563eb;
-}
-
-.thumbnail-action.delete:hover:not(:disabled) {
-  background: #fef2f2;
-  border-color: #fecaca;
-  color: #dc2626;
-}
-
-.thumbnail-action:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
 
 /* Slide Editor Area */
 .slide-editor-area {
@@ -486,7 +373,7 @@
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--text-primary);
 }
 
 .slide-controls {
@@ -496,9 +383,9 @@
 
 .control-button {
   padding: 0.375rem 0.75rem;
-  border: 1px solid #e2e8f0;
-  background: white;
-  color: #374151;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
   border-radius: 0.375rem;
   cursor: pointer;
   font-weight: 500;
@@ -507,8 +394,8 @@
 }
 
 .control-button:hover:not(:disabled) {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
 }
 
 .control-button:disabled {
@@ -517,15 +404,15 @@
 }
 
 .control-button.edit-slide-button {
-  background: #3b82f6;
-  color: white;
-  border-color: #3b82f6;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
+  border-color: var(--btn-primary-border);
   font-weight: 600;
 }
 
 .control-button.edit-slide-button:hover:not(:disabled) {
-  background: #2563eb;
-  border-color: #2563eb;
+  background: var(--btn-primary-bg-hover);
+  border-color: var(--btn-primary-border-hover);
 }
 
 .slide-content-editor {
@@ -537,8 +424,8 @@
 
 .content-preview {
   flex: 1;
-  background: white;
-  border: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: 0.75rem;
   padding: 2rem;
   min-height: 400px;
@@ -546,12 +433,12 @@
 
 .editor-placeholder {
   text-align: center;
-  color: #6b7280;
+  color: var(--text-tertiary);
 }
 
 .editor-placeholder h4 {
   margin: 0 0 1rem 0;
-  color: #374151;
+  color: var(--text-secondary);
 }
 
 .editor-placeholder p {
@@ -566,32 +453,32 @@
 .content-slot {
   margin-bottom: 1rem;
   padding: 0.75rem;
-  background: #f8fafc;
+  background: var(--bg-primary);
   border-radius: 0.375rem;
 }
 
 .content-slot label {
   display: block;
   font-weight: 500;
-  color: #374151;
+  color: var(--text-secondary);
   margin-bottom: 0.25rem;
   font-size: 0.875rem;
 }
 
 .slot-content {
-  color: #6b7280;
+  color: var(--text-tertiary);
   font-size: 0.875rem;
 }
 
 .placeholder-note {
   font-style: italic;
-  color: #9ca3af;
+  color: var(--text-muted);
   margin-top: 1.5rem;
 }
 
 .slide-notes-editor {
-  background: white;
-  border: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: 0.75rem;
   padding: 1rem;
 }
@@ -600,18 +487,18 @@
   margin: 0 0 0.75rem 0;
   font-size: 0.875rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-secondary);
 }
 
 .notes-textarea {
   width: 100%;
   min-height: 80px;
   padding: 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--border-secondary);
   border-radius: 0.5rem;
   font-size: 0.875rem;
-  color: #374151;
-  background: white;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
   box-sizing: border-box;
   resize: vertical;
   font-family: inherit;
@@ -619,7 +506,7 @@
 
 .notes-textarea:focus {
   outline: none;
-  border-color: #3b82f6;
+  border-color: var(--border-focus);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
@@ -630,7 +517,7 @@
   justify-content: center;
   padding: 2rem;
   text-align: center;
-  color: #dc2626;
+  color: var(--text-error);
 }
 
 /* Loading and Error States */
@@ -647,19 +534,19 @@
 }
 
 .loading-spinner {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 1.125rem;
 }
 
 .error-content h2,
 .not-found-content h2 {
-  color: #dc2626;
+  color: var(--text-error);
   margin: 0;
 }
 
 .error-content p,
 .not-found-content p {
-  color: #64748b;
+  color: var(--text-secondary);
   margin: 0.5rem 0 1.5rem 0;
 }
 
@@ -706,7 +593,7 @@
     width: 100%;
     max-height: 200px;
     border-right: none;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--border-primary);
   }
   
   .slides-list {
diff --git a/src/components/presentations/PresentationsList.css b/src/components/presentations/PresentationsList.css
index cba5294..3e6904f 100644
--- a/src/components/presentations/PresentationsList.css
+++ b/src/components/presentations/PresentationsList.css
@@ -1,14 +1,14 @@
 .presentations-list {
   min-height: 100vh;
-  background: #f8fafc;
+  background: var(--bg-primary);
   display: flex;
   flex-direction: column;
 }
 
 /* Header */
 .list-header {
-  background: white;
-  border-bottom: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-primary);
   padding: 2rem;
   display: flex;
   justify-content: space-between;
@@ -26,12 +26,12 @@
   margin: 0;
   font-size: 2rem;
   font-weight: 700;
-  color: #1e293b;
+  color: var(--text-primary);
 }
 
 .header-content p {
   margin: 0.5rem 0 0 0;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 1rem;
 }
 
@@ -101,13 +101,13 @@
 
 .empty-content h2 {
   margin: 0 0 0.5rem 0;
-  color: #374151;
+  color: var(--text-secondary);
   font-size: 1.5rem;
 }
 
 .empty-content p {
   margin: 0 0 2rem 0;
-  color: #6b7280;
+  color: var(--text-tertiary);
   font-size: 1rem;
 }
 
@@ -120,8 +120,8 @@
 }
 
 .presentation-card {
-  background: white;
-  border: 1px solid #e2e8f0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: 0.75rem;
   overflow: hidden;
   transition: all 0.2s ease;
@@ -130,7 +130,7 @@
 }
 
 .presentation-card:hover {
-  border-color: #cbd5e1;
+  border-color: var(--border-hover);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
@@ -152,7 +152,7 @@
   margin: 0 0 0.5rem 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -160,7 +160,7 @@
 
 .presentation-description {
   margin: 0;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.875rem;
   line-height: 1.4;
   display: -webkit-box;
@@ -178,8 +178,8 @@
 .action-icon {
   width: 32px;
   height: 32px;
-  border: 1px solid #e2e8f0;
-  background: white;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
   border-radius: 0.375rem;
   cursor: pointer;
   font-size: 0.875rem;
@@ -190,13 +190,13 @@
 }
 
 .action-icon:hover:not(:disabled) {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
 }
 
 .action-icon.delete:hover:not(:disabled) {
-  background: #fef2f2;
-  border-color: #fecaca;
+  background: var(--bg-error);
+  border-color: var(--border-error);
 }
 
 .action-icon:disabled {
@@ -226,7 +226,7 @@
 .stat-label {
   font-size: 0.75rem;
   font-weight: 500;
-  color: #6b7280;
+  color: var(--text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -234,12 +234,12 @@
 .stat-value {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #374151;
+  color: var(--text-secondary);
 }
 
 .theme-name {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-blue-100);
+  color: var(--color-blue-800);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.75rem;
@@ -247,7 +247,7 @@
 }
 
 .slides-count {
-  color: #059669;
+  color: var(--color-emerald-600);
   font-weight: 600;
 }
 
@@ -256,7 +256,7 @@
   flex-direction: column;
   gap: 0.5rem;
   padding: 1rem 0;
-  border-top: 1px solid #f1f5f9;
+  border-top: 1px solid var(--border-primary);
 }
 
 .meta-item {
@@ -267,19 +267,19 @@
 
 .meta-label {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--text-tertiary);
 }
 
 .meta-value {
   font-size: 0.75rem;
-  color: #374151;
+  color: var(--text-secondary);
   font-weight: 500;
 }
 
 /* Card Footer */
 .card-footer {
   padding: 1rem 1.5rem;
-  border-top: 1px solid #f1f5f9;
+  border-top: 1px solid var(--border-primary);
   display: flex;
   gap: 0.5rem;
 }
@@ -322,14 +322,14 @@
   justify-content: space-between;
   align-items: center;
   padding: 2rem 0;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border-primary);
   gap: 1rem;
   flex-wrap: wrap;
 }
 
 .summary-stats p {
   margin: 0;
-  color: #6b7280;
+  color: var(--text-tertiary);
   font-size: 0.875rem;
 }
 
@@ -351,17 +351,17 @@
 }
 
 .loading-spinner {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 1.125rem;
 }
 
 .error-content h2 {
-  color: #dc2626;
+  color: var(--text-error);
   margin: 0;
 }
 
 .error-content p {
-  color: #64748b;
+  color: var(--text-secondary);
   margin: 0.5rem 0 1.5rem 0;
 }
 
diff --git a/src/components/presentations/shared/SlideThumbnail.css b/src/components/presentations/shared/SlideThumbnail.css
index 056de18..030711f 100644
--- a/src/components/presentations/shared/SlideThumbnail.css
+++ b/src/components/presentations/shared/SlideThumbnail.css
@@ -1,78 +1,87 @@
+/* Slide Thumbnail Component */
 .slide-thumbnail {
   display: flex;
   flex-direction: column;
-  border: 2px solid #e5e7eb;
+  border: 2px solid var(--border-primary);
   border-radius: 0.5rem;
   cursor: pointer;
   transition: all 0.2s ease;
-  background: #ffffff;
+  background: var(--bg-secondary);
   overflow: hidden;
   position: relative;
 }
 
-.slide-thumbnail:hover {
-  border-color: #3b82f6;
+/* Interactive States - shared box-shadow */
+.slide-thumbnail:hover,
+.slide-thumbnail.active {
+  border-color: var(--border-accent);
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
 }
 
 .slide-thumbnail.active {
-  border-color: #3b82f6;
-  background: #eff6ff;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+  background: var(--bg-accent);
 }
 
+/* Thumbnail Number Badge */
 .thumbnail-number {
   position: absolute;
   top: 0.5rem;
   left: 0.5rem;
-  background: #374151;
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 600;
+  background: var(--color-gray-700);
+  color: var(--color-white);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
   z-index: 10;
 }
 
 .slide-thumbnail.active .thumbnail-number {
-  background: #3b82f6;
+  background: var(--color-blue-500);
 }
 
+/* Preview Area */
 .thumbnail-preview {
   padding: 2rem 1rem 1rem;
   min-height: 80px;
+  background: var(--bg-muted);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f9fafb;
 }
 
 .thumbnail-content {
   text-align: center;
 }
 
-.layout-name {
+/* Content Labels - shared text styling */
+.thumbnail-content span {
   display: block;
   font-size: 0.75rem;
+}
+
+.layout-name {
   font-weight: 600;
-  color: #374151;
+  color: var(--text-secondary);
   margin-bottom: 0.25rem;
 }
 
 .content-count {
-  font-size: 0.625rem;
-  color: #6b7280;
+  font-size: 0.625rem; /* Override smaller size */
+  color: var(--text-tertiary);
 }
 
+/* Action Bar */
 .thumbnail-actions {
   display: flex;
   justify-content: center;
   gap: 0.25rem;
   padding: 0.5rem;
-  background: #ffffff;
-  border-top: 1px solid #e5e7eb;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-primary);
 }
 
+/* Action Buttons - consolidated common properties */
 .thumbnail-action {
   background: none;
   border: none;
@@ -88,8 +97,9 @@
   height: 28px;
 }
 
+/* Button States - cascading hover effects */
 .thumbnail-action:hover:not(:disabled) {
-  background: #f3f4f6;
+  background: var(--bg-hover);
 }
 
 .thumbnail-action:disabled {
@@ -97,10 +107,11 @@
   cursor: not-allowed;
 }
 
+/* Specific Action Types - override general hover */
 .thumbnail-action.edit:hover:not(:disabled) {
-  background: #dbeafe;
+  background: var(--color-blue-100);
 }
 
 .thumbnail-action.delete:hover:not(:disabled) {
-  background: #fee2e2;
+  background: var(--color-red-100);
 }
\ No newline at end of file
diff --git a/src/components/slide-editor/SlideEditor.css b/src/components/slide-editor/SlideEditor.css
index 0f6cf14..3ab312d 100644
--- a/src/components/slide-editor/SlideEditor.css
+++ b/src/components/slide-editor/SlideEditor.css
@@ -471,12 +471,12 @@
 }
 
 /* Slot type colors */
-.slot-type-badge.title { background-color: #fef3c7; color: #92400e; }
-.slot-type-badge.subtitle { background-color: #e0e7ff; color: #3730a3; }
-.slot-type-badge.text { background-color: #d1fae5; color: #047857; }
-.slot-type-badge.image { background-color: #fce7f3; color: #be185d; }
-.slot-type-badge.video { background-color: #ddd6fe; color: #6b21a8; }
-.slot-type-badge.list { background-color: #fed7d7; color: #c53030; }
+.slot-type-badge.title { background-color: var(--badge-title-bg); color: var(--badge-title-text); }
+.slot-type-badge.subtitle { background-color: var(--badge-subtitle-bg); color: var(--badge-subtitle-text); }
+.slot-type-badge.text { background-color: var(--badge-text-bg); color: var(--badge-text-text); }
+.slot-type-badge.image { background-color: var(--badge-image-bg); color: var(--badge-image-text); }
+.slot-type-badge.video { background-color: var(--badge-video-bg); color: var(--badge-video-text); }
+.slot-type-badge.list { background-color: var(--badge-list-bg); color: var(--badge-list-text); }
 
 .preview-meta {
   display: flex;
@@ -579,7 +579,7 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  background: var(--theme-background, #000000);
+  background: var(--theme-background, var(--color-black));
 }
 
 .preview-hint {
@@ -588,7 +588,7 @@
   left: 50%;
   transform: translateX(-50%);
   background: rgba(255, 255, 255, 0.9);
-  color: #1f2937;
+  color: var(--text-primary);
   padding: var(--space-md) var(--space-xl);
   border-radius: var(--radius-lg);
   font-size: 0.875rem;
@@ -608,7 +608,7 @@
   height: 44px;
   border-radius: 50%;
   font-size: 1.25rem;
-  color: #374151;
+  color: var(--text-secondary);
   cursor: pointer;
   display: flex;
   align-items: center;
diff --git a/src/components/ui/AlertDialog.css b/src/components/ui/AlertDialog.css
index 702ebbc..cfe5157 100644
--- a/src/components/ui/AlertDialog.css
+++ b/src/components/ui/AlertDialog.css
@@ -13,7 +13,7 @@
 }
 
 .alert-message {
-  color: #374151;
+  color: var(--text-secondary);
   font-size: 1rem;
   line-height: 1.5;
   margin: 0;
diff --git a/src/components/ui/ConfirmDialog.css b/src/components/ui/ConfirmDialog.css
index 6677baf..7ebafce 100644
--- a/src/components/ui/ConfirmDialog.css
+++ b/src/components/ui/ConfirmDialog.css
@@ -13,7 +13,7 @@
 }
 
 .confirm-message {
-  color: #374151;
+  color: var(--text-secondary);
   font-size: 1rem;
   line-height: 1.5;
   margin: 0;
diff --git a/src/components/ui/Modal.css b/src/components/ui/Modal.css
index f16b1ed..d29bd40 100644
--- a/src/components/ui/Modal.css
+++ b/src/components/ui/Modal.css
@@ -60,7 +60,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem 1.5rem 0 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--border-primary);
   margin-bottom: 1rem;
 }
 
@@ -68,13 +68,13 @@
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: #111827;
+  color: var(--text-primary);
 }
 
 .modal-close-button {
   background: none;
   border: none;
-  color: #6b7280;
+  color: var(--text-tertiary);
   cursor: pointer;
   font-size: 1.25rem;
   padding: 0.25rem;
@@ -88,8 +88,8 @@
 }
 
 .modal-close-button:hover {
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--bg-muted);
+  color: var(--text-secondary);
 }
 
 /* Modal Body */
diff --git a/src/components/ui/buttons/ActionButton.css b/src/components/ui/buttons/ActionButton.css
index 327357c..fcf2e33 100644
--- a/src/components/ui/buttons/ActionButton.css
+++ b/src/components/ui/buttons/ActionButton.css
@@ -25,8 +25,8 @@
 }
 
 .action-button:focus-visible {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
+  outline: 2px solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .action-button:disabled {
@@ -44,35 +44,35 @@
 
 /* Primary Variant */
 .action-button.primary {
-  background: #3b82f6;
-  color: white;
-  border-color: #3b82f6;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
+  border-color: var(--btn-primary-border);
 }
 
 .action-button.primary:hover:not(:disabled) {
-  background: #2563eb;
-  border-color: #2563eb;
+  background: var(--btn-primary-bg-hover);
+  border-color: var(--btn-primary-border-hover);
 }
 
 .action-button.primary:active:not(:disabled) {
-  background: #1d4ed8;
-  border-color: #1d4ed8;
+  background: var(--btn-primary-bg-active);
+  border-color: var(--btn-primary-bg-active);
 }
 
 /* Secondary Variant */
 .action-button.secondary {
-  background: #f8fafc;
-  color: #64748b;
-  border-color: #e2e8f0;
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+  border-color: var(--btn-secondary-border);
 }
 
 .action-button.secondary:hover:not(:disabled) {
-  background: #f1f5f9;
-  color: #475569;
-  border-color: #cbd5e1;
+  background: var(--btn-secondary-bg-hover);
+  color: var(--btn-secondary-text-hover);
+  border-color: var(--btn-secondary-border-hover);
 }
 
 .action-button.secondary:active:not(:disabled) {
-  background: #e2e8f0;
-  color: #334155;
+  background: var(--btn-secondary-bg-active);
+  color: var(--btn-secondary-text-active);
 }
\ No newline at end of file
diff --git a/src/components/ui/buttons/BackButton.css b/src/components/ui/buttons/BackButton.css
index f74b8ed..dadf9cc 100644
--- a/src/components/ui/buttons/BackButton.css
+++ b/src/components/ui/buttons/BackButton.css
@@ -9,7 +9,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 500;
-  color: #64748b;
+  color: var(--text-secondary);
   
   /* Interaction */
   background: none;
@@ -22,17 +22,17 @@
 }
 
 .back-button:hover:not(:disabled) {
-  background: #f1f5f9;
-  color: #334155;
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .back-button:active:not(:disabled) {
-  background: #e2e8f0;
-  color: #1e293b;
+  background: var(--bg-active);
+  color: var(--text-primary);
 }
 
 .back-button:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
diff --git a/src/components/ui/buttons/Button.css b/src/components/ui/buttons/Button.css
index d0a6fde..bc02a9c 100644
--- a/src/components/ui/buttons/Button.css
+++ b/src/components/ui/buttons/Button.css
@@ -23,8 +23,8 @@
 }
 
 .button:focus-visible {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
+  outline: 2px solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .button:disabled {
@@ -53,71 +53,71 @@
 
 /* Primary Variant */
 .button-primary {
-  background: #3b82f6;
-  color: white;
-  border-color: #3b82f6;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
+  border-color: var(--btn-primary-border);
 }
 
 .button-primary:hover:not(:disabled) {
-  background: #2563eb;
-  border-color: #2563eb;
+  background: var(--btn-primary-bg-hover);
+  border-color: var(--btn-primary-border-hover);
 }
 
 .button-primary:active:not(:disabled) {
-  background: #1d4ed8;
-  border-color: #1d4ed8;
+  background: var(--btn-primary-bg-active);
+  border-color: var(--btn-primary-bg-active);
 }
 
 /* Secondary Variant */
 .button-secondary {
-  background: #f8fafc;
-  color: #64748b;
-  border-color: #e2e8f0;
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+  border-color: var(--btn-secondary-border);
 }
 
 .button-secondary:hover:not(:disabled) {
-  background: #f1f5f9;
-  color: #475569;
-  border-color: #cbd5e1;
+  background: var(--btn-secondary-bg-hover);
+  color: var(--btn-secondary-text-hover);
+  border-color: var(--btn-secondary-border-hover);
 }
 
 .button-secondary:active:not(:disabled) {
-  background: #e2e8f0;
-  color: #334155;
+  background: var(--btn-secondary-bg-active);
+  color: var(--btn-secondary-text-active);
 }
 
 /* Danger Variant */
 .button-danger {
-  background: #dc2626;
-  color: white;
-  border-color: #dc2626;
+  background: var(--btn-danger-bg);
+  color: var(--btn-danger-text);
+  border-color: var(--btn-danger-border);
 }
 
 .button-danger:hover:not(:disabled) {
-  background: #b91c1c;
-  border-color: #b91c1c;
+  background: var(--btn-danger-bg-hover);
+  border-color: var(--btn-danger-border-hover);
 }
 
 .button-danger:active:not(:disabled) {
-  background: #991b1b;
-  border-color: #991b1b;
+  background: var(--btn-danger-bg-active);
+  border-color: var(--btn-danger-bg-active);
 }
 
 /* Link Variant */
 .button-link {
   background: none;
-  color: #64748b;
+  color: var(--text-secondary);
   border: none;
   text-decoration: underline;
   padding: 0.25rem 0.5rem;
 }
 
 .button-link:hover:not(:disabled) {
-  color: #374151;
+  color: var(--text-primary);
 }
 
 .button-link:active:not(:disabled) {
-  color: #1f2937;
+  color: var(--text-primary);
 }
 
 /* Loading State */
diff --git a/src/index.css b/src/index.css
index fb92a9f..b9baad7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,11 +1,14 @@
+/* Import global color system */
+@import './styles/colors.css';
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: var(--color-dark-text);
+  background-color: var(--color-dark-bg);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,11 +18,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--color-light-link);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--color-light-link-hover);
 }
 
 body {
@@ -40,12 +43,12 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--color-dark-surface);
   cursor: pointer;
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: var(--color-light-link);
 }
 button:focus,
 button:focus-visible {
@@ -54,13 +57,13 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    color: var(--color-dark-secondary);
+    background-color: var(--color-white);
   }
   a:hover {
-    color: #747bff;
+    color: var(--color-light-link-alt);
   }
   button {
-    background-color: #f9f9f9;
+    background-color: var(--color-gray-50);
   }
 }
diff --git a/src/styles/colors.css b/src/styles/colors.css
new file mode 100644
index 0000000..f7903a4
--- /dev/null
+++ b/src/styles/colors.css
@@ -0,0 +1,265 @@
+/* Global Color System
+ * 
+ * This file defines a comprehensive color system using CSS custom properties (variables)
+ * that replaces hardcoded colors throughout the application.
+ * 
+ * Structure:
+ * - Base colors (white, black)
+ * - Gray and Slate scales (neutrals)
+ * - Blue scale (primary brand color)
+ * - Red scale (errors/danger)
+ * - Green scale (success)
+ * - Yellow/Amber scale (warnings)
+ * - Purple/Indigo scale (accents)
+ * - Pink/Rose scale (additional accents)
+ * - Dark mode specific colors
+ * - Semantic color mappings for consistent usage across components
+ * 
+ * Usage: Always use semantic color variables (e.g., --text-primary, --bg-secondary)
+ * rather than specific color values (e.g., --color-slate-800) for better maintainability
+ * and theme consistency.
+ */
+:root {
+  /* Base Colors */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  
+  /* Gray Scale */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  
+  /* Slate Scale (for UI elements) */
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  
+  /* Blue Scale (Primary) */
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  
+  /* Red Scale (Error/Danger) */
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  
+  /* Green Scale (Success) */
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  
+  /* Emerald Scale (Alternative Success) */
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  
+  /* Yellow/Amber Scale (Warning) */
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  
+  /* Purple/Indigo Scale (Accent) */
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7c3aed;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  
+  /* Pink/Rose Scale */
+  --color-pink-100: #fce7f3;
+  --color-pink-600: #be185d;
+  --color-rose-600: #c53030;
+  --color-rose-100: #fed7d7;
+  
+  /* Dark Mode Colors */
+  --color-dark-bg: #242424;
+  --color-dark-surface: #1a1a1a;
+  --color-dark-text: rgba(255, 255, 255, 0.87);
+  --color-dark-secondary: #213547;
+  
+  /* Light Mode Link Colors */
+  --color-light-link: #646cff;
+  --color-light-link-hover: #535bf2;
+  --color-light-link-alt: #747bff;
+  
+  /* Semantic Color Mapping */
+  /* Backgrounds */
+  --bg-primary: var(--color-slate-50);
+  --bg-secondary: var(--color-white);
+  --bg-tertiary: var(--color-slate-100);
+  --bg-accent: var(--color-blue-50);
+  --bg-error: var(--color-red-50);
+  --bg-success: var(--color-green-50);
+  --bg-warning: var(--color-amber-50);
+  --bg-muted: var(--color-gray-50);
+  --bg-hover: var(--color-slate-100);
+  --bg-active: var(--color-slate-200);
+  
+  /* Borders */
+  --border-primary: var(--color-slate-200);
+  --border-secondary: var(--color-gray-300);
+  --border-accent: var(--color-blue-500);
+  --border-hover: var(--color-slate-300);
+  --border-error: var(--color-red-200);
+  --border-success: var(--color-green-200);
+  --border-warning: var(--color-amber-300);
+  --border-focus: var(--color-blue-500);
+  
+  /* Text Colors */
+  --text-primary: var(--color-slate-800);
+  --text-secondary: var(--color-slate-500);
+  --text-tertiary: var(--color-gray-500);
+  --text-accent: var(--color-blue-500);
+  --text-error: var(--color-red-600);
+  --text-success: var(--color-green-600);
+  --text-warning: var(--color-amber-600);
+  --text-muted: var(--color-gray-400);
+  --text-link: var(--color-blue-600);
+  --text-link-hover: var(--color-blue-700);
+  --text-on-dark: var(--color-white);
+  --text-on-light: var(--color-gray-900);
+  
+  /* Button Colors */
+  --btn-primary-bg: var(--color-blue-500);
+  --btn-primary-bg-hover: var(--color-blue-600);
+  --btn-primary-bg-active: var(--color-blue-700);
+  --btn-primary-text: var(--color-white);
+  --btn-primary-border: var(--color-blue-500);
+  --btn-primary-border-hover: var(--color-blue-600);
+  
+  --btn-secondary-bg: var(--color-slate-50);
+  --btn-secondary-bg-hover: var(--color-slate-100);
+  --btn-secondary-bg-active: var(--color-slate-200);
+  --btn-secondary-text: var(--color-slate-500);
+  --btn-secondary-text-hover: var(--color-slate-600);
+  --btn-secondary-text-active: var(--color-slate-700);
+  --btn-secondary-border: var(--color-slate-200);
+  --btn-secondary-border-hover: var(--color-slate-300);
+  
+  --btn-danger-bg: var(--color-red-600);
+  --btn-danger-bg-hover: var(--color-red-700);
+  --btn-danger-bg-active: var(--color-red-800);
+  --btn-danger-text: var(--color-white);
+  --btn-danger-border: var(--color-red-600);
+  --btn-danger-border-hover: var(--color-red-700);
+  
+  /* Badge/Tag Colors */
+  --badge-title-bg: var(--color-amber-100);
+  --badge-title-text: var(--color-amber-800);
+  --badge-subtitle-bg: var(--color-indigo-100);
+  --badge-subtitle-text: var(--color-indigo-800);
+  --badge-text-bg: var(--color-green-100);
+  --badge-text-text: var(--color-green-700);
+  --badge-image-bg: var(--color-pink-100);
+  --badge-image-text: var(--color-pink-600);
+  --badge-video-bg: var(--color-violet-200);
+  --badge-video-text: var(--color-purple-800);
+  --badge-list-bg: var(--color-rose-100);
+  --badge-list-text: var(--color-rose-600);
+  
+  /* Focus & Selection */
+  --focus-ring: var(--color-blue-500);
+  --focus-ring-offset: 2px;
+  --selection-bg: var(--color-blue-100);
+  --selection-text: var(--color-blue-800);
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Override semantic colors for dark mode */
+    --bg-primary: var(--color-gray-900);
+    --bg-secondary: var(--color-gray-800);
+    --bg-tertiary: var(--color-gray-700);
+    --bg-accent: var(--color-blue-900);
+    --bg-error: var(--color-red-900);
+    --bg-success: var(--color-green-900);
+    --bg-warning: var(--color-amber-900);
+    --bg-muted: var(--color-gray-800);
+    --bg-hover: var(--color-gray-700);
+    --bg-active: var(--color-gray-600);
+    
+    --border-primary: var(--color-gray-600);
+    --border-secondary: var(--color-gray-500);
+    --border-hover: var(--color-gray-500);
+    --border-accent: var(--color-blue-400);
+    --border-focus: var(--color-blue-400);
+    
+    --text-primary: var(--color-gray-100);
+    --text-secondary: var(--color-gray-300);
+    --text-tertiary: var(--color-gray-400);
+    --text-accent: var(--color-blue-400);
+    --text-link: var(--color-blue-400);
+    --text-link-hover: var(--color-blue-300);
+    --text-muted: var(--color-gray-500);
+    
+    --btn-secondary-bg: var(--color-gray-700);
+    --btn-secondary-bg-hover: var(--color-gray-600);
+    --btn-secondary-bg-active: var(--color-gray-500);
+    --btn-secondary-text: var(--color-gray-300);
+    --btn-secondary-text-hover: var(--color-gray-200);
+    --btn-secondary-text-active: var(--color-gray-100);
+    --btn-secondary-border: var(--color-gray-600);
+    --btn-secondary-border-hover: var(--color-gray-500);
+  }
+}
\ No newline at end of file