refactor(front): replace hardcoded colors with Cunningham contextual tokens

Migrate ~47 hardcoded hex colors and v3 --c--theme--colors--* tokens
across 13 SCSS/TSX files to v4 --c--contextuals--* tokens. This lets
the calendar UI adapt to any runtime theme (sunbeam dark, La Suite
default, ANCT) via the integration service's theme.css. FreeBusyTimeline
rgba overlays use color-mix() for theme-aware transparency.

src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.scss

@@ -23,14 +23,14 @@
 
     &:hover {
       .calendar-list__section-title {
-        color: var(--c--theme--colors--greyscale-700);
+        color: var(--c--contextuals--content--semantic--neutral--secondary);
       }
     }
   }
 
   &__toggle-icon {
     font-size: 1.25rem;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     transition: transform 0.2s ease;
     transform: rotate(-90deg);
 
@@ -42,7 +42,7 @@
   &__section-title {
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--c--theme--colors--greyscale-800);
+    color: var(--c--contextuals--content--semantic--neutral--primary);
     transition: color 0.15s;
   }
 
@@ -56,14 +56,14 @@
     background: transparent;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     transition:
       background-color 0.15s,
       color 0.15s;
 
     &:hover {
-      background-color: var(--c--theme--colors--greyscale-100);
+      background-color: var(--c--contextuals--background--surface--secondary);
-      color: var(--c--theme--colors--primary-500);
+      color: var(--c--contextuals--content--semantic--brand--primary);
     }
 
     .material-icons {
@@ -85,7 +85,7 @@
     transition: background-color 0.15s;
 
     &:hover {
-      background-color: var(--c--theme--colors--greyscale-50);
+      background-color: var(--c--contextuals--background--surface--secondary);
 
       .calendar-list__options-btn {
         opacity: 1;
@@ -126,7 +126,7 @@
     flex: 1;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--c--theme--colors--greyscale-800);
+    color: var(--c--contextuals--content--semantic--neutral--primary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -156,8 +156,8 @@
     right: 0;
     z-index: 100;
     min-width: 140px;
-    background: white;
+    background: var(--c--contextuals--background--surface--primary);
-    border: 1px solid var(--c--theme--colors--greyscale-200);
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     padding: 0.25rem 0;
@@ -174,11 +174,11 @@
     background: transparent;
     cursor: pointer;
     font-size: 0.875rem;
-    color: var(--c--theme--colors--greyscale-700);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     transition: background-color 0.15s;
 
     &:hover {
-      background-color: var(--c--theme--colors--greyscale-50);
+      background-color: var(--c--contextuals--background--surface--secondary);
     }
 
     .material-icons {
@@ -186,10 +186,10 @@
     }
 
     &--danger {
-      color: var(--c--theme--colors--danger-500);
+      color: var(--c--contextuals--content--semantic--error--primary);
 
       &:hover {
-        background-color: var(--c--theme--colors--danger-50);
+        background-color: var(--c--contextuals--background--semantic--error--tertiary);
       }
     }
   }
@@ -197,8 +197,8 @@
   &__badge {
     font-size: 0.625rem;
     padding: 0.125rem 0.375rem;
-    background-color: var(--c--theme--colors--greyscale-100);
+    background-color: var(--c--contextuals--background--surface--secondary);
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     border-radius: 0.75rem;
     text-transform: uppercase;
     font-weight: 500;
@@ -219,21 +219,21 @@
   &__error {
     margin-bottom: 8px;
     padding: 12px 16px;
-    background-color: #fef2f2;
+    background-color: var(--c--contextuals--background--semantic--error--tertiary);
-    color: #dc2626;
+    color: var(--c--contextuals--content--semantic--error--primary);
     border-radius: 8px;
     font-size: 0.875rem;
-    border: 1px solid #fecaca;
+    border: 1px solid var(--c--contextuals--border--semantic--error--tertiary);
   }
 
   &__success {
     margin-bottom: 8px;
     padding: 12px 16px;
-    background-color: #f0fdf4;
+    background-color: var(--c--contextuals--background--semantic--success--tertiary);
-    color: #16a34a;
+    color: var(--c--contextuals--content--semantic--success--primary);
     border-radius: 8px;
     font-size: 0.875rem;
-    border: 1px solid #bbf7d0;
+    border: 1px solid var(--c--contextuals--border--semantic--success--tertiary);
   }
 
   &__field {
@@ -247,11 +247,11 @@
     margin-bottom: 8px;
     font-weight: 500;
     font-size: 0.875rem;
-    color: #374151;
+    color: var(--c--contextuals--content--semantic--neutral--tertiary);
 
     .material-icons {
       font-size: 1.125rem;
-      color: var(--c--theme--colors--greyscale-500);
+      color: var(--c--contextuals--content--semantic--neutral--tertiary);
     }
   }
 
@@ -276,10 +276,10 @@
     }
 
     &--selected {
-      border-color: #1f2937;
+      border-color: var(--c--contextuals--content--semantic--neutral--primary);
       box-shadow:
-        0 0 0 2px white,
+        0 0 0 2px var(--c--contextuals--background--surface--primary),
-        0 0 0 4px #9ca3af;
+        0 0 0 4px var(--c--contextuals--border--surface--primary);
     }
   }
 
@@ -305,7 +305,7 @@
 
   &__description {
     font-size: 0.875rem;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     margin: 0;
     line-height: 1.5;
   }
@@ -315,7 +315,7 @@
     align-items: center;
     justify-content: center;
     padding: 2rem;
-    color: var(--c--theme--colors--greyscale-500);
+    color: var(--c--contextuals--content--semantic--neutral--tertiary);
     font-size: 0.875rem;
   }
 
