Pending course, rest ready for launch

app/globals.css

@@ -5,9 +5,15 @@
 :root {
   /* ACVE core variables */
   --acve-brand: #98143f;
-  --acve-ink: #253247;
-  --acve-line: #d8dce3;
-  --acve-panel: #ffffff;
+  --acve-brand-strong: #7c1033;
+  --acve-brand-soft: #f7e8eb;
+  --acve-ink: #2f2931;
+  --acve-muted: #655e66;
+  --acve-line: #d8cec2;
+  --acve-panel: #fffaf3;
+  --acve-panel-strong: #fffdf9;
+  --acve-shell-bg: linear-gradient(180deg, #faf4ea 0%, #f4ebde 100%);
+  --acve-body-bg: radial-gradient(circle at top right, #fff8ef 0%, #f8efe3 52%, #f2e7d9 100%);
   --acve-heading-font: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
   --acve-body-font: "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
   --acve-space-1: 4px;
@@ -18,53 +24,81 @@
   --acve-space-6: 32px;
   --acve-space-7: 48px;
 
-  /* SHADCN MAPPING */
-  --background: 0 0% 98%;
-  /* Matches your #f5f5f7 approx */
-  --foreground: 220 24% 20%;
-  /* Matches your --acve-ink */
-
+  /* SHADCN mapping */
+  --background: 36 45% 95%;
+  --foreground: 330 10% 18%;
   --primary: 341 77% 34%;
-  /* Your Burgundy #98143f */
   --primary-foreground: 0 0% 100%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 220 24% 20%;
-
-  --border: 223 18% 87%;
-  /* Matches your --acve-line */
-  --input: 223 18% 87%;
+  --card: 34 55% 98%;
+  --card-foreground: 330 10% 18%;
+  --border: 32 26% 80%;
+  --input: 32 26% 80%;
   --ring: 341 77% 34%;
-
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-
+  --secondary: 28 37% 90%;
+  --secondary-foreground: 330 10% 20%;
+  --muted: 30 28% 90%;
+  --muted-foreground: 329 8% 41%;
+  --accent: 345 53% 94%;
+  --accent-foreground: 339 51% 24%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 210 40% 98%;
+  --popover: 34 55% 98%;
+  --popover-foreground: 330 10% 18%;
+  --radius: 0.95rem;
+}
 
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
+.dark {
+  --acve-brand: #bf4069;
+  --acve-brand-strong: #c95a7f;
+  --acve-brand-soft: #3c1f2d;
+  --acve-ink: #ede6e0;
+  --acve-muted: #b5aeb6;
+  --acve-line: #353847;
+  --acve-panel: #171c27;
+  --acve-panel-strong: #1b2130;
+  --acve-shell-bg: linear-gradient(180deg, #121621 0%, #0f1420 100%);
+  --acve-body-bg: radial-gradient(circle at top right, #1f2433 0%, #151a26 54%, #0f131e 100%);
 
-  --radius: 0.75rem;
-  /* 12px to match your primary button */
+  --background: 222 30% 11%;
+  --foreground: 30 25% 92%;
+  --primary: 338 53% 51%;
+  --primary-foreground: 0 0% 100%;
+  --card: 224 26% 15%;
+  --card-foreground: 30 25% 92%;
+  --border: 225 17% 27%;
+  --input: 225 17% 27%;
+  --ring: 338 53% 51%;
+  --secondary: 224 20% 20%;
+  --secondary-foreground: 30 25% 92%;
+  --muted: 224 20% 19%;
+  --muted-foreground: 225 14% 71%;
+  --accent: 336 27% 24%;
+  --accent-foreground: 30 25% 92%;
+  --destructive: 0 63% 38%;
+  --destructive-foreground: 0 0% 100%;
+  --popover: 224 26% 15%;
+  --popover-foreground: 30 25% 92%;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
 }
 
 html,
 body {
   margin: 0;
   min-height: 100%;
-  background: radial-gradient(circle at top right, #fcfcfd 0%, #f5f5f7 55%, #f0f0f2 100%);
-  color: var(--acve-ink);
+  background: var(--acve-body-bg);
+  color: hsl(var(--foreground));
   font-family: var(--acve-body-font);
   font-size: 16px;
   line-height: 1.45;
   text-rendering: geometricPrecision;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 a {
@@ -99,12 +133,17 @@ h4 {
 }
 
 ::selection {
-  background: #f2d6df;
-  color: #421020;
+  background: #f1d9e1;
+  color: #3f1020;
+}
+
+.dark ::selection {
+  background: #5d2e41;
+  color: #fff6fa;
 }
 
 .acve-shell {
-  background: linear-gradient(180deg, #f7f7f8 0%, #f2f3f5 100%);
+  background: var(--acve-shell-bg);
 }
 
 .acve-panel {
@@ -125,8 +164,8 @@ h4 {
   align-items: center;
   border: 1px solid var(--acve-line);
   border-radius: 9999px;
-  background: #fafafa;
-  color: #384253;
+  background: var(--acve-panel-strong);
+  color: var(--acve-muted);
   padding: 8px 14px;
   font-size: 0.95rem;
 }
@@ -142,7 +181,7 @@ h4 {
 .acve-button-secondary {
   border: 1px solid var(--acve-brand);
   color: var(--acve-brand);
-  background: #ffffff;
+  background: var(--acve-panel-strong);
   border-radius: 12px;
   min-height: 44px;
 }
@@ -161,8 +200,66 @@ h4 {
   padding: var(--acve-space-5);
 }
 
+.acve-scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.acve-scrollbar-none::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
 @media (min-width: 768px) {
   .acve-page {
     gap: var(--acve-space-6);
   }
 }
+
+/* Dark-mode compatibility layer for legacy light-only utility classes */
+.dark .bg-white,
+.dark .bg-white\/70,
+.dark .bg-white\/80,
+.dark .bg-white\/90,
+.dark .bg-\[\#faf8f8\],
+.dark .bg-\[\#f6f6f8\] {
+  background-color: hsl(var(--card)) !important;
+}
+
+.dark .bg-slate-50,
+.dark .bg-slate-50\/40,
+.dark .bg-slate-50\/50,
+.dark .bg-slate-50\/80,
+.dark .bg-slate-100,
+.dark .bg-slate-200 {
+  background-color: hsl(var(--muted)) !important;
+}
+
+.dark .border-slate-100,
+.dark .border-slate-200,
+.dark .border-slate-300,
+.dark .border-slate-400,
+.dark .border-gray-200 {
+  border-color: hsl(var(--border)) !important;
+}
+
+.dark .text-black,
+.dark .text-slate-900,
+.dark .text-slate-800,
+.dark .text-slate-700 {
+  color: hsl(var(--foreground)) !important;
+}
+
+.dark .text-slate-600,
+.dark .text-slate-500,
+.dark .text-slate-400 {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.dark [class*="text-[#1"],
+.dark [class*="text-[#2"],
+.dark [class*="text-[#3"],
+.dark [class*="text-[#0"] {
+  color: hsl(var(--foreground)) !important;
+}