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/HeroBanner/HeroBanner.tsx

@@ -35,10 +35,10 @@ const HeroBanner = memo<HeroBannerProps>(
     imageAlt = "Hero illustration",
   }) => {
     return (
-      <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
-        <div className="flex flex-col gap-[var(--spacing-scale-010)]">
+      <section className="bg-transparent px-[var(--space-200)] sm:px-[var(--space-250)] md:px-[var(--space-400)] lg:px-[var(--space-600)] xl:px-[var(--space-1200)]">
+        <div className="flex flex-col gap-[var(--space-250)]">
           {/* Frame container for content */}
-          <div className="bg-[var(--color-surface-inverse-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
+          <div className="bg-[var(--color-surface-invert-brand-primary)] p-[var(--space-300)] sm:p-[var(--space-400)] md:p-[var(--space-1800)] lg:py-[var(--space-2400)] lg:px-[var(--space-1800)] rounded-tl-none rounded-tr-[var(--radius-400)] rounded-br-[var(--radius-400)] rounded-bl-[var(--radius-400)] flex flex-col gap-[var(--space-600)] sm:gap-[var(--space-600)] md:flex-row md:gap-[var(--space-1200)] relative overflow-hidden">
             {/* DECORATIONS (behind content) */}
             <HeroDecor
               className="pointer-events-none absolute z-0

app/components/sections/HeroBanner/HeroDecor.tsx

@@ -7,7 +7,7 @@ interface HeroDecorProps {
 const HeroDecor = memo<HeroDecorProps>(({ className = "" }) => {
   return (
     <svg
-      className={`text-[var(--color-surface-default-brand-darker-accent)] ${className}`}
+      className={`text-[var(--color-content-default-brand-secondary)] ${className}`}
       viewBox="0 0 1540 645"
       aria-hidden="true"
       overflow="visible"