feat: add typography styles and enhance component design

Defined new font variables (`--font-display`, `--font-serif`, and `--font-sans`) and applied them to `p`, `h1`, and `h2` elements. Included component-specific typography settings for improved styling consistency across text elements.

src/css/input.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @theme {
+    --font-display: "Roboto", "sans-serif";
     --font-sans: 'Ubuntu', sans-serif;
     --font-serif: 'Roboto', sans-serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
@@ -39,3 +40,22 @@
     --color-sf_grau-900: #393939;
     --color-sf_grau-950: #323232;
 }
+
+@layer components {
+    p {
+        font-family: var(--font-serif);
+    }
+    h1 {
+        font-family: var(--font-sans);
+        font-size: var(--text-3xl);
+        font-weight: var(--font-weight-semibold);
+        padding-bottom: 1rem;
+    }
+    h2 {
+        font-family: var(--font-sans);
+        font-size: var(--text-xl);
+        font-weight: var(--font-weight-semibold);
+        padding-top: 0.7rem;
+        padding-bottom: 0.7rem;
+    }
+}