Refactor code structure for improved readability and maintainability; removed redundant code blocks and optimized function calls.

.claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md

@@ -8,7 +8,7 @@ Reusable design tokens + scales extracted from the Luxam reference build. Drop i
 
 ```css
 @theme {
-  /* Backgrounds — obsidian → graphite layering */
+  /* Backgrounds obsidian → graphite layering */
   --color-obsidian: #08080A;   /* page background */
   --color-graphite: #15161A;   /* dark glass card */
   --color-graphite-2: #1C1D22; /* slightly lifted card variant */
@@ -17,7 +17,7 @@ Reusable design tokens + scales extracted from the Luxam reference build. Drop i
   --color-bone: #F4F0E6;       /* primary text on dark */
   --color-mist: #C7C2B5;       /* secondary/muted text */
 
-  /* Brand — gold spectrum (use sparingly + structurally) */
+  /* Brand gold spectrum (use sparingly + structurally) */
   --color-gold: #D4A437;       /* core brand gold */
   --color-gold-light: #F2C25B; /* hover, highlight, gradient stops */
   --color-gold-deep: #7A4A12;  /* gradient base */
@@ -178,14 +178,14 @@ Every card/button uses the same hover vocabulary:
 6. Optional: top hairline gold gradient fade-in.
 7. Icon disc gets `rotate-[8deg]` + amber halo shadow.
 
-Apply via `group` + `group-hover:` Tailwind variants — never per-element JS listeners.
+Apply via `group` + `group-hover:` Tailwind variants never per-element JS listeners.
 
 ---
 
 ## Container widths
 
 ```tsx
-// components/ui/Container.tsx — three variants
+// components/ui/Container.tsx three variants
 size="default" → max-w-7xl
 size="wide"    → max-w-[1480px]
 size="narrow"  → max-w-3xl