feat(08-04): apply design tokens to cover-grid, track-list, queue-panel, and detail components

- cover-grid dynamic text tiers use --yj-text-xs/sm/md/lg tokens
- track-list sort toolbar, row text, and fav icon use design tokens
- queue-panel header and track text use type scale tokens
- track-details, track-info, artist-details, genre-details use tokens
- designTokens imported and prepended to static styles in all 8 files

frontend/src/components/cover-grid/cover-grid-styles.ts

@@ -1,5 +1,6 @@
 import { css } from 'lit';
 import { contextMenuStyles } from '@utils/context-menu-controller.js';
+import { designTokens } from '../../styles/tokens.css';
 
 /** Component-specific styles for the cover grid. */
 const gridStyles = css`
@@ -19,7 +20,7 @@ const gridStyles = css`
         align-items: center;
         gap: 6px;
         padding: 4px 8px;
-        font-size: 12px;
+        font-size: var(--yj-text-sm);
         color: var(
             --yj-text-secondary,
             #b3b3b3
@@ -68,7 +69,7 @@ const gridStyles = css`
             --yj-text-secondary,
             #b3b3b3
         );
-        font-size: 12px;
+        font-size: var(--yj-text-sm);
         padding: 0;
     }
 
@@ -100,7 +101,7 @@ const gridStyles = css`
             --yj-text-primary,
             #fff
         );
-        font-size: 13px;
+        font-size: var(--yj-text-md);
     }
 
     .sort-dropdown-panel
@@ -251,7 +252,7 @@ const gridStyles = css`
         pointer-events: none;
         background: var(--yj-bg-overlay, #495057);
         color: var(--yj-text-secondary, #b3b3b3);
-        font-size: 12px;
+        font-size: var(--yj-text-sm);
         padding: 4px 14px;
         border-radius: 12px;
         border: 1px solid
@@ -277,6 +278,7 @@ const gridStyles = css`
 
 /** Combined styles for the cover grid component. */
 export const coverGridStyles = [
+    designTokens,
     gridStyles,
     contextMenuStyles,
 ];

frontend/src/components/cover-grid/cover-grid.ts

@@ -755,12 +755,12 @@ export class CoverGrid
             `${placeholderFont}px`,
         );
 
-        // Text sizing tiers.
+        // Text sizing tiers mapped to design tokens.
         if (w < 160) {
             this.classList.add('size-small');
             this.style.setProperty(
                 '--album-name-font',
-                '11px',
+                'var(--yj-text-xs)',
             );
             this.style.setProperty(
                 '--artist-name-font',
@@ -770,21 +770,21 @@ export class CoverGrid
             this.classList.remove('size-small');
             this.style.setProperty(
                 '--album-name-font',
-                '16px',
+                'var(--yj-text-lg)',
             );
             this.style.setProperty(
                 '--artist-name-font',
-                '13px',
+                'var(--yj-text-md)',
             );
         } else {
             this.classList.remove('size-small');
             this.style.setProperty(
                 '--album-name-font',
-                '14px',
+                'var(--yj-text-lg)',
             );
             this.style.setProperty(
                 '--artist-name-font',
-                '12px',
+                'var(--yj-text-sm)',
             );
         }
     }