components and tailwind rework

src/components/layout/Section.svelte

@@ -1,6 +1,6 @@
 <script>
-  export let background = "transparent"; // CSS color code or color variable name from app.css
-  export let padding = "normal"; // 'none' | 'small' | 'normal' | 'large'
+  export let bg = "";
+  export let padding = "normal";
   export let fullWidth = false;
   export let id = "";
   export let className = "";
@@ -12,25 +12,13 @@
     normal: "py-12 max-md:py-8",
     large: "py-[clamp(3rem,8vw,6rem)] max-md:py-12",
   };
-
-  // Convert background to appropriate CSS value
-  $: backgroundStyle = (() => {
-    if (!background || background === "transparent") return "";
-    // If it starts with # or rgb/rgba or hsl, it's a direct color
-    if (background.startsWith("#") || background.startsWith("rgb") || background.startsWith("hsl")) {
-      return background;
-    }
-    // Otherwise treat as CSS variable name
-    return `var(--${background})`;
-  })();
 </script>
 
 <section
   {id}
-  class="w-full {paddingClasses[padding]} {className}"
-  style={backgroundStyle ? `background: ${backgroundStyle};` : ""}
+  class="w-full {paddingClasses[padding]} {bg} {className}"
 >
   <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto px-(--site-padding)">
     <slot />
   </div>
-</section>
+</section>