Add services and work on styling

frontend/src/styles.css

@@ -28,10 +28,47 @@
 
 @theme {
 	/* Colors */
-	--color-pn-blue-default: #00a0d6;
-	--color-pn-blue-dark: #005d92;
-	--color-pn-blue-darkest: #0d234b;
+	--color-pn-blue-900: #0d234b;
+	--color-pn-blue-700: #005d92;
+	--color-pn-blue-400: #00a0d6;
+	--color-pn-blue-200: #8eddf9;
+	--color-pn-blue-50: #e0f8ff;
+	--color-pn-blue-25: #effbff;
+	--color-pn-coral-900: #500715;
+	--color-pn-coral-700: #9b1c2e;
+	--color-pn-coral-400: #f06365;
+	--color-pn-coral-200: #fbc2c1;
+	--color-pn-coral-50: #fdefee;
+	--color-pn-coral-25: #fef7f6;
+	--color-pn-gray-900: #2d2013;
+	--color-pn-gray-700: #5e554a;
+	--color-pn-gray-400: #969087;
+	--color-pn-gray-200: #d3cecb;
+	--color-pn-gray-100: #e9e6e5;
+	--color-pn-gray-50: #f3f2f2;
+	--color-pn-gray-25: #f9f8f8;
+	--color-pn-green-900: #002f24;
+	--color-pn-green-700: #005e41;
+	--color-pn-green-500: #0aa85c;
+	--color-pn-green-400: #5ec584;
+	--color-pn-green-200: #abe3bb;
+	--color-pn-green-50: #dcf6e7;
+	--color-pn-green-25: #edfbf3;
+	--color-pn-orange-900: #4f1600;
+	--color-pn-orange-700: #99290a;
+	--color-pn-orange-500: #ed7123;
+	--color-pn-orange-400: #f89142;
+	--color-pn-orange-200: #ffc8a3;
+	--color-pn-orange-50: #fff1e3;
+	--color-pn-orange-25: #fff8f1;
+	--color-pn-warning: #a70707;
 
 	/* Fonts */
-	--font-pn: 'PN Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-sans: 'PN Sans', ui-sans-serif, system-ui, sans-serif;
+}
+
+@layer base {
+	html {
+		font-family: var(--font-sans);
+	}
 }