feat(08-04): convert sidebar em-based spacing to px and apply icon/type tokens

- Sidebar: convert all em-based padding/gap to px values, icon sizes to --yj-icon-md
- Now-playing: cover placeholder icon to --yj-icon-lg, text sizes to type tokens
- Search-bar: search icon to --yj-icon-sm, input font to --yj-text-md
- Audio-player: convert em-based gap/padding/margin to px values
- Seek-bar: tooltip font to --yj-text-lg, margin from em to px
- Volume-control: padding/margin from em to px, thumb sizes from em to px
- All components import designTokens and include in static styles

frontend/src/components/audio-player/audio-player.ts

@@ -3,20 +3,21 @@ import { customElement } from 'lit/decorators.js';
 import './controls/player-controls';
 import './seekbar/seek-bar';
 import './volume-control/volume-control';
+import { designTokens } from '../../styles/tokens.css';
 
 @customElement('audio-player')
 export class AudioPlayer extends LitElement {
-  static override styles = css`
+  static override styles = [designTokens, css`
     .audio-player-container {
       display: flex;
       align-items: center;
-      gap: 0.5em;
+      gap: 8px;
     }
 
     .player-main {
       flex: 1;
     }
-  `;
+  `];
 
   override render() {
     return html`