fix: resolve merge conflict in globals.css

app/globals.css

@@ -19,18 +19,34 @@
 @theme {
 
   --color-brand-blue: #1b254b;
+
+  --color-brand-accent: #3b82f6;
   
   --color-brand-light: #f8fbff;
 
+  --color-ui-bg: #f9fafb;
+
+  --color-ui-text: #111827;
+
   --color-ui-muted: #6b7280;
   
   --color-ui-border: #e5e7eb;
 
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+  --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
+
+  --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
 }
 
 @layer components {
   .bento-item {
     @apply border border-[--color-ui-border] bg-white;
   }
-}
+}
+
+/* Research Page Styles */
+@import "./components/research/research.css";
+
+/* Publications Page Styles */
+@import "./components/publications/publications.css";

app/layout.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import "./globals.css";
 
 import Header from "./components/layout/Header/Header";
 import Footer from "./components/layout/Footer/Footer";
@@ -12,6 +11,7 @@ export const metadata: Metadata = {
   title: "H.A.I Learning",
   description: "H.A.I Learning",
 };
+import "./globals.css";
 
 export default function RootLayout({
   children,