refactor: remove unused MDX styles and update global CSS

- Deleted the `mdx.css` file as it contained redundant styles.
- Added new MDX styles directly into `globals.css` for improved organization and maintainability.
- Updated legal pages to remove the import of the now-deleted `mdx.css`, streamlining the codebase.

src/app/[locale]/(marketing)/(legal)/cookie-policy/page.tsx

@@ -8,8 +8,6 @@ import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
-import '@/styles/mdx.css';
-
 export async function generateMetadata({
   params,
 }: {

src/app/[locale]/(marketing)/(legal)/privacy-policy/page.tsx

@@ -8,8 +8,6 @@ import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
-import '@/styles/mdx.css';
-
 export async function generateMetadata({
   params,
 }: {

src/app/[locale]/(marketing)/(legal)/terms-of-service/page.tsx

@@ -8,8 +8,6 @@ import { constructMetadata } from '@/lib/metadata';
 import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 
-import '@/styles/mdx.css';
-
 export async function generateMetadata({
   params,
 }: {

src/app/[locale]/(marketing)/(pages)/changelog/page.tsx

@@ -8,8 +8,6 @@ import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
-import '@/styles/mdx.css';
-
 export async function generateMetadata({
   params,
 }: {

src/app/[locale]/(marketing)/blog/[...slug]/page.tsx

@@ -15,8 +15,6 @@ import { notFound } from 'next/navigation';
 import { constructMetadata } from '@/lib/metadata';
 import { Locale } from 'next-intl';
 
-import '@/styles/mdx.css';
-
 /**
  * Gets the blog post from the params
  * @param props - The props of the page

src/styles/globals.css

@@ -49,3 +49,35 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* MDX styles for code highlighting */
+@layer components {
+  /**
+   * Styles for rehype-pretty-code syntax highlighting
+   */
+  [data-rehype-pretty-code-figure] code {
+    @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
+    counter-reset: line;
+    box-decoration-break: clone;
+  }
+
+  [data-rehype-pretty-code-figure] [data-line] {
+    @apply inline-block min-h-[1rem] w-full px-4 py-0.5;
+  }
+
+  [data-rehype-pretty-code-figure] [data-line-numbers] [data-line] {
+    @apply px-2;
+  }
+
+  [data-rehype-pretty-code-figure] .line-highlighted span {
+    @apply relative;
+  }
+
+  [data-rehype-pretty-code-title] {
+    @apply mt-2 px-4 pt-6 text-sm font-medium text-foreground;
+  }
+
+  [data-rehype-pretty-code-title] + pre {
+    @apply mt-2;
+  }
+}

src/styles/mdx.css

@@ -1,28 +0,0 @@
-/**
- * TODO: update
- */
-[data-rehype-pretty-code-figure] code {
-  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
-  counter-reset: line;
-  box-decoration-break: clone;
-}
-
-[data-rehype-pretty-code-figure] [data-line] {
-  @apply inline-block min-h-[1rem] w-full px-4 py-0.5;
-}
-
-[data-rehype-pretty-code-figure] [data-line-numbers] [data-line] {
-  @apply px-2;
-}
-
-[data-rehype-pretty-code-figure] .line-highlighted span {
-  @apply relative;
-}
-
-[data-rehype-pretty-code-title] {
-  @apply mt-2 px-4 pt-6 text-sm font-medium text-foreground;
-}
-
-[data-rehype-pretty-code-title] + pre {
-  @apply mt-2;
-}