feat: add RecommendationListCard and RoutePlanCard components with styles and mocks

- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges.
- Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle.
- Added ScenicImageCard component for showcasing images with optional captions.
- Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements.
- Introduced SCSS styles for all new components and updated existing styles for consistency.
- Created test page to preview and interact with all components using mock data.
- Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.

src/static/scss/colors.scss

@@ -68,6 +68,54 @@
   color: #d97706;
 }
 
+.color-0F172A {
+  color: #0f172a;
+}
+
+.color-1E293B {
+  color: #1e293b;
+}
+
+.color-334155 {
+  color: #334155;
+}
+
+.color-475569 {
+  color: #475569;
+}
+
+.color-64748B {
+  color: #64748b;
+}
+
+.color-CBD5E1 {
+  color: #cbd5e1;
+}
+
+.color-2563EB {
+  color: #2563eb;
+}
+
+.color-7C3AED {
+  color: #7c3aed;
+}
+
+.color-E11D48 {
+  color: #e11d48;
+}
+
+.color-0F766E {
+  color: #0f766e;
+}
+
+.color-047857 {
+  color: #047857;
+}
+
+.color-0891B2 {
+  color: #0891b2;
+}
+
 // text 颜色
 .text-color-900 {
   color: $text-color-900; // #181B25