refactor: use tailwind custom colors for themes

Use tailwind v4 @theme block so we can use bg-layer-0 instead of
bg-[--layer-0] for theme colors.

packages/ui/src/routes/Section.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { type Snippet } from 'svelte';
-  let { title, value, children } = $props<{
+  let { title, value, children, class: _class } = $props<{
     title?: string;
     value?: unknown;
     children?: Snippet;
+    class?: string;
   }>();
 </script>
 
-<section class="border border-1/2 mb-4 p-4 flex flex-col gap-4">
+<section class="border-outline border-1/2 bg-layer-1 rounded border mb-4 p-4 flex flex-col gap-4 {_class}">
   <h3 class="flex gap-2 font-bold">
     {title}
     <p class="font-normal! opacity-50!">{value}</p>