diff --git a/frontend/e2e/tests/red-days.spec.ts b/frontend/e2e/tests/red-days.spec.ts
index 4f266bb..467662a 100644
--- a/frontend/e2e/tests/red-days.spec.ts
+++ b/frontend/e2e/tests/red-days.spec.ts
@@ -14,31 +14,50 @@
  * hardcoded year — because Easter/Pentecost's date, and therefore which
  * year's calendar page to look at, changes every run.
  */
-import { test, expect } from '@playwright/test'
+import { test, expect, type Page } from '@playwright/test'
 import { addDays, nextEasterOnOrAfter, whitSunday, toIsoDate } from '../support/dates'
 import { calendarDayCell, goToCalendarMonth } from '../support/calendarNav'
 
-const RED_DAY_BG = 'rgb(253, 236, 235)' // .calendar-day--red-day
-const WEEKEND_BG = 'rgb(240, 240, 240)' // .calendar-day--weekend (plain Saturday)
+/**
+ * Resolves a CSS custom property (declared on :root in styles/global.css) to
+ * the computed `rgb(...)`/`rgba(...)` string the browser would report for an
+ * element actually painted with it — i.e. exactly what `toHaveCSS` compares
+ * against. Reading the token instead of a hardcoded literal means a future
+ * restyle that moves the palette can't silently desync this spec from
+ * calendar.css: whatever `--c-danger-weak`/`--c-weekend-bg` resolve to at
+ * test time is what's asserted.
+ */
+async function resolveCssVar(page: Page, varName: string): Promise<string> {
+  return page.evaluate((name) => {
+    const probe = document.createElement('div')
+    probe.style.backgroundColor = `var(${name})`
+    document.body.appendChild(probe)
+    const resolved = getComputedStyle(probe).backgroundColor
+    probe.remove()
+    return resolved
+  }, varName)
+}
 
 test.describe('red days, klämdagar and the combined-holiday-name trap', () => {
   test('Easter Sunday (Påskdagen) renders as a named red day', async ({ page }) => {
     const easter = nextEasterOnOrAfter(new Date())
     await goToCalendarMonth(page, easter)
+    const redDayBg = await resolveCssVar(page, '--c-danger-weak') // .calendar-day--red-day
 
     const cell = calendarDayCell(page, toIsoDate(easter))
     await expect(cell).toHaveClass(/calendar-day--red-day/)
-    await expect(cell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(cell).toHaveCSS('background-color', redDayBg)
     await expect(cell.getByTestId('calendar-day-holiday-name')).toHaveText('Påskdagen')
   })
 
   test('Whit Sunday (Pingstdagen) renders as a named red day', async ({ page }) => {
     const whitsun = whitSunday(nextEasterOnOrAfter(new Date()))
     await goToCalendarMonth(page, whitsun)
+    const redDayBg = await resolveCssVar(page, '--c-danger-weak') // .calendar-day--red-day
 
     const cell = calendarDayCell(page, toIsoDate(whitsun))
     await expect(cell).toHaveClass(/calendar-day--red-day/)
-    await expect(cell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(cell).toHaveCSS('background-color', redDayBg)
     await expect(cell.getByTestId('calendar-day-holiday-name')).toHaveText('Pingstdagen')
   })
 
@@ -58,16 +77,18 @@ test.describe('red days, klämdagar and the combined-holiday-name trap', () => {
     // that first Mon–Sun week row (see Calendar.tsx's `startOffset`) — so
     // this never depends on the two dates sharing a calendar month.
     await goToCalendarMonth(page, plainSunday)
+    const redDayBg = await resolveCssVar(page, '--c-danger-weak') // .calendar-day--red-day
+    const weekendBg = await resolveCssVar(page, '--c-weekend-bg') // .calendar-day--weekend
 
     const sundayCell = calendarDayCell(page, toIsoDate(plainSunday))
     await expect(sundayCell).toHaveClass(/calendar-day--red-day/)
     await expect(sundayCell).not.toHaveClass(/calendar-day--weekend/)
-    await expect(sundayCell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(sundayCell).toHaveCSS('background-color', redDayBg)
     await expect(sundayCell.getByTestId('calendar-day-holiday-name')).toHaveCount(0)
 
     const saturdayCell = calendarDayCell(page, toIsoDate(plainSaturday))
     await expect(saturdayCell).toHaveClass(/calendar-day--weekend/)
     await expect(saturdayCell).not.toHaveClass(/calendar-day--red-day/)
-    await expect(saturdayCell).toHaveCSS('background-color', WEEKEND_BG)
+    await expect(saturdayCell).toHaveCSS('background-color', weekendBg)
   })
 })