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>

stories/modals/Login.stories.tsx

@@ -46,7 +46,7 @@ function FakeMarketingPageBehindOverlay({
   return (
     <div className="relative min-h-[100dvh] overflow-hidden">
       <div
-        className="absolute inset-0 bg-[var(--color-surface-inverse-brand-primary)]"
+        className="absolute inset-0 bg-[var(--color-surface-invert-brand-primary)]"
         aria-hidden
       />
       <div className="relative z-0 px-8 py-16">
@@ -132,7 +132,7 @@ export const FullPageRouteSolid = {
   },
   decorators: [
     (Story: () => React.ReactNode) => (
-      <div className="min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]">
+      <div className="min-h-[100dvh] bg-[var(--color-surface-invert-brand-primary)]">
         <Story />
       </div>
     ),
@@ -163,7 +163,7 @@ export const FullPageRouteSolid = {
 export const ModalChromeOnly = {
   name: "Modal chrome only (placeholder)",
   render: () => (
-    <div className="min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]">
+    <div className="min-h-[100dvh] bg-[var(--color-surface-invert-brand-primary)]">
       <Login
         isOpen
         onClose={() => {}}
@@ -203,7 +203,7 @@ export const FormOnly = {
   },
   decorators: [
     (Story: () => React.ReactNode) => (
-      <div className="min-h-[200px] bg-[var(--color-surface-inverse-brand-primary)] p-8">
+      <div className="min-h-[200px] bg-[var(--color-surface-invert-brand-primary)] p-8">
         <Story />
       </div>
     ),