feat(ui): weekend/vacation/checkbox colors follow accent theme

- Unify Saturday+Sunday into single isWeekend flag (header + grid lines)
- Replace hardcoded amber vacation bar/tooltip colors with brand-* classes
- Add global accent-color for checkboxes and radio buttons via CSS variable
- Update VACATION_TIMELINE_COLORS/BORDER to use brand palette (SICK stays red)
- Vacation-only tooltip uses neutral dark surface with brand accent border

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/components/timeline/TimelineTooltip.tsx

@@ -242,25 +242,25 @@ function VacationSummary({
   return (
     <div className={className}>
       <div className="flex items-center gap-1.5">
-        <span className="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-amber-500" />
-        <span className="font-semibold text-amber-300">{title}</span>
+        <span className="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-brand-500" />
+        <span className="font-semibold text-brand-300">{title}</span>
       </div>
-      <div className="mt-0.5 text-[11px] text-amber-200/80">
+      <div className="mt-0.5 text-[11px] text-brand-200/80">
         {formatDateLong(vacation.startDate)} to {formatDateLong(vacation.endDate)}
       </div>
       {holidayMeta ? (
-        <div className="mt-1 text-[11px] text-amber-100/75">{holidayMeta}</div>
+        <div className="mt-1 text-[11px] text-brand-100/75">{holidayMeta}</div>
       ) : null}
       {holidayLocationBasis ? (
-        <div className="mt-1 text-[11px] text-amber-100/85">{holidayLocationBasis}</div>
+        <div className="mt-1 text-[11px] text-brand-100/85">{holidayLocationBasis}</div>
       ) : null}
       {isPublicHoliday && vacation.calendarName ? (
-        <div className="mt-1 text-[11px] text-amber-200/60">
+        <div className="mt-1 text-[11px] text-brand-200/60">
           Calendar: {vacation.calendarName}
         </div>
       ) : null}
       {vacation.note && !isPublicHoliday ? (
-        <div className="mt-1 text-[11px] text-amber-200/60">{vacation.note}</div>
+        <div className="mt-1 text-[11px] text-brand-200/60">{vacation.note}</div>
       ) : null}
     </div>
   );
@@ -376,7 +376,7 @@ export function TimelineTooltip({
         <VacationSummary
           vacation={vacationHover}
           title={vacationTitle ?? "Vacation"}
-          className="mt-2 border-t border-amber-700/40 pt-2"
+          className="mt-2 border-t border-brand-700/40 pt-2"
         />
       </TooltipSurface>,
     );
@@ -410,8 +410,8 @@ export function TimelineTooltip({
       <TooltipSurface
         tooltipRef={vacationTooltipRef}
         position={vacationTooltipPos}
-        backgroundColor="rgba(120, 53, 15, 0.95)"
-        className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-amber-700/50 bg-amber-950/95 px-3 py-2 text-xs text-amber-50 shadow-2xl"
+        backgroundColor="rgba(10, 10, 10, 0.96)"
+        className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-brand-700/50 bg-gray-950/96 px-3 py-2 text-xs text-gray-50 shadow-2xl"
       >
         <VacationSummary vacation={vacationHover} title={vacationTitle ?? "Vacation"} />
       </TooltipSurface>,