Initial Commit

app/globals.css

@@ -1,26 +1,149 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  /* Map semantic utility colors to CSS variables */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* Map specific OMS colors IF you want direct utilities like bg-oms-gold */
+  /* If you only use semantic vars (like bg-primary), these aren't strictly needed here */
+  --color-oms-gold: var(--oms-gold);
+  --color-oms-black: var(--oms-black);
+  --color-oms-white: var(--oms-white);
+  --color-oms-light-gray: var(--oms-light-gray);
+
+  /* Map font variables */
+  --font-sans: var(--font-sans);
+
+  /* Map radius variables */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+:root {
+  /* --- Font --- */
+  --font-sans: "Poppins", sans-serif;
+
+  /* --- Radius --- */
+  --radius: 0.5rem; /* Example: Adjust OMS desired radius */
+
+  /* --- Light Mode Colors --- */
+  --background: #ffffff; /* White */
+  --foreground: #000000; /* Black */
+  --card: #ffffff;
+  --card-foreground: #000000;
+  --popover: #ffffff;
+  --popover-foreground: #000000;
+  --primary: #e1c44a; /* OMS Gold */
+  --primary-foreground: #000000; /* Black Text on Gold */
+  --secondary: #f8f9fa; /* OMS Light Gray */
+  --secondary-foreground: #000000; /* Black Text on Light Gray */
+  --muted: #f8f9fa; /* OMS Light Gray */
+  --muted-foreground: #6c757d; /* Muted Gray Text */
+  --accent: var(--primary); /* Use Primary Gold for Accent */
+  --accent-foreground: var(
+    --primary-foreground
+  ); /* Use Black for Accent Text */
+  --destructive: #dc3545; /* Example Red */
+  --destructive-foreground: #ffffff; /* White Text on Red */
+  --border: #dee2e6; /* Light Gray Border */
+  --input: #dee2e6; /* Light Gray Input Border */
+  --ring: var(--primary); /* Gold focus ring */
+
+  /* --- Specific OMS Colors (Optional if Semantic is Enough) --- */
+  --oms-gold: #e1c44a;
+  --oms-black: #000000;
+  --oms-white: #ffffff;
+  --oms-light-gray: #f8f9fa;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+.dark {
+  /* --- Dark Mode Color Overrides --- */
+  --background: #121212; /* Very Dark Gray/Black */
+  --foreground: #e0e0e0; /* Light Gray Text */
+  --card: #1e1e1e; /* Slightly Lighter Dark */
+  --card-foreground: #e0e0e0;
+  --popover: #1e1e1e;
+  --popover-foreground: #e0e0e0;
+  --primary: #e1c44a; /* Keep Gold */
+  --primary-foreground: #000000; /* Keep Black Text on Gold */
+  --secondary: #2a2a2a; /* Darker Gray */
+  --secondary-foreground: #e0e0e0; /* Light Text */
+  --muted: #2a2a2a;
+  --muted-foreground: #a0a0a0; /* Dimmer Light Text */
+  --accent: var(--primary); /* Keep Gold */
+  --accent-foreground: var(--primary-foreground); /* Keep Black */
+  --destructive: #842029; /* Darker Red */
+  --destructive-foreground: #f8d7da; /* Lighter text on Dark Red */
+  --border: #3a3a3a; /* Dark Border */
+  --input: #3a3a3a;
+  --ring: var(--primary); /* Keep Gold */
+
+  /* --- Specific OMS Colors (Optional) --- */
+  --oms-gold: #e1c44a;
+  --oms-black: #000000;
+  --oms-white: #ffffff;
+  --oms-light-gray: #2a2a2a; /* Use Dark Gray */
+}
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    @apply flex flex-col min-h-screen;
+  }
+  main {
+    @apply flex-grow;
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+@layer components {
+}
+
+@layer utilities {
+  .animation-delay-300 {
+    animation-delay: 0.3s;
+  }
+  .animation-delay-600 {
+    animation-delay: 0.6s;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.8s ease-out forwards;
+  opacity: 0;
 }