feat(calendar): simplify holiday highlight styles and improve accessibility

- Introduced a new visual style for holiday highlights in the calendar component, replacing complex gradients with solid colors for better clarity.
- Removed the holiday badge to reduce visual noise and enhance user experience.
- Ensured that holiday information remains accessible through long-press interactions.
- Updated specifications to reflect the new design decisions and requirements for both light and dark themes.
- Added tasks for implementation, including style adjustments and accessibility enhancements.

Web/src/components/TimePeriodTabs.vue

@@ -1,4 +1,10 @@
-<template>
+<!--
+  时间段选择器组件 (Time Period Tabs)
+  用于统计页面的"周/月/年"时间段切换
+  样式已按 pencli 设计规范更新 (.pans/v2.pen 节点 NDWwE)
+  支持亮色和暗色两种主题
+-->
+<template>
   <div class="tabs-wrapper">
     <div class="segmented-control">
       <div
@@ -46,10 +52,10 @@ defineEmits(['change'])
 
   .segmented-control {
     display: flex;
-    background: transparent;
-    border-radius: var(--radius-md);
-    padding: 0;
-    gap: var(--spacing-sm);
+    background: var(--segmented-bg);
+    border-radius: 8px;
+    padding: 4px;
+    gap: 4px;
     height: 40px;
 
     .tab-item {
@@ -57,13 +63,13 @@ defineEmits(['change'])
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--radius-md);
+      border-radius: 6px;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      background: rgba(128, 128, 128, 0.15);
+      background: transparent;
 
       &.active {
-        background: rgba(128, 128, 128, 0.3);
+        background: var(--segmented-active-bg);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 
         .tab-text {
@@ -73,7 +79,7 @@ defineEmits(['change'])
       }
 
       &:not(.active):hover {
-        background: rgba(128, 128, 128, 0.2);
+        background: rgba(128, 128, 128, 0.1);
       }
 
       .tab-text {