fix(frontend): update overall design to follow new guidelines

frontend/src/lib/assets/app.css

@@ -3,22 +3,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@media (min-width: 1760px) {
+  :root {
+    font-size: 18px;
+  }
+}
+
 @layer base {
 
 	/* Light mode: default border color */
 	.border, .border-t, .border-r, .border-b, .border-l, 
 	.border-x, .border-y, 
 	.divide-x > :not([hidden]) ~ :not([hidden]), 
 	.divide-y > :not([hidden]) ~ :not([hidden]) {
-		border-color: #e5e7eb; /* gray-200 */
+		border-color: rgb(var(--color-border-light));
 	}
 
 	/* Dark mode: change border color */
 	.dark .border, .dark .border-t, .dark .border-r, .dark .border-b, .dark .border-l, 
 	.dark .border-x, .dark .border-y, 
 	.dark .divide-x > :not([hidden]) ~ :not([hidden]), 
 	.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
-		border-color: #4b5563; /* gray-700 */
+		border-color: rgb(var(--color-border-light));
 	}
 
 	/* Chrome, Edge, and Safari */
@@ -193,3 +199,10 @@ svelte-virtual-list-contents > * + * {
 	);
 }
 
+/* Prevent clock icon in input[type="time"] making the input taller */
+
+/* Chrome, Safari, Edge, Opera */
+input[type="time"]::-webkit-calendar-picker-indicator {
+	margin: 0;
+  padding: 0;
+}

frontend/src/lib/assets/tokens/README.md

@@ -0,0 +1 @@
+The content of tokens.json is auto-generated by the 'Figma Variables to JSON' extension

frontend/src/lib/assets/tokens/colorTokensConfig.ts

@@ -0,0 +1,2 @@
+export const lightModeName = 'light' as const
+export const darkModeName = 'dark-3' as const