update redesign

src/app/globals.css

@@ -2,25 +2,25 @@
 
 /* ─── Design Tokens (Material Design 3 inspired) ─── */
 :root {
-  --surface: #E7D3EF;
+  --surface: #FAF8FC;
   --surface-dim: #dadadc;
-  --surface-bright: #E7D3EF;
+  --surface-bright: #FAF8FC;
   --surface-container-lowest: #ffffff;
   --surface-container-low: #f3f3f6;
-  --surface-container: #eeeef0;
+  --surface-container: #F3E8F6;
   --surface-container-high: #e8e8ea;
   --surface-container-highest: #e2e2e5;
-  --on-surface: #1a1c1e;
-  --on-surface-variant: #4d434f;
+  --on-surface: #16001D;
+  --on-surface-variant: #6D6172;
   --inverse-surface: #2f3133;
   --inverse-on-surface: #f0f0f3;
   --outline: #7f7381;
   --outline-variant: #d0c2d1;
   --surface-tint: #83429f;
-  --primary: #4d046a;
+  --primary: #65149A;
   --on-primary: #ffffff;
-  --primary-container: #662582;
-  --on-primary-container: #de96f9;
+  --primary-container: #7C3AED;
+  --on-primary-container: #ffffff;
   --inverse-primary: #ebb2ff;
   --secondary: #006d37;
   --on-secondary: #ffffff;
@@ -46,14 +46,14 @@
   --tertiary-fixed-dim: #ebc246;
   --on-tertiary-fixed: #241a00;
   --on-tertiary-fixed-variant: #584400;
-  --background: #E7D3EF;
-  --on-background: #1a1c1e;
+  --background: #E8D8ED;
+  --on-background: #16001D;
   --surface-variant: #e2e2e5;
-  --brand-dark: #120217;
-  --brand-dark-surface: #1e0627;
-  --brand-accent: #e0c8f7;
-  --brand-accent-light: #E4D0FC;
-  --brand-cream: #E7D3EF;
+  --brand-dark: #17001F;
+  --brand-dark-surface: #25002F;
+  --brand-accent: #E8D8ED;
+  --brand-accent-light: #F3E8F6;
+  --brand-cream: #E8D8ED;
 }
 
 /* ─── Tailwind v4 Theme ─── */
@@ -141,10 +141,12 @@
 /* ─── Base Styles ─── */
 html {
   scroll-behavior: smooth;
+  background: #E8DCF2;
 }
 
 body {
-  background: var(--background);
+  min-height: 100vh;
+  background: #E8DCF2 !important;
   color: var(--on-surface);
   font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
@@ -1133,35 +1135,113 @@ body {
 
 /* ─── Shared Premium Framed Layout Classes ─── */
 .page-canvas {
-  @apply bg-[#E6D7EA] flex flex-col gap-0;
+  background-color: #E8D8ED;
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  
+  /* Responsive outer page padding */
+  padding-left: 16px;
+  padding-right: 16px;
+}
+@media (min-width: 768px) {
+  .page-canvas {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+@media (min-width: 1024px) {
+  .page-canvas {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+@media (min-width: 1280px) {
+  .page-canvas {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+@media (min-width: 1536px) {
+  .page-canvas {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
 }
 
 .page-frame {
-  @apply mx-auto w-full;
-  max-width: min(100% - 16px, 1560px);
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: 1920px;
+  display: flex;
+  flex-direction: column;
+  /* Responsive vertical spacing between major framed sections */
+  gap: 16px; /* gap-4 */
 }
-
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   .page-frame {
-    max-width: min(100% - 24px, 1560px);
+    gap: 24px; /* gap-6 */
   }
 }
-
 @media (min-width: 1024px) {
   .page-frame {
-    max-width: min(100% - 40px, 1680px);
+    gap: 32px; /* gap-8 */
   }
 }
 
-@media (min-width: 1536px) {
-  .page-frame {
-    max-width: min(100% - 56px, 1840px);
+/* ─── Section Style Variants ─── */
+.section-card-white {
+  background-color: #FAF8FC;
+  border: 1px solid rgba(255, 255, 255, 0.50);
+  border-radius: 1.75rem;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .section-card-white {
+    border-radius: 2.25rem;
+  }
+}
+@media (min-width: 1024px) {
+  .section-card-white {
+    border-radius: 2.75rem;
   }
 }
 
-@media (min-width: 2560px) {
-  .page-frame {
-    max-width: min(100% - 96px, 2200px);
+.section-card-lavender {
+  background-color: #F3E8F6;
+  border: 1px solid rgba(255, 255, 255, 0.50);
+  border-radius: 1.75rem;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .section-card-lavender {
+    border-radius: 2.25rem;
+  }
+}
+@media (min-width: 1024px) {
+  .section-card-lavender {
+    border-radius: 2.75rem;
+  }
+}
+
+.section-card-dark {
+  background: linear-gradient(to bottom right, #1A0322, #120217, #0A000D);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 2rem;
+  box-shadow: 0 20px 50px rgba(20, 0, 30, 0.22);
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .section-card-dark {
+    border-radius: 2.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  .section-card-dark {
+    border-radius: 3rem;
   }
 }