@@ -328,18 +328,18 @@
   &__url-input {
     flex: 1;
     padding: 0.75rem;
-    border: 1px solid var(--c--theme--colors--greyscale-300);
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 4px;
     font-family: monospace;
     font-size: 0.75rem;
-    background-color: var(--c--theme--colors--greyscale-50);
+    background-color: var(--c--contextuals--background--surface--secondary);
-    color: var(--c--theme--colors--greyscale-700);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     overflow: hidden;
     text-overflow: ellipsis;
 
     &:focus {
       outline: none;
-      border-color: var(--c--theme--colors--primary-500);
+      border-color: var(--c--contextuals--content--semantic--brand--primary);
     }
   }
 
@@ -348,20 +348,20 @@
     align-items: flex-start;
     gap: 0.5rem;
     padding: 0.75rem;
-    background-color: #fef3c7;
+    background-color: var(--c--contextuals--background--semantic--warning--tertiary);
-    border: 1px solid #fcd34d;
+    border: 1px solid var(--c--contextuals--border--semantic--warning--secondary);
     border-radius: 4px;
 
     p {
       margin: 0;
       font-size: 0.75rem;
-      color: #92400e;
+      color: var(--c--contextuals--content--semantic--warning--primary);
       line-height: 1.4;
     }
   }
 
   &__warning-icon {
-    color: #d97706;
+    color: var(--c--contextuals--content--semantic--warning--primary);
     font-size: 1.125rem;
     flex-shrink: 0;
   }
@@ -384,7 +384,7 @@
 
   &__description {
     font-size: 0.875rem;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     margin: 0;
     line-height: 1.5;
   }
@@ -397,7 +397,7 @@
 
   &__filename {
     font-size: 0.875rem;
-    color: var(--c--theme--colors--greyscale-700);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -405,11 +405,11 @@
 
   &__error {
     padding: 12px 16px;
-    background-color: #fef2f2;
+    background-color: var(--c--contextuals--background--semantic--error--tertiary);
-    color: #dc2626;
+    color: var(--c--contextuals--content--semantic--error--primary);
     border-radius: 8px;
     font-size: 0.875rem;
-    border: 1px solid #fecaca;
+    border: 1px solid var(--c--contextuals--border--semantic--error--tertiary);
   }
 
   &__result {
@@ -422,7 +422,7 @@
     margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--c--theme--colors--greyscale-800);
+    color: var(--c--contextuals--content--semantic--neutral--primary);
   }
 
   &__stats {
@@ -445,21 +445,21 @@
     }
 
     &--success {
-      color: #16a34a;
+      color: var(--c--contextuals--content--semantic--success--primary);
     }
 
     &--neutral {
-      color: var(--c--theme--colors--greyscale-500);
+      color: var(--c--contextuals--content--semantic--neutral--tertiary);
     }
 
     &--warning {
-      color: #d97706;
+      color: var(--c--contextuals--content--semantic--warning--primary);
     }
   }
 
   &__errors {
     font-size: 0.875rem;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
 
     summary {
       cursor: pointer;
@@ -474,7 +474,7 @@
       li {
         margin-bottom: 0.25rem;
         font-size: 0.8rem;
-        color: #d97706;
+        color: var(--c--contextuals--content--semantic--warning--primary);
       }
     }
   }

