Mega push vol1

src/routes/layout.css

@@ -1,32 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Work+Sans:wght@400;500;600;700&display=swap');
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
 @theme {
-	/* Colors - Dark theme */
-	--color-dark: #0a0a0f;
-	--color-surface: #14141f;
-	--color-light: #f0f0f5;
+	/* Colors - Figma Design System */
+	--color-background: #05090f;
+	--color-night: #0A121F;
+	--color-dark: #14243E;
+	--color-surface: #0A121F;
+	--color-light: #E5E6F0;
+	--color-text: #FFFFFF;
+	--color-text-muted: rgba(229, 230, 240, 0.5);
 
-	/* Brand */
-	--color-primary: #6366f1;
-	--color-primary-hover: #4f46e5;
+	/* Brand - Primary */
+	--color-primary: #00A3E0;
+	--color-primary-hover: #33b5e6;
 
-	/* Status */
-	--color-success: #22c55e;
-	--color-warning: #f59e0b;
-	--color-error: #ef4444;
-	--color-info: #3b82f6;
+	/* Status Colors */
+	--color-success: #33E000;
+	--color-warning: #FFAB00;
+	--color-error: #E03D00;
+	--color-info: #00A3E0;
 
-	/* Font */
-	--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+	/* Typography - Figma Fonts */
+	--font-heading: 'Tilt Warp', sans-serif;
+	--font-body: 'Work Sans', sans-serif;
+	--font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
+
+	/* Border Radius - Figma Design */
+	--radius-sm: 8px;
+	--radius-md: 16px;
+	--radius-lg: 24px;
+	--radius-xl: 32px;
+	--radius-pill: 32px;
+	--radius-circle: 128px;
 }
 
 /* Base styles */
-body {
-	background-color: var(--color-dark);
+html, body {
+	background-color: var(--color-background);
 	color: var(--color-light);
-	font-family: var(--font-sans);
+	font-family: var(--font-body);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--font-heading);
+	font-weight: 400;
 }
 
 /* Scrollbar styling */
@@ -36,14 +59,105 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-	background: var(--color-dark);
+	background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: var(--color-light) / 0.2;
-	border-radius: 4px;
+	background: var(--color-night);
+	border-radius: var(--radius-pill);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: var(--color-light) / 0.3;
+	background: var(--color-dark);
+}
+
+/* Focus styles */
+:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+	background-color: rgba(0, 163, 224, 0.3);
+	color: var(--color-light);
+}
+
+/* Prose/Markdown styles */
+.prose {
+	line-height: 1.6;
+}
+
+.prose p {
+	margin: 0.5em 0;
+}
+
+.prose strong {
+	font-weight: 700;
+	color: var(--color-light);
+}
+
+.prose code {
+	background: var(--color-night);
+	padding: 0.15em 0.4em;
+	border-radius: 4px;
+	font-family: 'Consolas', 'Monaco', monospace;
+	font-size: 0.9em;
+	color: var(--color-primary);
+}
+
+.prose pre {
+	background: var(--color-night);
+	padding: 1em;
+	border-radius: var(--radius-sm);
+	overflow-x: auto;
+	margin: 0.5em 0;
+}
+
+.prose pre code {
+	background: none;
+	padding: 0;
+	color: var(--color-light);
+}
+
+.prose blockquote {
+	border-left: 3px solid var(--color-primary);
+	padding-left: 1em;
+	margin: 0.5em 0;
+	color: var(--color-text-muted);
+	font-style: italic;
+}
+
+.prose ul, .prose ol {
+	padding-left: 1.5em;
+	margin: 0.5em 0;
+}
+
+.prose ul {
+	list-style-type: disc;
+}
+
+.prose ol {
+	list-style-type: decimal;
+}
+
+.prose li {
+	margin: 0.25em 0;
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4 {
+	color: var(--color-light);
+	margin: 0.75em 0 0.5em;
+	font-family: var(--font-heading);
+}
+
+.prose a {
+	color: var(--color-primary);
+	text-decoration: underline;
+}
+
+.prose hr {
+	border: none;
+	border-top: 1px solid var(--color-dark);
+	margin: 1em 0;
 }