css/site.css

@@ -48,7 +48,7 @@ select {
   position: sticky;
   top: 0;
   z-index: 20;
-  background: rgba(255, 253, 249, 0.94);
+  background: rgba(248, 250, 252, 0.94);
   border-bottom: 1px solid rgba(102, 96, 95, 0.18);
   box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05);
   backdrop-filter: blur(18px);
@@ -248,7 +248,7 @@ select {
   overflow: auto;
   padding: 22px;
   border: 1px solid rgba(102, 96, 95, 0.18);
-  background: #fffdfa;
+  background: #f8fafc;
   box-shadow: var(--shadow-lift);
   transform: translateX(-50%);
   display: none;
@@ -416,7 +416,7 @@ select {
 .button--secondary {
   border-color: rgba(75, 15, 36, 0.24);
   color: var(--color-primary-wine-100);
-  background: rgba(255, 255, 255, 0.72);
+  background: rgba(248, 250, 252, 0.78);
 }
 
 .button--sm {
@@ -435,7 +435,7 @@ select {
     url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
   background-position: center;
   background-size: cover;
-  color: #fffdfa;
+  color: #f8fafc;
 }
 
 .hero-copy {
@@ -484,7 +484,7 @@ select {
 }
 
 .type-lab-section {
-  background: #fffdfa;
+  background: #eef2f6;
 }
 
 .type-options {
@@ -513,7 +513,7 @@ select {
 
 .type-card.is-selected {
   border-color: rgba(75, 15, 36, 0.48);
-  background: linear-gradient(180deg, #fffdfa 0%, #f7efe8 100%);
+  background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
   box-shadow: var(--shadow-lift);
 }
 
@@ -531,7 +531,7 @@ select {
 
 .type-card.is-selected-soft {
   border-color: rgba(185, 150, 91, 0.62);
-  background: #fffaf0;
+  background: #f7f4ea;
 }
 
 .type-card.is-selected-soft::before {
@@ -752,7 +752,7 @@ select {
 }
 
 .product-media--amber {
-  background: linear-gradient(140deg, #a8632a, #eaded2);
+  background: linear-gradient(140deg, #a8632a, #dde4ec);
 }
 
 .product-media--green {
@@ -785,7 +785,7 @@ select {
   inset: 54px 8px auto;
   height: 42px;
   border-radius: 4px;
-  background: #f4eee8;
+  background: #eef2f6;
 }
 
 .product-card h3 {

css/tokens.css

@@ -4,8 +4,8 @@
   --color-neutral-black: #161616;
   --color-neutral-gray-700: #30343a;
   --color-neutral-gray-600: #66605f;
-  --color-neutral-gray-300: #d8d3cf;
-  --color-background-base: #faf8f5;
+  --color-neutral-gray-300: #d9dee6;
+  --color-background-base: #f4f6f9;
   --color-surface: #ffffff;
   --color-accent-gold: #b9965b;
   --color-accent-blue: #1f3476;

css/ui-kit.css

@@ -3,8 +3,8 @@
   --color-primary-wine-80: #6d1c36;
   --color-neutral-black: #161616;
   --color-gray-600: #66605f;
-  --color-gray-300: #d8d3cf;
-  --color-background-base: #faf8f5;
+  --color-gray-300: #d9dee6;
+  --color-background-base: #f4f6f9;
   --color-accent-gold: #b9965b;
   --color-white: #ffffff;
   --color-error: #a33a2f;
@@ -59,7 +59,7 @@ select {
   inset: 0 auto 0 0;
   width: 280px;
   padding: 24px;
-  background: #fffdf9;
+  background: #f8fafc;
   border-right: 1px solid rgba(102, 96, 95, 0.18);
   display: flex;
   flex-direction: column;
@@ -131,7 +131,7 @@ select {
   gap: 48px;
   background:
     radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%),
-    linear-gradient(135deg, #fffdfa 0%, #f4eee8 58%, #eaded2 100%);
+    linear-gradient(135deg, #ffffff 0%, #eef2f6 58%, #dde4ec 100%);
 }
 
 .kit-hero__content {
@@ -463,7 +463,7 @@ code {
   place-items: center;
   background:
     linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%),
-    var(--media-bg, #eaded2);
+    var(--media-bg, #dde4ec);
 }
 
 .product-card--compact .product-media {
@@ -475,7 +475,7 @@ code {
 }
 
 .product-media--amber {
-  --media-bg: linear-gradient(140deg, #a8632a, #eaded2);
+  --media-bg: linear-gradient(140deg, #a8632a, #dde4ec);
 }
 
 .product-media--green {
@@ -508,7 +508,7 @@ code {
   inset: 54px 8px auto;
   height: 42px;
   border-radius: 4px;
-  background: #f4eee8;
+  background: #eef2f6;
 }
 
 .product-meta {
@@ -671,7 +671,7 @@ td {
 }
 
 th {
-  background: #f0e8df;
+  background: #e8edf3;
   color: var(--color-primary-wine-100);
   font-size: 12px;
   text-transform: uppercase;
@@ -770,7 +770,7 @@ tbody tr:hover {
 .screen-preview__content span {
   min-height: 110px;
   border-radius: var(--radius-sm);
-  background: #f0e8df;
+  background: #e8edf3;
 }
 
 @media (max-width: 1100px) {