style: replace hardcoded styles with design tokens (#7281)

Mechanical sweep replacing hardcoded values with documented design tokens
per docs/styling-guide.md. No visual regressions intended; transition
durations align to nearest token bucket (0.1s -> --transition-fast 90ms,
0.3s/200ms -> --transition-duration-m 225ms).

- Transitions/animations: done-toggle, heatmap, progress-circle, task,
  add-task-bar, main-header
- Colors: #fff -> --card-bg in task time-badge, #333 -> --text-color in
  work-view no-tasks-label
- Spacing: 4px/16px -> --s-half/--s2 in help-box, add-task-bar; -12px ->
  calc(var(--s) * -1.5) in dialog-deadline

Note: lint not run locally (node_modules unavailable in env); changes are
1:1 token substitutions matching existing indentation.

Co-authored-by: Claude <noreply@anthropic.com>

src/app/core-ui/main-header/main-header.component.scss

@@ -79,7 +79,7 @@
   &:has(page-title [aria-expanded='true']) ::ng-deep .current-task-title {
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.3s ease-out;
+    transition: opacity var(--transition-duration-m) ease-out;
   }
 }
 

src/app/features/tasks/add-task-bar/add-task-bar.component.scss

@@ -15,8 +15,8 @@
 
     @include mq(xs, max) {
       transform: translateX(0) !important;
-      left: 4px;
-      right: 4px;
+      left: var(--s-half);
+      right: var(--s-half);
     }
 
     @include mq(xs) {
@@ -34,7 +34,7 @@
 :host-context(.isTouchOnly).global {
   top: auto;
   bottom: calc(var(--keyboard-height) + var(--s));
-  transition: bottom 0.3s ease-out;
+  transition: bottom var(--transition-duration-m) ease-out;
 }
 
 .add-task-container {
@@ -147,7 +147,7 @@
 }
 
 .spinner {
-  animation: 200ms fadeIn;
+  animation: var(--transition-duration-m) fadeIn;
   position: absolute;
   right: 50%;
   bottom: 2px;
@@ -171,7 +171,7 @@
 //// Autocomplete panel styles
 ::ng-deep .isTouchPrimary .add-task-bar-panel {
   top: auto;
-  bottom: 4px;
+  bottom: var(--s-half);
 }
 
 ::ng-deep .add-task-bar-panel {

src/app/features/tasks/dialog-deadline/dialog-deadline.component.scss

@@ -67,7 +67,7 @@ mat-dialog-content {
   z-index: 11;
   box-shadow: var(--whiteframe-shadow-1dp);
   border-radius: 8px;
-  margin-top: -12px;
+  margin-top: calc(var(--s) * -1.5);
   white-space: nowrap;
   transform: translateX(-50%);
 

src/app/features/tasks/task/_task-controls.scss

@@ -410,7 +410,7 @@ done-toggle {
   @include extraBorder();
   border-radius: var(--card-border-radius);
   white-space: nowrap;
-  background: #fff;
+  background: var(--card-bg);
 
   // avoid affecting done toggle
   pointer-events: none;

src/app/features/tasks/task/task.component.scss

@@ -7,8 +7,8 @@
   background: var(--bg-lighter);
   box-shadow: var(--whiteframe-shadow-8dp);
   transition:
-    background 150ms ease-out,
-    box-shadow 150ms ease-out;
+    background var(--transition-duration-s) ease-out,
+    box-shadow var(--transition-duration-s) ease-out;
 
   .box {
     box-shadow: none;

src/app/features/work-view/work-view.component.scss

@@ -224,7 +224,7 @@ finish-day-btn,
     @include center;
     text-align: center;
     font-weight: 400;
-    color: #333;
+    color: var(--text-color);
 
     @include darkTheme() {
       color: var(--text-color-most-intense);

src/app/ui/done-toggle/done-toggle.component.scss

@@ -45,7 +45,7 @@ $check-len: 18;
   .done-toggle-svg {
     width: 22px;
     height: 22px;
-    transition: transform 150ms ease;
+    transition: transform var(--transition-duration-s) ease;
   }
 
   &.is-scale-up .done-toggle-svg {
@@ -86,7 +86,7 @@ $check-len: 18;
 
     .done-check {
       opacity: 0.5;
-      animation: draw-check 150ms ease-out forwards;
+      animation: draw-check var(--transition-duration-s) ease-out forwards;
     }
   }
 

src/app/ui/heatmap/heatmap.component.scss

@@ -107,7 +107,7 @@
   height: 12px;
   border-radius: 2px;
   cursor: pointer;
-  transition: all 0.1s ease;
+  transition: var(--transition-fast);
   flex-shrink: 0;
 
   &.empty {

src/app/ui/help-box/help-box.component.scss

@@ -1,7 +1,7 @@
 :host {
   display: block;
   position: sticky;
-  top: 16px;
+  top: var(--s2);
   background: var(--bg);
   z-index: 200;
   margin: var(--s);
@@ -18,8 +18,8 @@
 
   .close-btn {
     position: absolute;
-    top: 4px;
-    right: 4px;
+    top: var(--s-half);
+    right: var(--s-half);
   }
 
   //.help-box-content {}
@@ -27,7 +27,7 @@
   :host-context([dir='rtl']) {
     .close-btn {
       right: unset;
-      left: 4px;
+      left: var(--s-half);
     }
   }
 }

src/app/ui/progress-circle/progress-circle.component.scss

@@ -23,7 +23,7 @@
 
 .progress-circle__progress {
   stroke: currentColor;
-  transition: stroke-dashoffset 0.3s ease;
+  transition: stroke-dashoffset var(--transition-duration-m) ease;
 }
 
 .progress-circle__pulse {