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/dashboard/YearTimeline.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import type { PlannedLeaveDay } from '@/types'
 import { useTranslation } from '@/i18n'
-import { getColorForType, getLabelForType } from '@/utils/leaveTypes'
+import { getColorForType, getLabelForType, getTypeModifier } from '@/utils/leaveTypes'
 import { formatDateForDisplay } from '@/utils/dates'
 
 export interface YearTimelineProps {
@@ -134,7 +134,7 @@ export function YearTimeline({ plannedDays, startDate, endDate, onBandClick }: Y
         {TYPE_PRIORITY.map((type) => (
           <li key={type} className="year-timeline__legend-item">
             <span
-              className="year-timeline__legend-swatch"
+              className={`year-timeline__legend-swatch year-timeline__legend-swatch--${getTypeModifier(type)}`}
               style={{ backgroundColor: getColorForType(type) }}
               aria-hidden="true"
             />
@@ -165,7 +165,7 @@ export function YearTimeline({ plannedDays, startDate, endDate, onBandClick }: Y
                   <button
                     key={`${year}-${idx}`}
                     type="button"
-                    className="year-timeline__band"
+                    className={`year-timeline__band year-timeline__band--${getTypeModifier(band.dominantType)}`}
                     style={{ left: `${left}%`, width: `${width}%`, backgroundColor: getColorForType(band.dominantType) }}
                     onClick={() => onBandClick(band.startDate)}
                     data-testid={`year-timeline-band-${year}-${idx}`}