style: use shared WebUI foundation tokens

webui/src/styles/calendar.css

@@ -93,7 +93,7 @@
   flex: 0 1 520px;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   width: min(520px, 100%);
-  max-width: 520px;
+  max-width: 560px;
 }
 
 .calendar-mode-switch .segmented-control-option {
@@ -149,7 +149,7 @@
   width: 100%;
   min-height: 34px;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text);
   cursor: pointer;
@@ -165,7 +165,7 @@
   gap: 4px;
   min-height: 36px;
   padding: 2px 4px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .calendar-list-row:hover,
@@ -187,7 +187,7 @@
   align-items: center;
   padding: 2px;
   border: 1px solid var(--control-border);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--calendar-switch-bg);
   cursor: pointer;
   transition: background .16s ease, border-color .16s ease;
@@ -201,7 +201,7 @@
 .calendar-visibility-switch span {
   width: 14px;
   height: 14px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   background: var(--surface);
   box-shadow: var(--shadow-thumb);
   transform: translateX(0);
@@ -495,7 +495,7 @@
   padding: 4px 7px;
   border: 1px solid var(--calendar-event-border);
   border-left: 4px solid var(--calendar-event-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--calendar-event-bg);
   color: var(--calendar-event-text);
   cursor: pointer;
@@ -720,7 +720,7 @@
   top: -5px;
   width: 8px;
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--green);
   content: "";
 }
@@ -731,7 +731,7 @@
   left: 10px;
   padding: 2px 6px;
   border: 1px solid var(--calendar-success-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--green);
   color: var(--on-accent);
   font-size: 11px;
@@ -744,7 +744,7 @@
   position: absolute;
   z-index: 1;
   min-width: 0;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font: inherit;
   text-align: left;
 }
@@ -815,7 +815,7 @@
   left: 50%;
   width: 34px;
   height: 2px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--calendar-overlay);
   content: "";
   opacity: 0;
@@ -915,7 +915,7 @@
   gap: 12px;
   padding: 12px;
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--panel-soft);
 }
 
@@ -1024,7 +1024,7 @@
 .calendar-sync-status {
   padding: 3px 8px;
   border: var(--border-line-dark);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--surface);
   color: var(--muted);
   font-size: 12px;
@@ -1054,7 +1054,7 @@
   gap: 10px;
   padding: 10px;
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--surface);
 }
 
@@ -1152,7 +1152,7 @@
   gap: 8px;
   padding: 11px 12px;
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--surface);
 }
 
@@ -1168,8 +1168,8 @@
   display: grid;
   gap: 10px;
   padding: 12px;
-  border-left: 3px solid var(--color-danger, #b42318);
-  background: var(--color-danger-subtle, rgba(180, 35, 24, 0.08));
+  border-left: 3px solid var(--danger-border-deep);
+  background: var(--danger-muted-bg);
 }
 
 .calendar-remote-move-confirmation label,
@@ -1272,7 +1272,7 @@
 
 .calendar-migration-error {
   margin: 0;
-  color: var(--color-danger, #b42318);
+  color: var(--danger-border-deep);
 }
 
 .calendar-migration-cancel {
@@ -1286,7 +1286,7 @@
   justify-self: start;
 }
 
-@media (max-width: 700px) {
+@media (max-width: 760px) {
   .calendar-migration-summary {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1350,7 +1350,7 @@
   margin: 0;
   padding: 9px 10px;
   border: 1px solid var(--calendar-danger-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--calendar-danger-bg);
   color: var(--red);
   font-size: 13px;
@@ -1360,7 +1360,7 @@
 .calendar-form-note {
   margin: 0;
   padding: 9px 10px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
 }
 
@@ -1382,7 +1382,7 @@
   margin: 0;
   padding: 10px;
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--panel-soft);
 }