edit theming callout section to be centered stying and move syntax info to content page

Author: Kevin Zuniga Cuellar

docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx

@@ -153,6 +153,8 @@ TutorialKit comes with built-in support for both Markdown and MDX, powered by As
 
 Callouts are visual elements designed to highlight specific information or provide additional context within a document or user interface. They are ideal for drawing attention to important tips, warnings, and other key messages.
 
+You can create callouts using the following types: tip, info, warn, danger and success.
+
 ```
 :::tip
 Remember to save your work frequently to avoid losing any changes.

docs/tutorialkit.dev/src/content/docs/reference/theming.mdx

@@ -77,21 +77,7 @@ The content refers to the main part of the lesson that contains the text and ima
 
 ### Callouts
 
-Callouts are visual elements used to draw attention to specific information or provide additional context within a document or user interface. They are typically used to highlight important tips, warnings, or other types of messages.
-
-For instanceof, here's an example of an info callout.
-
-![Content](./images/theming-callout.png)
-
-Callouts are created like this:
-
-```
-:::tip
-This is a tip
-:::
-```
-
-Valid callout names are `tip`, `info`, `warn` and `danger`.
+Customize the appearance of each callout type by adjusting its specific style tokens. Each callout includes tokens for elements such as text color, title color, icon color, background, code snippet color, and border color.
 
 #### Tip