Lay the Almanacka design foundation: tokens, type, shell

New token system in global.css (near-white surfaces, one ink-blue
accent, no sub-12px type), self-hosted Schibsted Grotesk, rewritten
primitives (buttons, fields, modal shell, segmented, disclosure,
skeleton), a borderless 56px header with an SV | EN language toggle,
an Icon component replacing glyphs, page skeletons that keep the
layout during loading, and leave-type colours moved out of TS into
CSS variables. Feature blocks keep their structure for later phases.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/components/common/CalendarWeek.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useMemo } from 'react'
 import type { PlannedLeaveDay, CalendarDayEntry } from '@/types'
-import { getColorForType, getLabelForType } from '@/utils/leaveTypes'
+import { getColorForType, getInkForType, getLabelForType, getTypeModifier } from '@/utils/leaveTypes'
 import { getISOWeekNumber, formatDateLocalISO } from '@/utils/dates'
 import { useTranslation } from '@/i18n'
 import { CalendarDay } from './CalendarDay'
@@ -395,10 +395,12 @@ export function CalendarWeek({
         const representativeType = firstRealDay?.dayType ?? 'vacation'
         const typeLabel = getLabelForType(representativeType, t)
         const color = getColorForType(representativeType)
+        const ink = getInkForType(representativeType)
         const anyDubbeldag = segment.dayInfos.some((d) => !d.isGap && d.isDubbeldag)
 
         const classNames = [
           'calendar-band',
+          `calendar-band--${getTypeModifier(representativeType)}`,
           segment.isBandStart ? 'calendar-band--start' : '',
           segment.isBandEnd ? 'calendar-band--end' : '',
           segment.wishId && segment.wishId === flashWishId ? 'calendar-band--flash' : '',
@@ -427,6 +429,7 @@ export function CalendarWeek({
               bottom: `${bandBottomInset + segment.lane * (barHeight + laneGap)}px`,
               height: `${barHeight}px`,
               backgroundColor: color,
+              color: ink,
             }}
             data-testid={`calendar-band-${segment.id}`}
             aria-label={`${label} · ${typeLabel}, ${segment.overallStart} – ${segment.overallEnd}`}