src/frontend/apps/calendars/src/features/calendar/components/left-panel/MiniCalendar.scss

@@ -41,6 +41,7 @@
     justify-content: center;
     height: 1.5rem;
     font-size: var(--c--globals--font--sizes--s);
+    font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
     font-weight: 700;
     color: var(--c--contextuals--content--semantic--neutral--primary);
     text-transform: lowercase;
@@ -69,6 +70,7 @@
     align-items: center;
     justify-content: center;
     font-size: 0.6rem;
+    font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
     color: var(--c--contextuals--content--semantic--neutral--tertiary);
     font-weight: 400;
   }
@@ -84,6 +86,7 @@
     border-radius: 4px;
     cursor: pointer;
     font-size: 0.8rem;
+    font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
     color: var(--c--contextuals--content--semantic--neutral--primary);
     font-weight: 500;
     transition: background-color 0.15s;

src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.scss

@@ -19,18 +19,18 @@
     height: 2.5rem;
     margin-top: 0.25rem;
     padding: 0;
-    border: 1px solid var(--c--theme--colors--greyscale-200);
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 4px;
     background: transparent;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     cursor: pointer;
     flex-shrink: 0;
     transition: all 0.15s;
 
     &:hover {
-      background-color: var(--c--theme--colors--greyscale-100);
+      background-color: var(--c--contextuals--background--surface--secondary);
-      color: var(--c--theme--colors--greyscale-900);
+      color: var(--c--contextuals--content--semantic--neutral--primary);
-      border-color: var(--c--theme--colors--greyscale-400);
+      border-color: var(--c--contextuals--border--surface--primary);
     }
 
     .material-icons {
@@ -47,8 +47,8 @@
     margin: 0;
     padding: 0.25rem 0;
     list-style: none;
-    background: var(--c--theme--colors--greyscale-000, #fff);
+    background: var(--c--contextuals--background--surface--primary);
-    border: 1px solid var(--c--theme--colors--greyscale-200);
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 4px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     max-height: 200px;
@@ -65,11 +65,11 @@
 
     &:hover,
     &--highlighted {
-      background-color: var(--c--theme--colors--greyscale-100);
+      background-color: var(--c--contextuals--background--surface--secondary);
     }
 
     &--empty {
-      color: var(--c--theme--colors--greyscale-500);
+      color: var(--c--contextuals--content--semantic--neutral--tertiary);
       font-style: italic;
       cursor: default;
 
@@ -82,12 +82,12 @@
   &__suggestion-name {
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--c--theme--colors--greyscale-900);
+    color: var(--c--contextuals--content--semantic--neutral--primary);
   }
 
   &__suggestion-email {
     font-size: 0.75rem;
-    color: var(--c--theme--colors--greyscale-500);
+    color: var(--c--contextuals--content--semantic--neutral--tertiary);
   }
 
   &__pills {

src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss

@@ -6,7 +6,7 @@
   }
 
   &__more-options {
-    border-top: 1px solid #f1f3f4;
+    border-top: 1px solid var(--c--contextuals--border--surface--primary);
     padding-top: 0.5rem;
   }
 
@@ -18,11 +18,11 @@
     cursor: pointer;
     border-radius: 4px;
     font-size: 0.875rem;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     transition: background-color 0.15s;
 
     &:hover {
-      background-color: #f8f9fa;
+      background-color: var(--c--contextuals--background--surface--secondary);
     }
 
     .material-icons {
@@ -33,7 +33,7 @@
   &__more-options-content {
     display: flex;
     flex-direction: column;
-    border: 1px solid #e8eaeb;
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 8px;
     overflow: hidden;
     margin-top: 0.5rem;
@@ -57,7 +57,7 @@
     align-self: center;
     margin: 0 8px;
     font-size: 20px;
-    color: #888;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
   }
 
   &__allday {
@@ -65,7 +65,7 @@
     align-items: center;
     gap: 0.5rem;
     font-size: 0.875rem;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     cursor: pointer;
   }
 }
@@ -108,11 +108,11 @@
     background: transparent;
     border-radius: 50%;
     cursor: pointer;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     flex-shrink: 0;
 
     &:hover {
-      background-color: #f1f3f4;
+      background-color: var(--c--contextuals--border--surface--primary);
     }
 
     .material-icons {
@@ -143,11 +143,11 @@
     background: transparent;
     border-radius: 50%;
     cursor: pointer;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     flex-shrink: 0;
 
     &:hover {
-      background-color: #f1f3f4;
+      background-color: var(--c--contextuals--border--surface--primary);
     }
 
     .material-icons {
@@ -167,7 +167,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.375rem 0.5rem;
-    background: #f8f9fa;
+    background: var(--c--contextuals--background--surface--secondary);
     border-radius: 4px;
     font-size: 0.8125rem;
   }
@@ -183,11 +183,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: #202124;
+    color: var(--c--contextuals--content--semantic--neutral--primary);
   }
 
   &__size {
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     font-size: 0.75rem;
   }
 
@@ -201,11 +201,11 @@
     background: transparent;
     border-radius: 50%;
     cursor: pointer;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     flex-shrink: 0;
 
     &:hover {
-      background-color: #e8eaeb;
+      background-color: var(--c--contextuals--border--surface--primary);
     }
 
     .material-icons {

src/frontend/apps/calendars/src/features/calendar/components/scheduler/FreeBusyTimeline.scss

@@ -18,11 +18,11 @@
     border-radius: 50%;
     background: none;
     cursor: pointer;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     padding: 0;
 
     &:hover {
-      background-color: #f1f3f4;
+      background-color: var(--c--contextuals--border--surface--primary);
     }
 
     .material-icons {
@@ -33,7 +33,7 @@
   &__date {
     font-size: 0.75rem;
     font-weight: 500;
-    color: #202124;
+    color: var(--c--contextuals--content--semantic--neutral--primary);
     min-width: 100px;
     text-align: center;
   }
@@ -46,7 +46,7 @@
 
   &__spinner {
     font-size: 14px;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     animation: freebusy-spin 1.5s linear infinite;
   }
 
@@ -57,18 +57,18 @@
     border-radius: 8px;
 
     &--ok {
-      color: #137333;
+      color: var(--c--contextuals--content--semantic--success--primary);
-      background-color: #e6f4ea;
+      background-color: var(--c--contextuals--background--semantic--success--tertiary);
     }
 
     &--conflict {
-      color: #c5221f;
+      color: var(--c--contextuals--content--semantic--error--primary);
-      background-color: #fce8e6;
+      background-color: var(--c--contextuals--background--semantic--error--tertiary);
     }
   }
 
   &__calendar {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 4px;
     overflow: hidden;
 
@@ -112,12 +112,12 @@
 
     // Single overlay for proposed meeting time across all rows
     .freebusy-proposed-overlay {
-      border-left: 2px solid #137333;
+      border-left: 2px solid var(--c--contextuals--content--semantic--success--primary);
-      border-right: 2px solid #137333;
+      border-right: 2px solid var(--c--contextuals--content--semantic--success--primary);
       background: repeating-linear-gradient(
         -45deg,
-        rgba(19, 115, 51, 0.35),
+        color-mix(in srgb, var(--c--contextuals--content--semantic--success--primary) 35%, transparent),
-        rgba(19, 115, 51, 0.35) 1px,
+        color-mix(in srgb, var(--c--contextuals--content--semantic--success--primary) 35%, transparent) 1px,
         transparent 1px,
         transparent 7px
       );
@@ -128,8 +128,8 @@
     padding: 0.75rem;
     text-align: center;
     font-size: 0.75rem;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 4px;
   }
 }

src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.scss

@@ -4,7 +4,7 @@
   gap: 0.75rem;
 
   &__card {
-    background: var(--c--theme--colors--greyscale-50, #f8f9fa);
+    background: var(--c--contextuals--background--surface--secondary);
     border-radius: 8px;
     padding: 1rem;
     display: flex;
@@ -16,8 +16,8 @@
     display: inline-block;
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
-    background: var(--c--theme--colors--primary-100, #e8f0fe);
+    background: var(--c--contextuals--background--semantic--brand--tertiary);
-    color: var(--c--theme--colors--primary-700, #1a56db);
+    color: var(--c--contextuals--content--semantic--brand--primary);
     font-size: 0.8125rem;
     font-weight: 500;
     line-height: 1.4;
@@ -40,22 +40,22 @@
     height: 32px;
     border-radius: 50%;
     border: none;
-    background: var(--c--theme--colors--greyscale-100, #f1f3f4);
+    background: var(--c--contextuals--background--surface--secondary);
     color: inherit;
     cursor: pointer;
     font-size: 0.875rem;
     transition: background-color 0.15s, color 0.15s;
 
     &:hover {
-      background: var(--c--theme--colors--greyscale-200, #e8eaeb);
+      background: var(--c--contextuals--border--surface--primary);
     }
 
     &--selected {
-      background: var(--c--theme--colors--primary-600, #1a73e8);
+      background: var(--c--contextuals--content--semantic--brand--primary);
-      color: white;
+      color: var(--c--contextuals--background--surface--primary);
 
       &:hover {
-        background: var(--c--theme--colors--primary-700, #1557b0);
+        background: var(--c--contextuals--content--semantic--brand--primary);
       }
     }
   }
@@ -68,7 +68,7 @@
 
   &__label {
     font-weight: 500;
-    color: #333;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     font-size: 0.9375rem;
   }
 
@@ -76,7 +76,7 @@
     text-transform: uppercase;
     font-size: 0.75rem;
     font-weight: 600;
-    color: var(--c--theme--colors--greyscale-500, #6b7280);
+    color: var(--c--contextuals--content--semantic--neutral--tertiary);
     letter-spacing: 0.05em;
   }
 
@@ -92,7 +92,7 @@
   }
 
   &__end-btn {
-    border: 1px solid var(--c--theme--colors--greyscale-300, #d1d5db);
+    border: 1px solid var(--c--contextuals--border--surface--primary);
     border-radius: 20px;
     padding: 0.375rem 0.75rem;
     background: transparent;
@@ -102,17 +102,17 @@
     color: inherit;
 
     &:hover {
-      border-color: var(--c--theme--colors--greyscale-400, #9ca3af);
+      border-color: var(--c--contextuals--border--surface--primary);
     }
 
     &--active {
-      border-color: var(--c--theme--colors--primary-600, #1a73e8);
+      border-color: var(--c--contextuals--content--semantic--brand--primary);
-      color: var(--c--theme--colors--primary-600, #1a73e8);
+      color: var(--c--contextuals--content--semantic--brand--primary);
-      background: var(--c--theme--colors--primary-50, #eff6ff);
+      background: var(--c--contextuals--background--semantic--brand--tertiary);
 
       &:hover {
-        border-color: var(--c--theme--colors--primary-700, #1557b0);
+        border-color: var(--c--contextuals--content--semantic--brand--primary);
-        color: var(--c--theme--colors--primary-700, #1557b0);
+        color: var(--c--contextuals--content--semantic--brand--primary);
       }
     }
   }
@@ -128,10 +128,10 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1rem;
-    background-color: #fff3cd;
+    background-color: var(--c--contextuals--background--semantic--warning--tertiary);
-    border: 1px solid #ffc107;
+    border: 1px solid var(--c--contextuals--border--semantic--warning--secondary);
     border-radius: 4px;
-    color: #856404;
+    color: var(--c--contextuals--content--semantic--warning--primary);
     font-size: 0.875rem;
     line-height: 1.4;
   }

src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss

@@ -11,157 +11,16 @@
   min-height: 0;
   overflow: hidden;
   padding-right: 12px;
+  background-color: var(--c--contextuals--background--surface--primary);
 }
 
+
 .day-of-month {
   font-size: 1rem;
   font-weight: 700;
+  font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
 }
 
-// ============================================================================
-// Event Modal Styles (for use with Cunningham Modal)
-// ============================================================================
-
-// .event-modal {
-//   &__content {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 1rem;
-//   }
-
-//   // Date/Time row with two columns
-//   &__datetime-row {
-//     display: flex;
-//     gap: 1rem;
-
-//     > * {
-//       flex: 1;
-//     }
-//   }
-
-//   // Features section (buttons + inputs)
-//   &__features {
-//     display: flex;
-//     flex-wrap: wrap;
-//     gap: 0.5rem;
-//     margin-top: 0.5rem;
-//   }
-
-//   &__attendees-input {
-//     padding: 0.75rem;
-//     background-color: #f8f9fa;
-//     border-radius: 4px;
-//     margin-top: 0.75rem;
-//   }
-
-//   &__recurrence-editor {
-//     padding: 0.75rem;
-//     background-color: #f8f9fa;
-//     border-radius: 4px;
-//     margin-top: 0.75rem;
-//   }
-
-//   // Checkbox for all-day
-//   &__checkbox {
-//     display: flex;
-//     align-items: center;
-//     gap: 0.5rem;
-//     cursor: pointer;
-//     user-select: none;
-
-//     input[type="checkbox"] {
-//       cursor: pointer;
-//       width: 1.25rem;
-//       height: 1.25rem;
-//       margin: 0;
-//     }
-
-//     span {
-//       font-size: 0.9375rem;
-//       line-height: 1.5;
-//       color: #212529;
-//     }
-//   }
-
-//   // Feature tag button
-//   &__feature-tag {
-//     display: inline-flex;
-//     align-items: center;
-//     gap: 0.375rem;
-//     padding: 0.375rem 0.75rem;
-//     border: 1px solid #dee2e6;
-//     border-radius: 1rem;
-//     background-color: #fff;
-//     color: #495057;
-//     font-size: 0.875rem;
-//     cursor: pointer;
-//     transition: all 0.15s ease-in-out;
-
-//     &:hover {
-//       background-color: #f8f9fa;
-//       border-color: #adb5bd;
-//     }
-
-//     &--active {
-//       background-color: #e7f5ff;
-//       border-color: #339af0;
-//       color: #1971c2;
-//     }
-
-//     .material-icons {
-//       font-size: 1.125rem;
-//     }
-//   }
-
-//   // Invitation section
-//   &__invitation {
-//     padding: 1rem;
-//     background-color: #e7f5ff;
-//     border: 1px solid #339af0;
-//     border-radius: 0.5rem;
-//     display: flex;
-//     flex-direction: column;
-//     gap: 0.75rem;
-//   }
-
-//   &__invitation-header {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 0.25rem;
-//   }
-
-//   &__invitation-label {
-//     font-size: 0.875rem;
-//     font-weight: 600;
-//     color: #1971c2;
-//     text-transform: uppercase;
-//     letter-spacing: 0.05em;
-//   }
-
-//   &__invitation-organizer {
-//     font-size: 0.9375rem;
-//     color: #495057;
-//   }
-
-//   &__invitation-actions {
-//     display: flex;
-//     gap: 0.5rem;
-//     flex-wrap: wrap;
-//   }
-
-//   &__invitation-status {
-//     padding: 0.5rem 0.75rem;
-//     background-color: #fff;
-//     border-radius: 0.375rem;
-//     font-size: 0.875rem;
-//     color: #495057;
-
-//     strong {
-//       color: #1971c2;
-//     }
-//   }
-// }
-
 // ============================================================================
 // Delete Event Modal Styles
 // ============================================================================
@@ -177,7 +36,7 @@
     margin: 0;
     font-size: 1rem;
     line-height: 1.5;
-    color: #495057;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
   }
 
   &__options {
@@ -197,8 +56,8 @@
     transition: all 0.15s ease-in-out;
 
     &:hover {
-      background-color: #f8f9fa;
+      background-color: var(--c--contextuals--background--surface--secondary);
-      border-color: #adb5bd;
+      border-color: var(--c--contextuals--border--surface--primary);
     }
 
     input[type="radio"] {
@@ -206,14 +65,14 @@
       width: 1.25rem;
       height: 1.25rem;
       margin: 0;
-      accent-color: #dc3545; // Error color for delete action
+      accent-color: var(--c--contextuals--content--semantic--error--primary);
     }
 
     span {
       flex: 1;
       font-size: 0.9375rem;
       line-height: 1.5;
-      color: #212529;
+      color: var(--c--contextuals--content--semantic--neutral--primary);
     }
 
     input[type="radio"]:checked + span {

src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.tsx

@@ -261,7 +261,7 @@ export const Scheduler = ({ defaultCalendarUrl }: SchedulerProps) => {
       start: new Date(e.start),
       end: e.end ? new Date(e.end) : new Date(e.start),
       allDay: e.allDay ?? false,
-      backgroundColor: e.backgroundColor || "#2563eb",
+      backgroundColor: e.backgroundColor || "var(--c--contextuals--content--semantic--brand--primary)",
       extendedProps: e.extendedProps ?? {},
     }));
     setListEvents(parsed);

src/frontend/apps/calendars/src/features/calendar/components/scheduler/SchedulerToolbar.scss

@@ -8,9 +8,9 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1rem;
-  background-color: var(--c--globals--colors--gray-000);
+  background-color: var(--c--contextuals--background--surface--primary);
-  border-bottom: 1px solid var(--c--globals--colors--gray-100);
+  border-bottom: none;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
 
   // -------------------------------------------------------------------------
   // Left section: Today button + Navigation
@@ -42,18 +42,18 @@
     background: transparent;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--c--globals--colors--gray-600);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     transition:
       background-color 0.15s,
       color 0.15s;
 
     &:hover {
-      background-color: var(--c--globals--colors--gray-100);
+      background-color: var(--c--contextuals--background--surface--secondary);
-      color: var(--c--globals--colors--gray-800);
+      color: var(--c--contextuals--content--semantic--neutral--primary);
     }
 
     &:active {
-      background-color: var(--c--globals--colors--gray-200);
+      background-color: var(--c--contextuals--background--surface--tertiary);
     }
 
     .material-icons {
@@ -74,7 +74,7 @@
     margin: 0;
     font-size: 1.125rem;
     font-weight: 500;
-    color: var(--c--globals--colors--gray-800);
+    color: var(--c--contextuals--content--semantic--neutral--primary);
   }
 
   // -------------------------------------------------------------------------
@@ -97,18 +97,18 @@
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--c--globals--colors--gray-700);
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
     transition:
       background-color 0.15s,
       color 0.15s;
 
     &:hover {
-      background-color: var(--c--globals--colors--gray-100);
+      background-color: var(--c--contextuals--background--surface--secondary);
-      color: var(--c--globals--colors--gray-900);
+      color: var(--c--contextuals--content--semantic--neutral--primary);
     }
 
     &:active {
-      background-color: var(--c--globals--colors--gray-200);
+      background-color: var(--c--contextuals--background--surface--tertiary);
     }
   }
 

src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss

@@ -1,6 +1,6 @@
 .invitation-response {
   padding: 0.75rem;
-  background: #f8f9fa;
+  background: var(--c--contextuals--background--surface--secondary);
   border-radius: 8px;
   display: flex;
   flex-direction: column;
@@ -15,12 +15,12 @@
   &__label {
     font-weight: 600;
     font-size: 0.875rem;
-    color: #202124;
+    color: var(--c--contextuals--content--semantic--neutral--primary);
   }
 
   &__organizer {
     font-size: 0.8125rem;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
   }
 
   &__actions {
@@ -31,6 +31,6 @@
 
   &__status {
     font-size: 0.8125rem;
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
   }
 }

src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss

@@ -1,5 +1,5 @@
 .section-row {
-  border-bottom: 1px solid #f1f3f4;
+  border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
 
   &:last-child {
     border-bottom: none;
@@ -43,7 +43,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: #f8f9fa;
+        background-color: var(--c--contextuals--background--surface--secondary);
       }
     }
   }
@@ -57,14 +57,14 @@
 
     .material-icons {
       font-size: 20px;
-      color: #5f6368;
+      color: var(--c--contextuals--content--semantic--neutral--secondary);
     }
   }
 
   &__label {
     flex: 1;
     font-size: 0.875rem;
-    color: #202124;
+    color: var(--c--contextuals--content--semantic--neutral--primary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -72,7 +72,7 @@
   }
 
   &--empty &__label {
-    color: #5f6368;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
   }
 
   &__right-action {
@@ -87,7 +87,7 @@
 
     .material-icons {
       font-size: 20px;
-      color: #5f6368;
+      color: var(--c--contextuals--content--semantic--neutral--secondary);
     }
   }
 

src/frontend/apps/calendars/src/features/calendar/components/scheduler/hooks/useSchedulerInit.ts

@@ -133,7 +133,7 @@ export const useSchedulerInit = ({
         eventDurationEditable: true,
         selectMinDistance: 5,
         eventDragMinDistance: 5,
-        selectBackgroundColor: '#ffcdd2', // Light red color for selection
+        selectBackgroundColor: 'var(--c--contextuals--background--semantic--brand--tertiary)',
 
         // Event handlers - ALL INTERACTIONS
         // Use ref wrappers for stable references (prevents calendar recreation on handler changes)

src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss

@@ -10,30 +10,48 @@
   // Fill parent container to enable proper scrolling and sticky header
   height: 100%;
 
-  // Base colors
+  // Base colors — use contextual tokens so they adapt to active Cunningham theme
-  --ec-bg-color: var(--c--globals--colors--gray-000);
+  // !important needed because the EC library re-declares --ec-bg-color internally
-  --ec-day-bg-color: var(--c--contextuals--background--surface--secondary);
+  --ec-bg-color: var(--c--contextuals--background--surface--primary) !important;
-  --ec-text-color: var(--c--globals--colors--gray-800);
+  --ec-day-bg-color: var(--c--contextuals--background--surface--secondary) !important;
-  --ec-border-color: var(--c--globals--colors--gray-100);
+  --ec-text-color: var(--c--contextuals--content--semantic--neutral--primary) !important;
+  --ec-border-color: var(--c--contextuals--border--surface--primary) !important;
+  background-color: var(--c--contextuals--background--surface--primary);
 
   // Buttons (if any native buttons remain visible)
-  --ec-button-bg-color: var(--c--globals--colors--gray-000);
+  --ec-button-bg-color: var(--c--contextuals--background--surface--primary);
-  --ec-button-border-color: var(--c--globals--colors--gray-200);
+  --ec-button-border-color: var(--c--contextuals--border--surface--primary);
-  --ec-button-text-color: var(--c--globals--colors--gray-800);
+  --ec-button-text-color: var(--c--contextuals--content--semantic--neutral--primary);
-  --ec-button-active-bg-color: var(--c--globals--colors--gray-100);
+  --ec-button-active-bg-color: var(--c--contextuals--background--surface--secondary);
-  --ec-button-active-border-color: var(--c--globals--colors--gray-300);
+  --ec-button-active-border-color: var(--c--contextuals--border--surface--primary);
 
   // Today & highlight
   --ec-today-bg-color: transparent;
-  --ec-highlight-color: var(--c--globals--colors--brand-050);
+  --ec-highlight-color: var(--c--contextuals--background--semantic--brand--tertiary);
 
   // Events
   --ec-event-text-color: #fff;
 
   // Now indicator
-  --ec-now-indicator-color: var(--c--globals--colors--brand-500);
+  --ec-now-indicator-color: var(--c--contextuals--content--semantic--brand--primary);
 
   border: none !important;
+
+  // Force dark background on all EC sub-elements that use --ec-bg-color,
+  // since the EC library re-declares the variable internally and wins cascade.
+  & .ec-sidebar,
+  & .ec-col-head,
+  & .ec-col-group,
+  & .ec-no-events,
+  & .ec-all-day,
+  & .ec-header,
+  & .ec-main,
+  & .ec-body,
+  & .ec-days,
+  & .ec-day-head,
+  & .ec-day-foot {
+    background-color: var(--c--contextuals--background--surface--primary) !important;
+  }
 }
 
 .ec-day {
@@ -46,6 +64,8 @@
 
 .ec-col-group,
 .ec-col-head {
+  background-color: var(--c--contextuals--background--surface--primary) !important;
+
   &.ec-today {
     background-color: var(
       --c--contextuals--background--surface--secondary
@@ -62,6 +82,11 @@
 
 .ec-main {
   border: none !important;
+  background-color: var(--c--contextuals--background--surface--primary) !important;
+}
+
+.ec-body {
+  background-color: var(--c--contextuals--background--surface--primary) !important;
 }
 // -----------------------------------------------------------------------------
 // 3. Column headers - Unified header zone with bottom shadow
@@ -71,6 +96,8 @@
 .ec-col-head {
   border: none !important;
   background-color: transparent;
+  font-family: 'Ysabeau', Inter, sans-serif;
+  font-weight: 700;
   time {
     .day-of-month {
       border: 1px solid transparent;
@@ -95,29 +122,31 @@
 // Remove borders from all-day section
 .ec-all-day {
   border: none !important;
+  background-color: var(--c--contextuals--background--surface--primary) !important;
 
-  // Target cells inside all-day
   > * {
     border: none !important;
   }
 
-  // Remove right border from all days in all-day section
   .ec-day {
     border-inline-end: none !important;
     border-right: none !important;
+    background-color: var(--c--contextuals--background--surface--primary) !important;
+    background-image: none !important;
   }
 }
 
-// Add shadow to the header section
+// Header section
 .ec-header {
-  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   z-index: 3;
+  background-color: var(--c--contextuals--background--surface--primary) !important;
 
   // Sidebar in header: no border, no text
   .ec-sidebar {
     border: none !important;
     font-size: 0;
     color: transparent;
+    background-color: var(--c--contextuals--background--surface--primary) !important;
   }
 }
 
@@ -223,7 +252,8 @@
 // -----------------------------------------------------------------------------
 .ec-sidebar {
   font-size: 0.75rem;
-  color: var(--c--globals--colors--gray-500);
+  font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
+  color: var(--c--contextuals--content--semantic--neutral--secondary);
 }
 
 // -----------------------------------------------------------------------------