Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/sections/QuoteBlock/QuoteBlock.view.tsx

@@ -35,7 +35,7 @@ function QuoteBlockView({
         role="region"
       >
         <div
-          className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--spacing-scale-020)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
+          className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--space-500)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
         >
           <QuoteStatementDecor />
           <div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center text-center">
@@ -64,11 +64,11 @@ function QuoteBlockView({
       role="region"
     >
       <div
-        className={`${config.card} bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
+        className={`${config.card} bg-[var(--color-surface-invert-brand-secondary)] relative overflow-hidden`}
       >
         {/* Background with noise texture */}
         <div
-          className="absolute inset-0 bg-[var(--color-surface-default-brand-darker-accent)]"
+          className="absolute inset-0 bg-[var(--color-surface-invert-brand-secondary)]"
           style={{
             filter:
               'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')',
@@ -101,7 +101,7 @@ function QuoteBlockView({
                 />
               ) : (
                 <div
-                  className={`flex items-center justify-center bg-gray-300 rounded-full ${config.avatar} text-gray-600 font-bold`}
+                  className={`flex items-center justify-center bg-[var(--color-gray-300)] rounded-full ${config.avatar} text-[var(--color-gray-600)] font-bold`}
                 >
                   <span className="text-sm md:text-base lg:text-lg xl:text-xl">
                     {author
@@ -125,7 +125,7 @@ function QuoteBlockView({
                 className={[
                   "font-bricolage-grotesque font-normal",
                   config.quote,
-                  "text-[var(--color-content-inverse-primary)]",
+                  "text-[var(--color-content-invert-primary)]",
                   // give space for the hanging open-quote so it's not clipped:
                   "pl-[0.6em] -indent-[0.6em]",
                   // inject quotes
@@ -139,10 +139,10 @@ function QuoteBlockView({
               </p>
             </blockquote>
           </div>
-          <footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
+          <footer className="flex flex-col gap-[var(--space-200)] md:gap-[var(--space-300)] xl:gap-[var(--space-500)]">
             <cite
               id={authorId}
-              className={`font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
+              className={`font-normal ${config.author} text-[var(--color-content-invert-primary)] uppercase not-italic`}
             >
               {author}
             </cite>
@@ -153,7 +153,7 @@ function QuoteBlockView({
                 className={[
                   "font-normal",
                   config.source,
-                  "text-[var(--color-content-inverse-primary)] uppercase",
+                  "text-[var(--color-content-invert-primary)] uppercase",
                   "pl-[0.6em] -indent-[0.6em]",
                   "relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
                   "before:[font-family:var(--font-inter)] after:[font-family:var(--font-inter)]",