Fix surface colours in the cost comparison table and estimator

src/app/ipfs2filecoin/components/ComparisonTable.tsx

@@ -27,7 +27,9 @@ function MobileComparisonCards() {
             key={`${service} ${detail}`}
             className={clsx(
               'rounded-xl border border-(--color-border-muted) p-4',
-              highlighted && 'bg-(--color-card-background-hover)',
+              highlighted
+                ? 'bg-(--color-surface-accent)'
+                : 'bg-(--color-card-background)',
             )}
           >
             <div
@@ -59,15 +61,16 @@ function MobileComparisonCards() {
 
 function DesktopComparisonTable() {
   return (
-    <div className="hidden overflow-x-auto rounded-xl border border-(--color-border-muted) md:block">
+    <div className="hidden overflow-x-auto rounded-xl border border-(--color-border-muted) bg-(--color-card-background) md:block">
       <table className="w-full min-w-140 text-left text-base">
         <thead>
           {/*
-            `card-background-hover` is the only subtle-surface value the token
-            set has: zinc-50 on light sections, a lift rather than a wash on
-            dark ones. Named for hover, used here as a static header tint.
+            `surface-muted` is the local subtle-surface token, one step off the
+            card the table sits on in every section variant. Not
+            `card-background-hover`, which collapses to white inside a `gray`
+            section and painted the header lighter than the rows below it.
           */}
-          <tr className="border-(--color-border-muted) border-b bg-(--color-card-background-hover) text-(--color-paragraph-text) text-sm">
+          <tr className="border-(--color-border-muted) border-b bg-(--color-surface-muted) text-(--color-paragraph-text) text-sm">
             <th scope="col" className="px-5 py-4 font-medium">
               Where the data lives
             </th>
@@ -82,14 +85,18 @@ function DesktopComparisonTable() {
         <tbody className="text-(--color-paragraph-text)">
           {pricingComparison.map(
             ({ service, detail, storagePerTbMonth, egress, highlighted }) => (
-              // Weight and colour sit on the row so the highlighted line reads
-              // as one emphasised entry rather than two bold cells and a third
-              // that quietly drops back to the body colour.
+              // Weight, colour and fill sit on the row so the highlighted line
+              // reads as one emphasised entry rather than two bold cells and a
+              // third that quietly drops back to the body colour. The fill is
+              // the brand tint rather than `surface-muted`: sharing the header's
+              // tint would merge the two, since the highlighted row is the first
+              // one under it.
               <tr
                 key={`${service} ${detail}`}
                 className={clsx(
                   'border-(--color-border-muted) border-b last:border-b-0',
-                  highlighted && 'font-semibold text-(--color-text-base)',
+                  highlighted &&
+                    'bg-(--color-surface-accent) font-semibold text-(--color-text-base)',
                 )}
               >
                 {/*

src/app/ipfs2filecoin/components/CostEstimator.tsx

@@ -243,7 +243,10 @@ function EstimateBreakdown({ estimate }: { estimate: CostEstimate }) {
     <div
       role="status"
       aria-live="polite"
-      className="space-y-4 rounded-xl border border-(--color-border-muted) bg-(--color-card-background) p-5"
+      // Inset rather than another card: this panel sits inside the estimator's
+      // own card, and `card-background` there is the same white, so the two
+      // surfaces were separated by nothing but a hairline.
+      className="space-y-4 rounded-xl border border-(--color-border-muted) bg-(--color-surface-muted) p-5"
     >
       <dl className="space-y-3 text-(--color-paragraph-text)">
         {rows.map(({ label, amount, note }) => (
@@ -253,7 +256,8 @@ function EstimateBreakdown({ estimate }: { estimate: CostEstimate }) {
           >
             <dt>
               <span className="block text-sm">{label}</span>
-              <span className="block text-(--color-paragraph-text-subtle) text-xs">
+              {/* Keep the small notes above 4.5:1 contrast on the muted surface. */}
+              <span className="block text-(--color-paragraph-text) text-xs">
                 {note}
               </span>
             </dt>

src/app/ipfs2filecoin/page.tsx

@@ -183,7 +183,7 @@ export default function IpfsToFilecoin() {
 
             <div
               id="estimate"
-              className="scroll-mt-24 rounded-xl border border-(--color-border-muted) bg-(--color-card-background-hover) p-6"
+              className="scroll-mt-24 rounded-xl border border-(--color-border-muted) bg-(--color-card-background) p-6"
             >
               <Heading tag="h3" variant="card-heading">
                 Estimate your deposit

src/styles/globals.css

@@ -12,3 +12,25 @@
   --animate-slide-down: slideDown 300ms ease-out;
   --animate-slide-up: slideUp 300ms ease-out;
 }
+
+/*
+  Two surface tints the ui-filecoin token set has no value for.
+  `--color-card-background-hover` looks like the subtle-surface token but is not
+  one: inside a `gray` section it collapses to white, so using it as a header
+  tint or a highlight painted the emphasised part lighter than the card around
+  it. These resolve one step off the card surface in every section variant.
+*/
+:root,
+.light-section {
+  --color-surface-muted: var(--color-zinc-50);
+  --color-surface-accent: var(--color-brand-50);
+}
+
+.gray-section {
+  --color-surface-muted: var(--color-zinc-100);
+}
+
+.dark-section {
+  --color-surface-muted: var(--color-zinc-800);
+  --color-surface-accent: var(--color-brand-950);
+}