's'

app/globals.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -20,6 +22,11 @@
   --foreground: #0f172a;
 }
 
+.dark {
+  --background: #0f172a;
+  --foreground: #f8fafc;
+}
+
 @keyframes scroll {
   from { transform: translateX(0); }
   to { transform: translateX(-50%); }
@@ -64,6 +71,9 @@ html {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
 }
+.dark .card-hover:hover {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+}
 
 .resource-card {
   transition: all 0.2s ease;
@@ -79,6 +89,9 @@ html {
   line-height: 1.85;
   color: #334155;
 }
+.dark .prose-custom {
+  color: #94a3b8;
+}
 
 .prose-custom h1 {
   font-size: 2.25rem;
@@ -89,6 +102,9 @@ html {
   margin-bottom: 1rem;
   line-height: 1.2;
 }
+.dark .prose-custom h1 {
+  color: #f8fafc;
+}
 
 .prose-custom h2 {
   font-size: 1.5rem;
@@ -99,6 +115,10 @@ html {
   padding-bottom: 0.5rem;
   border-bottom: 1px solid #e2e8f0;
 }
+.dark .prose-custom h2 {
+  color: #f8fafc;
+  border-bottom-color: #334155;
+}
 
 .prose-custom h3 {
   font-size: 1.25rem;
@@ -171,6 +191,11 @@ html {
   border-radius: 0 0.75rem 0.75rem 0;
   color: #334155;
 }
+.dark .prose-custom blockquote {
+  background: #0c4a6e33;
+  border-left-color: #38bdf8;
+  color: #94a3b8;
+}
 
 .prose-custom blockquote p:last-child {
   margin-bottom: 0;
@@ -190,6 +215,10 @@ html {
   font-size: 0.875em;
   font-family: var(--font-mono), ui-monospace, monospace;
 }
+.dark .prose-custom code {
+  background: #334155;
+  color: #e2e8f0;
+}
 
 .prose-custom pre {
   background: #1e293b;