refactor: css variables for colors and shadows

src/app/deals/components/desktop/Board/Board.tsx

@@ -17,7 +17,7 @@ const Board: FC<Props> = ({ board }) => {
     const { onUpdateBoard } = useBoardsContext();
 
     return (
-        <Flex>
+        <Flex p={"lg"}>
             <SmallPageBlock active={selectedBoard?.id === board.id}>
                 <Group
                     px={"md"}

src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css

@@ -1,7 +1,7 @@
 
 .container {
     flex-wrap: nowrap;
-    border-bottom: solid blue 3px;
+    border-bottom: solid dodgerblue 3px;
     margin-bottom: 3px;
     cursor: pointer;
 

src/app/deals/components/shared/DealCard/DealCard.module.css

@@ -1,7 +1,7 @@
 
 .container {
     @mixin light {
-        background-color: #e0f0f4;
+        background-color: var(--color-light-aqua);
     }
     @mixin dark {
         background-color: var(--mantine-color-dark-7);

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -9,5 +9,5 @@
 }
 
 .header {
-    border-bottom: solid blue 3px;
+    border-bottom: solid dodgerblue 3px;
 }