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/controls/player-controls.ts

@@ -4,6 +4,7 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { queueStore } from '@store/queue-store';
 import type { RepeatMode } from '@store/queue-store';
+import { designTokens } from '../../../styles/tokens.css';
 
 @customElement('player-controls')
 export class PlayerControls extends LitElement {
@@ -38,7 +39,7 @@ export class PlayerControls extends LitElement {
     this.unsubscribeQueue?.();
   }
 
-  static override styles = css`
+  static override styles = [designTokens, css`
     #player-control-buttons {
       display: flex;
       justify-content: center;
@@ -77,7 +78,7 @@ export class PlayerControls extends LitElement {
       bottom: 2px;
       right: 2px;
     }
-  `;
+  `];
 
   private handlePlayClick = () => {
     queueStore.play();