diff --git a/apps/app/src/assets/styles/styles.scss b/apps/app/src/assets/styles/styles.scss
index 9cdb530e..8e6dbc76 100644
--- a/apps/app/src/assets/styles/styles.scss
+++ b/apps/app/src/assets/styles/styles.scss
@@ -1,4 +1,5 @@
 // Write your overrides
 
 // RFC-TIMETABLE v0.2 D21 — status palette + geometry custom properties.
-@use "@/styles/tokens/timetable";
+// Plain CSS so jsdom/vitest can also load it via `import '@/styles/tokens/_timetable.css'`.
+@import "@/styles/tokens/_timetable.css";
diff --git a/apps/app/src/styles/tokens/_timetable.scss b/apps/app/src/styles/tokens/_timetable.css
similarity index 69%
rename from apps/app/src/styles/tokens/_timetable.scss
rename to apps/app/src/styles/tokens/_timetable.css
index 1a223b87..f4d31e36 100644
--- a/apps/app/src/styles/tokens/_timetable.scss
+++ b/apps/app/src/styles/tokens/_timetable.css
@@ -1,17 +1,22 @@
-// RFC-TIMETABLE v0.2 D21 — status colour tokens for the timetable canvas.
-//
-// Per-status colour pairs (background + border + foreground + dot) live as
-// CSS custom properties so PerformanceBlock + WachtrijCard + popovers all
-// resolve through `var(--tt-status-{status}-*)`.
-//
-// ART-14 (deferred) will let an organisation override the palette by
-// scoping these custom properties on a `[data-org-id="…"]` selector.
-//
-// Geometry tokens (lane height, time-axis spacing, block padding) live
-// next to the colours so any rendering tweak is one stop.
+/* RFC-TIMETABLE v0.2 D21 — status colour tokens for the timetable canvas.
+ *
+ * Per-status colour pairs (background + border + foreground + dot) live as
+ * CSS custom properties so PerformanceBlock + WachtrijCard + popovers all
+ * resolve through `var(--tt-status-{status}-*)`.
+ *
+ * ART-14 (deferred) will let an organisation override the palette by
+ * scoping these custom properties on a `[data-org-id="…"]` selector.
+ *
+ * Geometry tokens (lane height, time-axis spacing, block padding) live
+ * next to the colours so any rendering tweak is one stop.
+ *
+ * NOTE: this file is plain CSS (not SCSS) so that vitest+jsdom can load
+ * it via `import '@/styles/tokens/_timetable.css'` from mountWithVuexy
+ * — getComputedStyle() then resolves var(--tt-…) in component tests.
+ */
 
 :root {
-  // ─── Status palettes (8 visible + cancelled overlay) ─────────────
+  /* ─── Status palettes (8 visible + cancelled overlay) ───────────── */
 
   --tt-status-draft-bg:        #f1efe9;
   --tt-status-draft-border:    #dcd9d1;
@@ -58,7 +63,7 @@
   --tt-status-declined-fg:     #6b3915;
   --tt-status-declined-dot:    #b56331;
 
-  // ─── Cancelled hatch overlay ─────────────────────────────────────
+  /* ─── Cancelled hatch overlay ───────────────────────────────────── */
 
   --tt-cancelled-hatch: repeating-linear-gradient(
     135deg,
@@ -68,7 +73,7 @@
     rgba(0, 0, 0, 0.05) 8px
   );
 
-  // ─── Warnings + B2B ──────────────────────────────────────────────
+  /* ─── Warnings + B2B ────────────────────────────────────────────── */
 
   --tt-conflict-border: #d63d4b;
   --tt-conflict-glow:   rgba(214, 61, 75, 0.25);
@@ -82,7 +87,7 @@
   --tt-trashed-overlay: rgba(0, 0, 0, 0.35);
   --tt-trashed-icon:    #75706a;
 
-  // ─── Geometry ────────────────────────────────────────────────────
+  /* ─── Geometry ──────────────────────────────────────────────────── */
 
   --tt-lane-height:        44px;
   --tt-lane-gap:           4px;
@@ -102,21 +107,21 @@
   --tt-canvas-grid-major:  rgba(0, 0, 0, 0.06);
   --tt-canvas-grid-minor:  rgba(0, 0, 0, 0.025);
 
-  // ─── Drop / drag visuals ─────────────────────────────────────────
+  /* ─── Drop / drag visuals ───────────────────────────────────────── */
 
   --tt-ghost-bg:    rgba(255, 215, 90, 0.18);
   --tt-ghost-border:#f0c45a;
 
   --tt-focus-ring:  #1f7ad1;
 
-  // ─── Day-tab chrome ──────────────────────────────────────────────
+  /* ─── Day-tab chrome ────────────────────────────────────────────── */
 
   --tt-tab-active-bg:      #1f7ad1;
   --tt-tab-active-fg:      #ffffff;
   --tt-tab-hover-bg:       #eef2f7;
 }
 
-// ─── Animations ─────────────────────────────────────────────────────
+/* ─── Animations ─────────────────────────────────────────────────────── */
 
 @keyframes tt-cascade-pulse {
   0% {