fix(design): replace hardcoded values with design tokens

Audit found ~35 violations against the token system. Fixed:
- Hardcoded shadows in layout.css replaced with --shadow-sm/md
- 8 rgba colors extracted to new glass tokens (--color-glass-*)
- border-radius: 50% replaced with var(--radius-full)
- ~25 off-grid spacing values (5px, 6px, 7px, 14px, 15px, 22px,
  26px, 34px) aligned to 4px grid using space tokens

public/styles/dashboard.css

@@ -130,8 +130,8 @@
 .greeting-chip {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  background: rgba(255, 255, 255, 0.18);
+  gap: var(--space-1);
+  background: var(--color-glass);
   color: #ffffff;
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
@@ -140,7 +140,7 @@
 }
 
 .greeting-chip--warn {
-  background: rgba(255, 59, 48, 0.35);
+  background: var(--color-danger-translucent);
 }
 
 /* --------------------------------------------------------
@@ -266,11 +266,11 @@
 }
 
 .task-item__priority {
-  width: 7px;
-  height: 7px;
+  width: var(--space-2);
+  height: var(--space-2);
   border-radius: var(--radius-full);
   flex-shrink: 0;
-  margin-top: 5px;
+  margin-top: var(--space-1);
 }
 
 .task-item__priority--urgent { background-color: var(--color-priority-urgent); }
@@ -305,8 +305,8 @@
 }
 
 .task-item__avatar {
-  width: 22px;
-  height: 22px;
+  width: var(--space-5);
+  height: var(--space-5);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
@@ -374,7 +374,7 @@
 .event-time-badge {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-semibold);
-  padding: 1px 5px;
+  padding: var(--space-px) var(--space-1);
   border-radius: var(--radius-full);
   background-color: var(--color-surface-3);
   color: var(--color-text-secondary);
@@ -559,7 +559,7 @@
   width: 28px;
   height: 28px;
   border: none;
-  background: rgba(255,255,255,0.2);
+  background: var(--color-glass);
   color: #fff;
   border-radius: var(--radius-full);
   cursor: pointer;
@@ -568,7 +568,7 @@
 }
 
 .weather-widget__refresh:hover {
-  background: rgba(255,255,255,0.35);
+  background: var(--color-glass-hover);
 }
 
 .weather-widget__refresh:disabled {
@@ -626,7 +626,7 @@
 
 .weather-forecast {
   display: flex;
-  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  border-top: 1px solid var(--color-glass-border);
   padding: var(--space-2) var(--space-4);
   gap: var(--space-3);
 }
@@ -687,7 +687,7 @@
 
   .weather-forecast {
     border-top: none;
-    border-left: 1px solid rgba(255, 255, 255, 0.15);
+    border-left: 1px solid var(--color-glass-border);
     flex: 1;
     align-items: center;
     padding: var(--space-3) var(--space-4);