Apply Morandi 2024 Color Scheme to Calculator page

codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxss

@@ -2,18 +2,17 @@
 
 /* ========== 全局变量 ========== */
 page {
-  background-color: #fcfbfd; /* 极淡的紫灰色背景 */
-  color: #594f6d; /* 莫兰迪深紫灰文字 */
+  background-color: #EBF4F8; /* Color 03: Pale Blue */
+  color: #2d3436; 
   
-  /* 莫兰迪紫色系定义 */
-  --primary: #9b8ea9; /* 莫兰迪紫/烟熏紫 */
-  --primary-light: #dcd6e4;
-  --primary-bg: #f4f1f7;
-  --card-shadow: 0 4rpx 16rpx rgba(155, 142, 169, 0.1);
+  /* Color Palette based on '2024 COLOR MATCHING' */
+  --primary: #11616B;       /* Color 01: Deep Teal */
+  --primary-light: #7BBDB6; /* Color 02: Medium Teal */
+  --primary-bg: #dbecef;    /* Lighter version of Color 02 for backgrounds */
+  --card-shadow: 0 4rpx 16rpx rgba(17, 97, 107, 0.08);
   --card-radius: 24rpx;
   
-  /* 移除渐变，使用莫兰迪纯色 */
-  --accent-color: #9b8ea9; 
+  --accent-color: #11616B; /* Color 01 */
 }
 
 /* ========== 容器 ========== */
@@ -26,22 +25,22 @@ page {
 
 /* ========== Tab 切换 ========== */
 .tab-header {
-  display: grid; /* 使用 Grid 均分三列，杜绝挤压 */
+  display: grid; 
   grid-template-columns: 1fr 1fr 1fr;
-  background: #f1f2f6;
+  background: #dfe9ed; /* Slightly darker than page bg */
   padding: 8rpx;
   border-radius: 60rpx;
   margin-bottom: 40rpx;
   align-items: center;
-  gap: 8rpx; /* 增加列间距 */
+  gap: 8rpx;
 }
 
 .tab-pill {
   text-align: center;
-  padding: 24rpx 0; /* 增加高度 */
+  padding: 24rpx 0;
   border-radius: 50rpx;
   font-size: 28rpx;
-  color: #a4b0be; /* 莫兰迪浅灰未选中态 */
+  color: #7f8c8d; 
   font-weight: 500;
   white-space: nowrap;
   transition: all 0.2s ease;
@@ -50,11 +49,11 @@ page {
 }
 
 .tab-pill.active {
-  background: var(--accent-color); /* 纯色背景 */
+  background: #11616B; /* Color 01 */
   color: #ffffff;
   font-weight: 600;
-  box-shadow: 0 4rpx 12rpx rgba(155, 142, 169, 0.4); /* 匹配主色的柔和阴影 */
-  transform: none; /* 移除缩放，防止文字抖动 */
+  box-shadow: 0 4rpx 12rpx rgba(17, 97, 107, 0.3);
+  transform: none;
 }
 
 .tab-hover {
@@ -189,39 +188,39 @@ page {
 }
 
 .tag-plus {
-  background: #f1f2f6; /* 莫兰迪浅灰 */
-  color: #747d8c;
-  border-color: #dfe4ea;
+  background: #EBF4F8; /* Color 03 */
+  color: #11616B;      /* Color 01 */
+  border-color: #7BBDB6; /* Color 02 */
 }
 
 .tag-minus {
-  background: #fae1dd; /* 莫兰迪淡粉红 */
-  color: #c08081; /* 莫兰迪深砖红 */
+  background: #FED9CD; /* Color 04 */
+  color: #DC8B70;      /* Color 05 */
   border-color: #fceceb;
 }
 
 .tag-hover {
-  background: #ced6e0 !important;
-  color: #57606f !important;
-  border-color: #a4b0be !important;
+  background: #7BBDB6 !important; /* Color 02 */
+  color: #ffffff !important;
+  border-color: #11616B !important;
   transform: scale(0.95);
 }
 
 .tag-minus-hover {
-  background: #f5cdc9 !important;
-  color: #b37172 !important;
+  background: #DC8B70 !important; /* Color 05 */
+  color: #ffffff !important;
   transform: scale(0.95);
 }
 
 /* ========== 结果卡片（通用） ========== */
 .result-card {
-  background: var(--accent-color); /* 莫兰迪色纯色背景 */
+  background: var(--accent-color); /* Color 01 */
   color: #fff;
   text-align: center;
   padding: 40rpx 32rpx;
   border-radius: var(--card-radius);
   margin-bottom: 24rpx;
-  box-shadow: 0 8rpx 24rpx rgba(155, 142, 169, 0.35); /* 匹配紫色的阴影 */
+  box-shadow: 0 8rpx 24rpx rgba(17, 97, 107, 0.25); /* Teal shadow */
   position: relative;
   overflow: hidden;
 }
@@ -234,7 +233,7 @@ page {
   width: 160rpx;
   height: 160rpx;
   border-radius: 50%;
-  background: rgba(255,255,255,0.1); /* 稍微提高透明度 */
+  background: rgba(255,255,255,0.1); 
 }
 
 .result-label {