Adjust button styling to improve appearance of text

src/lib/components/ui/Button.svelte

@@ -59,10 +59,10 @@
 		height: 36px;
 		border-radius: 20px;
 		border: none;
-		box-shadow: var(--shadow-std);
+		box-shadow: var(--shadow-small);
 		font-family: 'URW Gothic', sans-serif;
 		font-size: 0.93rem;
-		font-weight: 600;
+		font-weight: 400;
 		letter-spacing: 0.05ch;
 		transition:
 			all 0.1s ease,
@@ -72,6 +72,7 @@
 	.accent {
 		background-color: var(--color-accent);
 		color: var(--color-title);
+		font-weight: 600;
 	}
 
 	.brand {

src/lib/components/ui/cards/NearbyStationsCard.svelte

@@ -22,7 +22,7 @@
 					<div
 						class="btn-container"
 						animate:flip={{ duration: flipDuration }}
-						transition:fade|global={{ duration: 300 }}
+						in:fade|global={{ duration: 200 }}
 					>
 						<Button href={`/board?loc=${station.c}`}
 							><span class="stn-name">{station.n}</span></Button

src/lib/global.css

@@ -55,6 +55,7 @@
 	/* Shadows */
 	--color-shadow: hsla(210, 20%, 5%, 0.35);
 	--shadow-std: 0 4px 12px var(--color-shadow);
+	--shadow-small: 0 4px 6px var(--color-shadow);
 	--shadow-up: 0 -4px 12px var(--color-shadow);
 	--shadow-right: 4px 0 12px var(--color-shadow);
 }