chore: change hex colors to tailwind bariables

src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte

@@ -37,7 +37,7 @@ $effect(() => {
 
 <NavigationWrapper index={0} title="Comparison">
     {#snippet content(action)}
-        <div class="flex h-screen w-full overflow-hidden bg-[#f3f0e9] dark:bg-[#0a0a0a]">
+        <div class="flex h-screen w-full overflow-hidden bg-surface dark:bg-background">
             <!-- Sidebar -->
             <SidebarContainer bind:isOpen={isSidebarOpen}>
                 {#snippet sidebar()}

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -173,7 +173,7 @@ const scaleClass = $derived(
     <div
         class={cn(
             'w-full h-full flex flex-col items-center justify-center relative',
-            'bg-white dark:bg-[#1e1e1e]',
+            'bg-paper dark:bg-dark-card',
             'shadow-2xl shadow-black/5 dark:shadow-black/20',
             'transition-transform duration-300 ease-out',
             scaleClass,
@@ -181,7 +181,7 @@ const scaleClass = $derived(
     >
         <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
         <div
-            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-black dark:text-white"
+            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
             style={gridStyle}
             aria-hidden="true"
         >