chore: change hex colors to tailwind bariables

src/shared/ui/Button/Button.svelte

@@ -138,11 +138,11 @@ const variantStyles: Record<ButtonVariant, string> = {
         'text-neutral-400 dark:text-neutral-400',
         'border border-transparent',
         // Hover (inactive) — semi-transparent lift, no bg-paper token
-        'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50',
+        'hover:bg-paper/50 dark:hover:bg-dark-card/50',
         'hover:text-neutral-900 dark:hover:text-neutral-100',
         'hover:border-black/5 dark:hover:border-white/10',
         // Press
-        'active:bg-white/70 dark:active:bg-[#1e1e1e]/70',
+        'active:bg-paper/70 dark:active:bg-dark-card/70',
         // Disabled
         'disabled:text-neutral-300 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
@@ -169,7 +169,7 @@ const iconSizeStyles: Record<ButtonSize, string> = {
 const activeStyles: Partial<Record<ButtonVariant, string>> = {
     secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20',
     tertiary:
-        'bg-paper dark:bg-[#1e1e1e] border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
+        'bg-paper dark:bg-dark-card border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
     ghost: 'bg-transparent dark:bg-transparent text-brand dark:text-brand',
     outline: 'bg-surface dark:bg-paper border-brand',
     icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',

src/shared/ui/ComboControl/ComboControl.svelte

@@ -129,8 +129,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                                 'border border-transparent',
                                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
                                 open
-                                    ? 'bg-white dark:bg-[#1e1e1e] shadow-sm border-black/5 dark:border-white/10'
-                                    : 'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50',
+                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-black/5 dark:border-white/10'
+                                    : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
                             aria-label={controlLabel}
                         >
@@ -157,7 +157,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
                 <!-- Vertical slider popover -->
                 <PopoverContent
-                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-black/5 dark:border-white/10 shadow-sm bg-white dark:bg-[#1e1e1e]"
+                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-black/5 dark:border-white/10 shadow-sm bg-paper dark:bg-dark-card"
                     align="center"
                     side="top"
                 >

src/shared/ui/Section/SectionTitle/SectionTitle.svelte

@@ -13,7 +13,7 @@ interface Props {
 const { text }: Props = $props();
 </script>
 {#if text}
-    <h2 class="text-3xl md:text-4xl lg:text-5xl font-['Space_Grotesk'] font-bold text-[#1a1a1a] dark:text-[#e5e5e5] tracking-tight">
+    <h2 class="text-3xl md:text-4xl lg:text-5xl font-['Space_Grotesk'] font-bold text-swiss-black dark:text-neutral-200 tracking-tight">
         {text}
     </h2>
 {/if}

src/shared/ui/SidebarContainer/SidebarContainer.svelte

@@ -85,7 +85,7 @@ function close() {
             'will-change-[width]',
             'transition-[width] duration-300 ease-out',
             'border-r border-black/5 dark:border-white/10',
-            'bg-[#f3f0e9] dark:bg-[#121212]',
+            'bg-surface dark:bg-dark-bg',
             isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
             'transition-[width,opacity] duration-300 ease-out',
             className,