From 75249b8322d9583e23486281296d9b7e12ce181b Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Fri, 13 Dec 2024 10:55:05 +0100
Subject: [PATCH 1/9] chore: Animated text input placeholder

---
 .../components/client/InputField.module.scss  | 34 ++++++++++++++++++-
 src/app/components/client/InputField.tsx      | 21 ++++++++----
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/app/components/client/InputField.module.scss b/src/app/components/client/InputField.module.scss
index 8f95ee8820d..0d4115c8f46 100644
--- a/src/app/components/client/InputField.module.scss
+++ b/src/app/components/client/InputField.module.scss
@@ -7,14 +7,46 @@
   flex-direction: column;
   position: relative;
 
+  .inputFieldWrapper {
+    position: relative;
+  }
+
+  .placeholder {
+    background: $color-white;
+    border-radius: $border-radius-sm;
+    color: $color-grey-40;
+    display: inline-block;
+    left: calc($spacing-sm + $spacing-xs);
+    line-height: 1em;
+    padding: 0 calc($spacing-xs * 0.5);
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform-origin: top left;
+    transform: translateY(-50%) scale(1);
+    transition: transform 0.2s ease-in-out;
+    user-select: none;
+  }
+
+  &:focus-within,
+  &:not(:has(:placeholder-shown)) {
+    .placeholder {
+      transform: translateY(-205%) scale(0.875);
+    }
+  }
+
   .inputField {
     border: 1px solid $color-grey-30;
     border-radius: $border-radius-sm;
     color: $color-black;
     // Add a bit more vertical space: The next spacing step is too much.
     padding: calc($spacing-sm * 1.5) $spacing-md;
+    width: 100%;
+
+    &::placeholder {
+      @include visually-hidden;
+    }
 
-    &::placeholder,
     &.noValue {
       color: $color-grey-40;
     }
diff --git a/src/app/components/client/InputField.tsx b/src/app/components/client/InputField.tsx
index abc2bb447df..e70415d8aee 100644
--- a/src/app/components/client/InputField.tsx
+++ b/src/app/components/client/InputField.tsx
@@ -38,13 +38,20 @@ export const InputField = (
           }
         </label>
       )}
-      <input
-        {...inputProps}
-        ref={inputRef}
-        className={`${styles.inputField} ${!value ? styles.noValue : ""} ${
-          isInvalid ? styles.hasError : ""
-        }`}
-      />
+      <span className={styles.inputFieldWrapper}>
+        <input
+          {...inputProps}
+          ref={inputRef}
+          className={`${styles.inputField} ${!value ? styles.noValue : ""} ${
+            isInvalid ? styles.hasError : ""
+          }`}
+        />
+        {inputProps.placeholder && (
+          <span aria-hidden className={styles.placeholder}>
+            {inputProps.placeholder}
+          </span>
+        )}
+      </span>
       {props.iconButton && (
         <div className={styles.buttonIcon}>{props.iconButton}</div>
       )}

From 9d15c56a1d6095492fd35200532beb512927cc8f Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Mon, 16 Dec 2024 10:51:36 +0100
Subject: [PATCH 2/9] chore: Make floating input field placeholder a label

---
 .../components/client/InputField.module.scss  |  6 ++--
 src/app/components/client/InputField.tsx      | 35 ++++++++-----------
 .../client/stories/InputField.stories.ts      | 19 ++++++++++
 3 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/app/components/client/InputField.module.scss b/src/app/components/client/InputField.module.scss
index 0d4115c8f46..8e7664f4e1c 100644
--- a/src/app/components/client/InputField.module.scss
+++ b/src/app/components/client/InputField.module.scss
@@ -11,10 +11,10 @@
     position: relative;
   }
 
-  .placeholder {
+  .floatingLabel {
     background: $color-white;
     border-radius: $border-radius-sm;
-    color: $color-grey-40;
+    color: $color-black;
     display: inline-block;
     left: calc($spacing-sm + $spacing-xs);
     line-height: 1em;
@@ -30,7 +30,7 @@
 
   &:focus-within,
   &:not(:has(:placeholder-shown)) {
-    .placeholder {
+    .floatingLabel {
       transform: translateY(-205%) scale(0.875);
     }
   }
diff --git a/src/app/components/client/InputField.tsx b/src/app/components/client/InputField.tsx
index e70415d8aee..e0d566ce508 100644
--- a/src/app/components/client/InputField.tsx
+++ b/src/app/components/client/InputField.tsx
@@ -13,6 +13,7 @@ import { useL10n } from "../../hooks/l10n";
 export const InputField = (
   props: AriaTextFieldProps & {
     iconButton?: ReactNode;
+    hasFloatingLabel?: boolean;
   },
 ) => {
   const { isRequired, label, isInvalid, value, description } = props;
@@ -29,29 +30,23 @@ export const InputField = (
   return (
     <div className={styles.input}>
       {label && (
-        <label {...labelProps} className={styles.inputLabel}>
-          {label}
-          {
-            // TODO: Add unit test when changing this code:
-            /* c8 ignore next */
-            isRequired ? <span aria-hidden="true">*</span> : ""
+        <label
+          {...labelProps}
+          className={
+            props.hasFloatingLabel ? styles.floatingLabel : styles.inputLabel
           }
+        >
+          {label}
+          {isRequired ? <span aria-hidden="true">*</span> : ""}
         </label>
       )}
-      <span className={styles.inputFieldWrapper}>
-        <input
-          {...inputProps}
-          ref={inputRef}
-          className={`${styles.inputField} ${!value ? styles.noValue : ""} ${
-            isInvalid ? styles.hasError : ""
-          }`}
-        />
-        {inputProps.placeholder && (
-          <span aria-hidden className={styles.placeholder}>
-            {inputProps.placeholder}
-          </span>
-        )}
-      </span>
+      <input
+        {...inputProps}
+        ref={inputRef}
+        className={`${styles.inputField} ${!value ? styles.noValue : ""} ${
+          isInvalid ? styles.hasError : ""
+        }`}
+      />
       {props.iconButton && (
         <div className={styles.buttonIcon}>{props.iconButton}</div>
       )}
diff --git a/src/app/components/client/stories/InputField.stories.ts b/src/app/components/client/stories/InputField.stories.ts
index 59e1a7666a1..0c57aae36f0 100644
--- a/src/app/components/client/stories/InputField.stories.ts
+++ b/src/app/components/client/stories/InputField.stories.ts
@@ -81,3 +81,22 @@ export const DateInputFieldInvalidWithMessage: Story = {
     errorMessage: "Select a date",
   },
 };
+
+export const TextInputFieldEmptyFloatingLabel: Story = {
+  args: {
+    label: "Text input floating label",
+    placeholder: "Type here",
+    type: "text",
+    hasFloatingLabel: true,
+  },
+};
+
+export const TextInputFieldFilledFloatingLabel: Story = {
+  args: {
+    label: "Text input floating label",
+    placeholder: "Type here",
+    type: "text",
+    value: "Input is filled",
+    hasFloatingLabel: true,
+  },
+};

From 240ce7af05ee9b6f97a4258b1453af27b72b9d5a Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Mon, 16 Dec 2024 11:36:51 +0100
Subject: [PATCH 3/9] feat: Add axe tests for InputField

---
 src/app/components/client/InputField.test.tsx | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/app/components/client/InputField.test.tsx

diff --git a/src/app/components/client/InputField.test.tsx b/src/app/components/client/InputField.test.tsx
new file mode 100644
index 00000000000..87cdd76fa6a
--- /dev/null
+++ b/src/app/components/client/InputField.test.tsx
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { expect } from "@jest/globals";
+import { render } from "@testing-library/react";
+import { composeStory } from "@storybook/react";
+import { axe } from "jest-axe";
+import Meta, {
+  TextInputFieldEmpty,
+  TextInputFieldEmptyFloatingLabel,
+  TextInputFieldFilled,
+  TextInputFieldFilledFloatingLabel,
+} from "./stories/InputField.stories";
+
+describe("InputField", () => {
+  test.each([
+    TextInputFieldEmpty,
+    TextInputFieldFilled,
+    TextInputFieldEmptyFloatingLabel,
+    TextInputFieldFilledFloatingLabel,
+  ])("passes the axe accessibility test suite for %s", async (component) => {
+    const ComposedInput = composeStory(component, Meta);
+    const { container } = render(<ComposedInput hasFloatingLabel />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

From 99778fe6aae7e5a94e493db69e61452dd8dfa6b4 Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Tue, 17 Dec 2024 15:43:50 +0100
Subject: [PATCH 4/9] chore: Floating label placement

---
 .../components/client/InputField.module.scss  | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/app/components/client/InputField.module.scss b/src/app/components/client/InputField.module.scss
index 8e7664f4e1c..b47b9326aa3 100644
--- a/src/app/components/client/InputField.module.scss
+++ b/src/app/components/client/InputField.module.scss
@@ -16,7 +16,7 @@
     border-radius: $border-radius-sm;
     color: $color-black;
     display: inline-block;
-    left: calc($spacing-sm + $spacing-xs);
+    left: $spacing-md;
     line-height: 1em;
     padding: 0 calc($spacing-xs * 0.5);
     pointer-events: none;
@@ -28,13 +28,6 @@
     user-select: none;
   }
 
-  &:focus-within,
-  &:not(:has(:placeholder-shown)) {
-    .floatingLabel {
-      transform: translateY(-205%) scale(0.875);
-    }
-  }
-
   .inputField {
     border: 1px solid $color-grey-30;
     border-radius: $border-radius-sm;
@@ -43,10 +36,6 @@
     padding: calc($spacing-sm * 1.5) $spacing-md;
     width: 100%;
 
-    &::placeholder {
-      @include visually-hidden;
-    }
-
     &.noValue {
       color: $color-grey-40;
     }
@@ -71,6 +60,29 @@
     }
   }
 
+  &:has(.floatingLabel) {
+    &::placeholder {
+      @include visually-hidden;
+    }
+
+    .inputField {
+      padding: $spacing-md;
+    }
+  }
+
+  &:focus-within,
+  &:not(:has(:placeholder-shown)) {
+    &:has(.floatingLabel) {
+      .inputField {
+        padding: calc($spacing-md + $spacing-sm) $spacing-md $spacing-sm;
+      }
+    }
+
+    .floatingLabel {
+      transform: translateY(-125%) scale(0.75);
+    }
+  }
+
   .inputLabel {
     font-weight: 600;
     margin-bottom: $spacing-sm;

From 24181f686fd4ec41ba2c9239439190e7361b8e16 Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Fri, 20 Dec 2024 13:26:45 +0100
Subject: [PATCH 5/9] chore: Add correct spacing for floating input labels

---
 .../components/client/InputField.module.scss  | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/app/components/client/InputField.module.scss b/src/app/components/client/InputField.module.scss
index b47b9326aa3..5f4f5e941b7 100644
--- a/src/app/components/client/InputField.module.scss
+++ b/src/app/components/client/InputField.module.scss
@@ -16,14 +16,15 @@
     border-radius: $border-radius-sm;
     color: $color-black;
     display: inline-block;
-    left: $spacing-md;
+    // Add a bit more space: The next spacing step is too much.
+    left: calc($spacing-sm * 1.5);
     line-height: 1em;
     padding: 0 calc($spacing-xs * 0.5);
     pointer-events: none;
     position: absolute;
     top: 50%;
     transform-origin: top left;
-    transform: translateY(-50%) scale(1);
+    transform: translate(-0.05em, -50%) scale(1);
     transition: transform 0.2s ease-in-out;
     user-select: none;
   }
@@ -32,8 +33,8 @@
     border: 1px solid $color-grey-30;
     border-radius: $border-radius-sm;
     color: $color-black;
-    // Add a bit more vertical space: The next spacing step is too much.
-    padding: calc($spacing-sm * 1.5) $spacing-md;
+    // Add a bit more space: The next spacing step is too much.
+    padding: calc($spacing-sm * 1.5);
     width: 100%;
 
     &.noValue {
@@ -61,25 +62,21 @@
   }
 
   &:has(.floatingLabel) {
-    &::placeholder {
+    ::placeholder {
       @include visually-hidden;
     }
-
     .inputField {
-      padding: $spacing-md;
+      // Move the value string off-center.
+      padding: calc($spacing-md * 1.25) calc($spacing-sm * 1.5) $spacing-xs;
     }
   }
 
   &:focus-within,
   &:not(:has(:placeholder-shown)) {
-    &:has(.floatingLabel) {
-      .inputField {
-        padding: calc($spacing-md + $spacing-sm) $spacing-md $spacing-sm;
-      }
-    }
-
     .floatingLabel {
-      transform: translateY(-125%) scale(0.75);
+      color: $color-grey-40;
+      // Make the floating label visually align with the input value.
+      transform: translate(-0.05em, -115%) scale(0.75);
     }
   }
 

From 780dfd46db3063f8da50899b8384e0377ba218fc Mon Sep 17 00:00:00 2001
From: Robert Helmer <rhelmer@mozilla.com>
Date: Tue, 7 Jan 2025 17:32:44 -0800
Subject: [PATCH 6/9] MNTOR-3814 - use context to fetch experiment data from
 Cirrus (#5440)

* attempt to use context for experiment data and glean
* searchParams is unavaiable in layout, store in x-header instead
---
 .../dashboard/[[...slug]]/page.tsx            |   2 +-
 .../(dashboard)/settings/[[...slug]]/page.tsx |   2 +-
 .../user/welcome/[[...slug]]/page.tsx         |   2 +-
 .../(redesign)/(public)/page.tsx              |   8 +-
 .../api/v1/user/welcome-scan/create/route.ts  |   2 +-
 src/app/functions/server/getExperiments.ts    |  11 +-
 src/app/hooks/useGlean.ts                     |  24 +-
 src/app/layout.tsx                            |  30 +-
 src/contextProviders/experiments.tsx          |  31 ++
 src/middleware.ts                             |   8 +
 src/telemetry/metrics.yaml                    | 308 ++++++++++++++++++
 11 files changed, 410 insertions(+), 18 deletions(-)
 create mode 100644 src/contextProviders/experiments.tsx

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx
index 398d533014b..71237978a95 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx
@@ -167,7 +167,7 @@ export default async function DashboardPage({ params, searchParams }: Props) {
       totalNumberOfPerformedScans={profileStats?.total}
       isNewUser={isNewUser}
       elapsedTimeInDaysSinceInitialScan={elapsedTimeInDaysSinceInitialScan}
-      experimentData={experimentData}
+      experimentData={experimentData["Features"]}
       activeTab={activeTab}
       hasFirstMonitoringScan={hasFirstMonitoringScan}
       signInCount={signInCount}
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx
index 3ccd74f268f..a90f861e91b 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx
@@ -125,7 +125,7 @@ export default async function SettingsPage({ params, searchParams }: Props) {
       yearlySubscriptionUrl={`${yearlySubscriptionUrl}&${additionalSubplatParams.toString()}`}
       subscriptionBillingAmount={getSubscriptionBillingAmount()}
       enabledFeatureFlags={enabledFeatureFlags}
-      experimentData={experimentData}
+      experimentData={experimentData["Features"]}
       lastScanDate={lastOneRepScan?.created_at}
       isMonthlySubscriber={isMonthlySubscriber}
       activeTab={activeTab}
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/[[...slug]]/page.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/[[...slug]]/page.tsx
index 409b60ecd59..f1c73fce090 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/[[...slug]]/page.tsx
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/[[...slug]]/page.tsx
@@ -77,7 +77,7 @@ export default async function Onboarding({ params, searchParams }: Props) {
       breachesTotalCount={allBreachesCount}
       stepId={firstSlug === FreeScanSlug ? "enterInfo" : "getStarted"}
       previousRoute={previousRoute}
-      experimentData={experimentData}
+      experimentData={experimentData["Features"]}
     />
   );
 }
diff --git a/src/app/(proper_react)/(redesign)/(public)/page.tsx b/src/app/(proper_react)/(redesign)/(public)/page.tsx
index b05e69286d9..ed109dd3c01 100644
--- a/src/app/(proper_react)/(redesign)/(public)/page.tsx
+++ b/src/app/(proper_react)/(redesign)/(public)/page.tsx
@@ -54,14 +54,14 @@ export default async function Page({ searchParams }: Props) {
     oneRepActivations > monthlySubscribersQuota;
   return (
     <AccountsMetricsFlowProvider
-      enabled={experimentData["landing-page-free-scan-cta"].enabled}
+      enabled={experimentData["Features"]["landing-page-free-scan-cta"].enabled}
       metricsFlowParams={{
         entrypoint: CONST_URL_MONITOR_LANDING_PAGE_ID,
         entrypoint_experiment: "landing-page-free-scan-cta",
         entrypoint_variation:
-          experimentData["landing-page-free-scan-cta"].variant,
+          experimentData["Features"]["landing-page-free-scan-cta"].variant,
         form_type:
-          experimentData["landing-page-free-scan-cta"].variant ===
+          experimentData["Features"]["landing-page-free-scan-cta"].variant ===
           "ctaWithEmail"
             ? "email"
             : "button",
@@ -73,7 +73,7 @@ export default async function Page({ searchParams }: Props) {
         l10n={getL10n()}
         countryCode={countryCode}
         scanLimitReached={scanLimitReached}
-        experimentData={experimentData}
+        experimentData={experimentData["Features"]}
       />
     </AccountsMetricsFlowProvider>
   );
diff --git a/src/app/api/v1/user/welcome-scan/create/route.ts b/src/app/api/v1/user/welcome-scan/create/route.ts
index 9ca69454ce4..856e6be710b 100644
--- a/src/app/api/v1/user/welcome-scan/create/route.ts
+++ b/src/app/api/v1/user/welcome-scan/create/route.ts
@@ -98,7 +98,7 @@ export async function POST(
     previewMode: searchParams.get("nimbus_preview") === "true",
   });
   const optionalInfoExperimentData =
-    experimentData["welcome-scan-optional-info"];
+    experimentData["Features"]["welcome-scan-optional-info"];
 
   const profileData: CreateProfileRequest = {
     first_name: firstName,
diff --git a/src/app/functions/server/getExperiments.ts b/src/app/functions/server/getExperiments.ts
index 40f55ffb15f..66dc85ff271 100644
--- a/src/app/functions/server/getExperiments.ts
+++ b/src/app/functions/server/getExperiments.ts
@@ -28,9 +28,9 @@ export async function getExperiments(params: {
   locale: string;
   countryCode: string;
   previewMode: boolean;
-}): Promise<ExperimentData["Features"]> {
+}): Promise<ExperimentData> {
   if (["local"].includes(process.env.APP_ENV ?? "local")) {
-    return localExperimentData["Features"];
+    return localExperimentData;
   }
 
   if (!process.env.NIMBUS_SIDECAR_URL) {
@@ -74,13 +74,10 @@ export async function getExperiments(params: {
       experimentData = json;
     }
 
-    return (
-      (experimentData as ExperimentData["Features"]) ??
-      defaultExperimentData["Features"]
-    );
+    return (experimentData as ExperimentData) ?? defaultExperimentData;
   } catch (ex) {
     logger.error("Could not connect to Cirrus", { serverUrl, ex });
     captureException(ex);
-    return defaultExperimentData["Features"];
+    return defaultExperimentData;
   }
 }
diff --git a/src/app/hooks/useGlean.ts b/src/app/hooks/useGlean.ts
index e37ba9c9cfc..cff3d6c8c0c 100644
--- a/src/app/hooks/useGlean.ts
+++ b/src/app/hooks/useGlean.ts
@@ -9,9 +9,11 @@ import EventMetricType from "@mozilla/glean/private/metrics/event";
 import type { GleanMetricMap } from "../../telemetry/generated/_map";
 import { useSession } from "next-auth/react";
 import { hasPremium } from "../functions/universal/user";
+import { useExperiments } from "../../contextProviders/experiments";
 
 export const useGlean = () => {
   const session = useSession();
+  const experimentData = useExperiments();
   const isPremiumUser = hasPremium(session.data?.user);
 
   const record = useCallback(
@@ -37,10 +39,30 @@ export const useGlean = () => {
         ? "Plus"
         : "Free";
 
+      // Record the `nimbus_*` keys on all events.
+      // `nimbus_*` is set on every metric, but it's too much work for TypeScript
+      // to infer that — hence the type assertion.
+      if (experimentData) {
+        (data as GleanMetricMap["button"]["click"]).nimbus_user_id =
+          experimentData["Enrollments"]["nimbus_user_id"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_app_id =
+          experimentData["Enrollments"]["app_id"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_experiment =
+          experimentData["Enrollments"]["experiment"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_branch =
+          experimentData["Enrollments"]["branch"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_experiment_type =
+          experimentData["Enrollments"]["experiment_type"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_is_preview =
+          experimentData["Enrollments"]["is_preview"].toString();
+      } else {
+        console.warn("No experiment data available for Glean");
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       mod[event].record(data as any);
     },
-    [isPremiumUser],
+    [isPremiumUser, experimentData],
   );
 
   return record;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 653c2b6bda7..223af998da0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -17,6 +17,10 @@ import { GoogleAnalyticsWorkaround } from "./components/client/GoogleAnalyticsWo
 import StripeScript from "./components/client/StripeScript";
 import { GleanScript } from "./components/client/GleanScript";
 import { getExperimentationId } from "./functions/server/getExperimentationId";
+import { getExperiments } from "./functions/server/getExperiments";
+import { getCountryCode } from "./functions/server/getCountryCode";
+import { ExperimentsProvider } from "../contextProviders/experiments";
+import * as Sentry from "@sentry/nextjs";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 
@@ -54,6 +58,26 @@ export default async function RootLayout({
   const nonce = headers().get("x-nonce") ?? "";
   const currentLocale = getLocale(getL10nBundles());
   const session = await getServerSession();
+  const headersList = headers();
+  const countryCode = getCountryCode(headersList);
+
+  // Check for Nimbus preview mode. Note that this requires a full page reload
+  // to activate: https://nextjs.org/docs/app/api-reference/file-conventions/layout#caveats
+  const nimbusPreviewMode = headers().get("x-nimbus-preview-mode");
+  const experimentationId = getExperimentationId(session?.user ?? null);
+  const experimentData = await getExperiments({
+    experimentationId: experimentationId,
+    countryCode: countryCode,
+    locale: currentLocale,
+    previewMode: nimbusPreviewMode === "true",
+  });
+
+  const nimbus_user_id = experimentData["Enrollments"].nimbus_user_id;
+  if (nimbus_user_id !== experimentationId) {
+    Sentry.captureMessage(
+      `Nimbus user ID from Cirrus: [${nimbus_user_id}] did not match experimentationId: [${experimentationId}]`,
+    );
+  }
 
   return (
     <html lang={currentLocale}>
@@ -64,12 +88,14 @@ export default async function RootLayout({
         data-ga4-measurement-id={CONST_GA4_MEASUREMENT_ID}
         data-node-env={process.env.NODE_ENV}
       >
-        <SessionProvider session={session}>{children}</SessionProvider>
+        <ExperimentsProvider experimentData={experimentData}>
+          <SessionProvider session={session}>{children}</SessionProvider>
+        </ExperimentsProvider>
       </body>
       <StripeScript />
       <GleanScript
         channel={process.env.APP_ENV ?? ""}
-        experimentationId={getExperimentationId(session?.user ?? null)}
+        experimentationId={experimentationId}
       />
       {headers().get("DNT") !== "1" && (
         <GoogleAnalyticsWorkaround
diff --git a/src/contextProviders/experiments.tsx b/src/contextProviders/experiments.tsx
new file mode 100644
index 00000000000..0e9e5dcd35f
--- /dev/null
+++ b/src/contextProviders/experiments.tsx
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import { ReactNode, createContext, useContext } from "react";
+import { ExperimentData } from "../telemetry/generated/nimbus/experiments";
+
+interface ExperimentsProviderProps {
+  children: ReactNode;
+  experimentData: ExperimentData;
+}
+
+export const ExperimentsContext = createContext<ExperimentData | null>(null);
+
+export const ExperimentsProvider = ({
+  children,
+  experimentData,
+}: ExperimentsProviderProps) => {
+  return (
+    <ExperimentsContext.Provider value={experimentData}>
+      {children}
+    </ExperimentsContext.Provider>
+  );
+};
+
+export const useExperiments = () => {
+  const context = useContext(ExperimentsContext);
+  return context;
+};
diff --git a/src/middleware.ts b/src/middleware.ts
index 81771ac3f9a..b713ef80b39 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -29,6 +29,14 @@ export function middleware(request: NextRequest) {
     existingExperimentationId?.value ?? `guest-${crypto.randomUUID()}`;
   requestHeaders.set("x-experimentation-id", experimentationId);
 
+  // Check for Nimbus preview mode. Note that this requires a full page reload
+  // to activate: https://nextjs.org/docs/app/api-reference/file-conventions/layout#caveats
+  const nimbusPreviewMode = request.nextUrl.searchParams.get("nimbus_preview");
+  requestHeaders.set(
+    "x-nimbus-preview-mode",
+    nimbusPreviewMode === "true" ? "true" : "false",
+  );
+
   const response = NextResponse.next({
     request: {
       headers: requestHeaders,
diff --git a/src/telemetry/metrics.yaml b/src/telemetry/metrics.yaml
index 322d759f7f4..e7755eb247d 100644
--- a/src/telemetry/metrics.yaml
+++ b/src/telemetry/metrics.yaml
@@ -56,6 +56,24 @@ page:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 dashboard:
   view:
@@ -102,6 +120,24 @@ dashboard:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 popup:
   view:
@@ -135,6 +171,24 @@ popup:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
   exit:
     type: event
@@ -167,6 +221,24 @@ popup:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 banner:
   view:
@@ -200,6 +272,24 @@ banner:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 button:
   click:
@@ -233,6 +323,24 @@ button:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 field:
   focus:
@@ -266,6 +374,24 @@ field:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 link:
   click:
@@ -299,6 +425,24 @@ link:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 upgrade_intent:
   click:
@@ -332,6 +476,24 @@ upgrade_intent:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
   success:
     type: event
@@ -362,6 +524,24 @@ upgrade_intent:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 expand:
   click:
@@ -395,6 +575,24 @@ expand:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 collapse:
   click:
@@ -428,6 +626,24 @@ collapse:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 cta_button:
   click:
@@ -461,6 +677,24 @@ cta_button:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
   view:
     type: event
@@ -493,6 +727,24 @@ cta_button:
       plan_tier:
         description: Which tier of plan the user is on [Free, Plus]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
 
 csat_survey:
   view:
@@ -526,6 +778,25 @@ csat_survey:
       automated_removal_period:
         description: The time period since the first automated removal for the user. [initial, 3-months, 6-months, 12-months]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
+
   dismiss:
     type: event
     description: |
@@ -557,6 +828,25 @@ csat_survey:
       automated_removal_period:
         description: The time period since the first automated removal for the user. [initial, 3-months, 6-months, 12-months]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string
+
   click:
     type: event
     description: |
@@ -591,3 +881,21 @@ csat_survey:
       automated_removal_period:
         description: The time period since the first automated removal for the user. [initial, 3-months, 6-months, 12-months]
         type: string
+      nimbus_user_id:
+        description: Nimbus user ID
+        type: string
+      nimbus_app_id:
+        description: Nimbus application ID
+        type: string
+      nimbus_experiment:
+        description: Nimbus experiment name
+        type: string
+      nimbus_branch:
+        description: Nimbus branch
+        type: string
+      nimbus_experiment_type:
+        description: Nimbus experiment type
+        type: string
+      nimbus_is_preview:
+        description: Nimbus preview mode enabled
+        type: string

From ee7eba44069b3f04ccc88596b43d20e79396b82e Mon Sep 17 00:00:00 2001
From: mozilla-pontoon <mozilla-pontoon@users.noreply.github.com>
Date: Thu, 9 Jan 2025 12:01:39 +0000
Subject: [PATCH 7/9] Import translations from l10n repository (2025-01-09)

---
 locales/da/fix.ftl              |  2 +-
 locales/da/settings.ftl         |  4 ++
 locales/el/add-email.ftl        |  7 +--
 locales/el/settings.ftl         | 12 ++---
 locales/es-AR/email-strings.ftl |  4 +-
 locales/es-MX/add-email.ftl     | 12 ++++-
 locales/es-MX/app.ftl           | 40 +++++++++++++---
 locales/es-MX/bento.ftl         |  2 +
 locales/es-MX/breaches.ftl      | 40 +++++++++++++---
 locales/es-MX/dashboard.ftl     | 48 +++++++++++++++++++
 locales/es-MX/data-classes.ftl  | 11 +++--
 locales/es-MX/email-strings.ftl | 83 ++++++++++++++-------------------
 locales/es-MX/exposure-card.ftl | 15 ++++++
 locales/es-MX/fix.ftl           | 29 ++++++++++++
 locales/nn-NO/email-strings.ftl |  1 +
 15 files changed, 230 insertions(+), 80 deletions(-)

diff --git a/locales/da/fix.ftl b/locales/da/fix.ftl
index f6c594397c2..143ad8899b5 100644
--- a/locales/da/fix.ftl
+++ b/locales/da/fix.ftl
@@ -5,9 +5,9 @@
 fix-flow-nav-high-risk-data-breaches = Datalæk med høj risiko
 fix-flow-nav-leaked-passwords = Lækkede adgangskoder
 fix-flow-nav-security-recommendations = Sikkerhedsanbefalinger
-
 guided-resolution-flow-exit = Tilbage til oversigten
 guided-resolution-flow-next-arrow = Gå til næste trin
+guided-resolution-flow-next-arrow-sub-step = Gå til næste resultat
 guided-resolution-flow-step-navigation-label = Trin i vejledningen
 
 # Celebration screens
diff --git a/locales/da/settings.ftl b/locales/da/settings.ftl
index 83618f2602f..b345fcbd9db 100644
--- a/locales/da/settings.ftl
+++ b/locales/da/settings.ftl
@@ -65,5 +65,9 @@ settings-alert-preferences-allow-monthly-monitor-report-subtitle = En månedlig
 ## Settings page redesign
 
 settings-tab-label-edit-info = Rediger dine oplysninger
+settings-tab-label-notifications = Indstil notifikationer
 settings-tab-label-manage-account = Håndter konto
 settings-tab-subtitle-manage-account = Håndter din { -product-name }-konto.
+settings-tab-notifications-marketing-title = Markedsføring
+settings-tab-notifications-marketing-text = Periodiske opdateringer om { -brand-monitor }, { -brand-mozilla } og vores andre sikkerhedsprodukter.
+settings-tab-notifications-marketing-link-label = Gå til indstillinger for mails fra { -brand-mozilla }
diff --git a/locales/el/add-email.ftl b/locales/el/add-email.ftl
index 6ebdeeb845c..97f38fe159b 100644
--- a/locales/el/add-email.ftl
+++ b/locales/el/add-email.ftl
@@ -6,17 +6,14 @@
 ### Dialog window that allows a user to add a new email address to be monitored
 
 add-email-add-another-heading = Προσθήκη άλλης διεύθυνσης email
-
 # $total is the number of emails a user is allowed to add
 add-email-your-account-includes =
     { $total ->
-        [one] Ο λογαριασμός σας περιλαμβάνει την εποπτεία { $total } διεύθυνσης email. Προσθέστε μια νέα διεύθυνση email για να δείτε εάν έχει εμπλακεί σε κάποια παραβίαση.
-       *[other] Ο λογαριασμός σας περιλαμβάνει την εποπτεία έως και { $total } διευθύνσεων email. Προσθέστε μια νέα διεύθυνση email για να δείτε εάν έχει εμπλακεί σε κάποια παραβίαση.
+        [one] Ο λογαριασμός σας παρέχει εποπτεία για { $total } διεύθυνση email. Προσθέστε μια νέα διεύθυνση email για να διαπιστώσετε εάν έχει εμπλακεί σε κάποια παραβίαση.
+       *[other] Ο λογαριασμός σας παρέχει εποπτεία για έως και { $total } διευθύνσεις email. Προσθέστε μια νέα διεύθυνση email για να διαπιστώσετε εάν έχει εμπλακεί σε κάποια παραβίαση.
     }
-
 add-email-address-input-label = Διεύθυνση email
 add-email-send-verification-button = Αποστολή συνδέσμου επαλήθευσης
-
 # $email is the newly added email address. $settings-href is the URL for the Settings page. HTML tags should not be translated, e.g. `<a>`
 # This string will be deprecated when the new Plus plan is live.
 add-email-verify-the-link = Επαληθεύστε τον σύνδεσμο που έχει αποσταλεί στο { $email } για να το προσθέσετε στο { -brand-fx-monitor }. Διαχειριστείτε όλες τις διευθύνσεις email στις <a { $settings-href }>Ρυθμίσεις</a>.
diff --git a/locales/el/settings.ftl b/locales/el/settings.ftl
index 44c58c3a7b2..2d840cbe632 100644
--- a/locales/el/settings.ftl
+++ b/locales/el/settings.ftl
@@ -12,21 +12,21 @@ settings-page-title = Ρυθμίσεις { -product-short-name }
 settings-alert-email-preferences-title = Προτιμήσεις email
 settings-alert-email-preferences-subtitle = Πείτε μας ποια email θέλετε να λαμβάνετε.
 settings-alert-preferences-allow-breach-alerts-title = Άμεσες ειδοποιήσεις παραβιάσεων
-settings-alert-preferences-allow-breach-alerts-subtitle = Αυτές οι ειδοποιήσεις αποστέλλονται αμέσως μόλις ανιχνευθεί παραβίαση δεδομένων
-settings-alert-preferences-option-one = Αποστολή ειδοποιήσεων παραβίασης στην επηρεασμένη διεύθυνση email
+settings-alert-preferences-allow-breach-alerts-subtitle = Αποστέλλονται αμέσως μόλις ανιχνευθεί παραβίαση δεδομένων
+settings-alert-preferences-option-one = Αποστολή ειδοποιήσεων παραβιάσεων στην επηρεασμένη διεύθυνση email
 settings-alert-preferences-option-two = Αποστολή όλων των ειδοποιήσεων παραβιάσεων στην κύρια διεύθυνση email
 
 ## Monitored email addresses
 
 # Variables:
 #   $email (string) - Email address
-settings-email-list-title = Διευθύνσεις email σε εποπτεία
+settings-email-list-title = Διευθύνσεις email υπό εποπτεία
 # Variables:
 #   $limit (number) - Number of email addresses included in the plan
 settings-email-limit-info =
     { $limit ->
-        [one] Ο λογαριασμός σας περιλαμβάνει εποπτεία έως και { $limit } email.
-       *[other] Ο λογαριασμός σας περιλαμβάνει εποπτεία έως και { $limit } email.
+        [one] Ο λογαριασμός σας παρέχει εποπτεία για έως και { $limit } διεύθυνση email.
+       *[other] Ο λογαριασμός σας παρέχει εποπτεία για έως και { $limit } διευθύνσεις email.
     }
 settings-email-verification-callout = Απαιτείται επαλήθευση email
 settings-resend-email-verification-link = Εκ νέου αποστολή email επαλήθευσης
@@ -64,7 +64,7 @@ settings-alert-preferences-allow-monthly-monitor-report-subtitle = Μια μην
 
 ## Settings page redesign
 
-settings-tab-label-edit-info = Επεξεργαστείτε τις πληροφορίες σας
+settings-tab-label-edit-info = Επεξεργασία πληροφοριών
 settings-tab-label-notifications = Ορισμός ειδοποιήσεων
 settings-tab-label-manage-account = Διαχείριση λογαριασμού
 settings-tab-subtitle-manage-account = Διαχειριστείτε τον λογαριασμό { -product-name } σας.
diff --git a/locales/es-AR/email-strings.ftl b/locales/es-AR/email-strings.ftl
index 96e0d513c5b..38dd3712a4b 100644
--- a/locales/es-AR/email-strings.ftl
+++ b/locales/es-AR/email-strings.ftl
@@ -36,8 +36,8 @@ email-subject-no-breaches = { -product-name } no encontró filtraciones conocida
 # Subject line of email
 email-subject-verify = Verificá tu correo electrónico para { -product-name }
 fxm-warns-you-no-breaches =
-    { -product-name } te advierte sobre filtraciones de datos relacionadas con tu información personal.
-    Hasta el momento, no se encontraron infracciones. Te enviaremos un alerta si tu dirección de correo electrónico aparece en una nueva filtración.
+    { -product-name } te advierte sobre filtraciones de datos involucrados con tu información personal.
+    Hasta ahora, no se encontraron infracciones. Te enviaremos una alerta si tu dirección de correo electrónico aparece en una nueva filtración.
 email-breach-alert-blurb =
     { -product-name } te advierte sobre filtraciones de datos relacionadas con tu información personal.
     Recién recibimos detalles sobre la filtración de datos de otra empresa.
diff --git a/locales/es-MX/add-email.ftl b/locales/es-MX/add-email.ftl
index 6d601938ccf..fca98be1d4c 100644
--- a/locales/es-MX/add-email.ftl
+++ b/locales/es-MX/add-email.ftl
@@ -6,9 +6,17 @@
 ### Dialog window that allows a user to add a new email address to be monitored
 
 add-email-add-another-heading = Agregar otra dirección de correo electrónico
-
+# $total is the number of emails a user is allowed to add
+add-email-your-account-includes =
+    { $total ->
+        [one] Tu cuenta incluye el seguimiento de { $total } dirección de correo electrónico. Agrega una nueva dirección de correo electrónico para ver si ha estado involucrada en una filtración.
+       *[other] Tu cuenta incluye el seguimiento de hasta { $total } direcciones de correo electrónico. Agrega una nueva dirección de correo electrónico para ver si ha estado involucrada en una filtración.
+    }
 add-email-address-input-label = Dirección de correo electrónico
 add-email-send-verification-button = Enviar enlace de verificación
-
 # $email is the newly added email address. $settings-href is the URL for the Settings page. HTML tags should not be translated, e.g. `<a>`
+# This string will be deprecated when the new Plus plan is live.
 add-email-verify-the-link = Verifica el enlace enviado a { $email } para agregarlo a { -brand-fx-monitor }. Administra todas las direcciones de correo electrónico en <a { $settings-href }>Ajustes</a>.
+# Variables:
+#   $email (string) - An email address submitted by the user for monitoring, e.g. `example@example.com`
+add-email-verify-the-link-2 = Verifica el enlace enviado a <b>{ $email }</b> para agregarlo a { -brand-mozilla-monitor }.
diff --git a/locales/es-MX/app.ftl b/locales/es-MX/app.ftl
index 7f7b1057417..aad4e8c0f6b 100644
--- a/locales/es-MX/app.ftl
+++ b/locales/es-MX/app.ftl
@@ -31,16 +31,16 @@
 
 ##
 
-error-could-not-add-email = No se pudo agregar la dirección de correo electrónico a la base de datos.
 error-not-subscribed = Esta dirección de correo electrónico no está suscrita a { -product-name }.
 error-hibp-throttled = Demasiadas conexiones para { -brand-HIBP }.
 error-hibp-connect = Error conectándose a { -brand-HIBP }.
 user-add-invalid-email = Correo electrónico inválido
 user-add-too-many-emails = Estás monitoreando el número máximo de direcciones de correo.
 user-add-duplicate-email = Este correo ya se ha añadido a { -product-name }.
+user-add-verification-email-just-sent = No se puede enviar otro correo electrónico de verificación tan rápido. Por favor, inténtalo de nuevo más tarde.
+user-add-unknown-error = Algo salió mal al agregar otra dirección de correo electrónico. Por favor, inténtalo de nuevo más tarde.
+user-delete-unknown-error = Algo salió mal al eliminar una dirección de correo electrónico. Por favor, inténtalo de nuevo más tarde.
 user-verify-token-error = Se requiere el token de verificación.
-user-unsubscribe-token-error = Eliminar suscripción quiere un token.
-user-unsubscribe-token-email-error = Eliminar suscripción requiere un token y con correo electrónico.
 # compromised-data = the kind of user data exposed to hackers in data breach.
 compromised-data = Datos comprometidos:
 # Breach data provided by Have I Been Pwned.
@@ -52,8 +52,6 @@ sign-out = Salir de la sesión
 # Manage Firefox Account, link to page where account holders can change their account settings.
 manage-fxa = Administrar { -brand-fxa }
 # Link title
-frequently-asked-questions = Preguntas frecuentemente hechas
-# Link title
 preferences = Preferencias
 # Link title
 home = Inicio
@@ -144,9 +142,14 @@ new-breach = Nueva
 
 ##
 
+# “account” can be localized, “Mozilla” must be treated as a brand,
+# and kept in English.
+-brand-mozilla-account = Cuenta de Mozilla
+open-in-new-tab-alt = Abrir enlace en una nueva pestaña
 
 ## Search Engine Optimization
 
+meta-desc-2 = Descubre con { -brand-fx-monitor } si te ha afectado una filtración de datos. Te ayudaremos a comprender qué hacer a continuación y vigilaremos continuamente cualquier nueva filtración.
 
 ## Header
 
@@ -158,20 +161,38 @@ brand-mozilla-monitor = { -brand-fx-monitor }
 ## Site navigation
 
 mobile-menu-label = Menú principal
+main-nav-button-collapse-label = Contraer menú
+main-nav-button-collapse-tooltip = Contraer menú
+main-nav-button-expand-label = Expandir menú
+main-nav-button-expand-tooltip = Expandir menú
+main-nav-label = Navegación
+main-nav-link-home-label = Inicio
+main-nav-link-dashboard-label = Panel de control
 main-nav-link-settings-label = Ajustes
 main-nav-link-faq-label = Preguntas frecuentes
+main-nav-link-faq-tooltip = Preguntas frecuentes
 
 ## User menu
 
+user-menu-trigger-label = Abrir menú de usuario
 user-menu-trigger-tooltip = Perfil
 user-menu-manage-fxa-label = Administra tu { -brand-mozilla-account }
 user-menu-settings-label = Ajustes
+user-menu-settings-tooltip = Configurar { -brand-mozilla-monitor }
+user-menu-help-label = Ayuda y soporte
+user-menu-help-tooltip = Obtén ayuda para usar { -brand-mozilla-monitor }
+user-menu-signout-label = Cerrar sesión
+user-menu-signout-tooltip = Cerrar sesión en { -brand-mozilla-monitor }
 
 ## Footer
 
 mozilla = { -brand-mozilla }
+terms-of-service = Términos de servicio
+privacy-notice = Política de privacidad
 github = { -brand-github }
-footer-nav-all-breaches = Todas las filtraciones
+footer-nav-recent-breaches = Filtraciones de datos recientes
+footer-external-link-faq-label = FAQs
+footer-external-link-faq-tooltip = Preguntas frecuentes
 
 ## Error page
 
@@ -186,7 +207,8 @@ error-page-error-other-title = { $errorCode } Algo salió mal
 
 ## Breach overview page
 
-all-breaches-headline-2 = Todas las filtraciones detectadas por { -brand-fx-monitor }
+all-breaches-headline-3 = Base de datos de filtraciones de datos
+all-breaches-lead = Supervisamos todas las filtraciones de datos conocidas para averiguar si tu información personal se vio comprometida. Aquí hay una lista completa de todas las filtraciones que se han notificado desde 2007.
 search-breaches = Buscar filtraciones
 # the kind of user data exposed to hackers in data breach.
 exposed-data = Datos expuestos:
@@ -194,8 +216,12 @@ exposed-data = Datos expuestos:
 ## Public breach detail page
 
 find-out-if-2 = Averigua si has estado involucrado en esta filtración
+find-out-if-description = Te ayudaremos a ver rápidamente si tu dirección de correo electrónico quedó expuesta en esta infracción y a comprender qué hacer a continuación.
 breach-detail-cta-signup = Consulta las filtraciones
 
 ## Firefox Monitor -> Mozilla Monitor rebrand banner
 
+banner-monitor-rebrand-text = <b>{ -brand-mozilla-monitor }</b>: nuevo nombre, apariencia e incluso más formas de <b>recuperar tu privacidad</b>.
+banner-monitor-rebrand-dismiss-button-label = Aceptar
+banner-monitor-rebrand-dismiss-button-tooltip = Descartar
 loading-accessibility = Cargando
diff --git a/locales/es-MX/bento.ftl b/locales/es-MX/bento.ftl
index 638fa280999..736c5abb066 100644
--- a/locales/es-MX/bento.ftl
+++ b/locales/es-MX/bento.ftl
@@ -2,10 +2,12 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+toolbar-app-picker-trigger-title = Aplicaciones y servicios de { -brand-mozilla }
 toolbar-app-picker-product-vpn = { -brand-mozilla-vpn }
 toolbar-app-picker-product-relay = { -brand-relay }
 toolbar-app-picker-product-pocket = { -brand-pocket }
 toolbar-app-picker-product-fx-desktop = { -brand-firefox } para escritorio
 toolbar-app-picker-product-fx-mobile = { -brand-firefox } para dispositivos móviles
+toolbar-app-picker-by-mozilla = Hecho por { -brand-mozilla }
 # Bento headline
 fx-makes-tech = { -brand-name } es tecnología que lucha por tu privacidad en línea.
diff --git a/locales/es-MX/breaches.ftl b/locales/es-MX/breaches.ftl
index d55f5d70ebc..1b4002631d1 100644
--- a/locales/es-MX/breaches.ftl
+++ b/locales/es-MX/breaches.ftl
@@ -2,12 +2,16 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-
-## Breaches header
-
-## Breaches resolved filter
-
-## Breaches table
+breach-all-meta-page-title = Base de datos de filtraciones — { -brand-fx-monitor }
+breach-all-meta-social-title = Todas las infracciones detectadas por { -brand-fx-monitor }
+breach-all-meta-social-description = Explora la lista completa de filtraciones conocidas detectadas por { -brand-fx-monitor }, luego revisa si tu información estuvo expuesta.
+# Variables:
+#   $company (String) - Name of the company that was breached, e.g. "PHP Freaks"
+breach-detail-meta-page-title = Filtración de datos de { $company } – { -brand-fx-monitor }
+# Variables:
+#   $company (String) - Name of the company that was breached, e.g. "PHP Freaks"
+breach-detail-meta-social-title = ¿Te afectó la filtración de datos de { $company }?
+breach-detail-meta-social-description = Usa { -brand-fx-monitor } para averiguar si tu información personal fue expuesta en esta filtración y saber qué hacer a continuación.
 
 ## Links that we might refer to when prompting the user to make changes after a breach
 
@@ -17,18 +21,42 @@ breach-checklist-link-mozilla-vpn = { -brand-mozilla-vpn }
 
 ## Prompts the user for changes when there is a breach detected of password
 
+breach-checklist-pw-header-text = Actualiza tus contraseñas y habilita la autenticación de dos factores (2FA).
+# The `breached-company-link` tags will be replaced with link tags or stripped if no link is available.
+# Variables:
+#   $passwordManagerLink (string) - a link to the password manager documentation, with { -breach-checklist-link-password-manager } as the label
+breach-checklist-pw-body-text = En la mayoría de los casos, te recomendamos que cambies tu contraseña en el sitio web de la empresa. Pero <b>su sitio web puede estar inactivo o contener contenido malicioso</b>, así que ten cuidado si <breached-company-link>visitas el sitio</breached-company-link>. Para mayor protección, asegúrate de usar una contraseña única y diferenciada para cada cuenta, de modo que las contraseñas filtradas no puedan usarse para acceder a otras cuentas. { $passwordManagerLink } puede ayudarte a realizar un seguimiento seguro de todas tus contraseñas.
 
 ## Prompts the user for changes when there is a breach detected of email
 
+# Variables:
+#   $firefoxRelayLink (string) - a link to Firefox Relay, with { -breach-checklist-link-firefox-relay } as the label
+breach-checklist-email-header-2 = Protege tu correo electrónico con un servicio de enmascaramiento de correo electrónico como { $firefoxRelayLink }.
+breach-checklist-email-body = Esto puede ocultar tu verdadera dirección de correo electrónico mientras reenvía correos electrónicos a tu bandeja de entrada real.
 
 ## Prompts the user for changes when there is a breach detected of social security number
 
+# Credit reports list your bill payment history, loans, current debt, and other financial information.
+# They show where you work and live and whether you've been sued, arrested, or filed for bankruptcy.
+breach-checklist-ssn-header = Revisa tu informe de crédito en busca de cuentas, préstamos o tarjetas de crédito que no reconozcas.
+# A security freeze prevents prospective creditors from accessing your credit file.
+# Creditors typically won't offer you credit if they can't access your credit reporting file,
+# so a security freeze, also called a credit freeze, prevents you or others from opening accounts in your name.
+# This will only be shown to users in the US.
+# Variables:
+#   $equifaxLink (string) - a link to the Equifax website
+#   $experianLink (string) - a link to the Experian website
+#   $transUnionLink (string) - a link to the TransUnion website
+breach-checklist-ssn-body-2 = También puedes considerar congelar tu crédito en { $equifaxLink }, { $experianLink } y { $transUnionLink } para evitar que los estafadores abran nuevas cuentas a tu nombre. Es gratis y no afectará tu puntuación crediticia.
 
 ## Prompts the user for changes when there is a breach detected of credit card
 
+breach-checklist-cc-header = Informa esta filtración al emisor de tu tarjeta de crédito y solicita una nueva tarjeta con un nuevo número.
+breach-checklist-cc-body = También deberías revisar los extractos de cuenta de tu tarjeta de crédito en busca de cargos no reconocidos.
 
 ## Prompts the user for changes when there is a breach detected of bank account
 
+breach-checklist-bank-header = Notifica inmediatamente a tu banco de que tu número de cuenta se ha visto comprometido.
 
 ## Prompts the user for changes when there is a breach detected of pin
 
diff --git a/locales/es-MX/dashboard.ftl b/locales/es-MX/dashboard.ftl
index 0d046185b1c..8b90d2cf4c3 100644
--- a/locales/es-MX/dashboard.ftl
+++ b/locales/es-MX/dashboard.ftl
@@ -9,16 +9,64 @@ exposure-chart-legend-heading-nr = Número
 # Variables:
 #   $nr (number) - Number of a particular type of exposure found for the user
 exposure-chart-legend-value-nr = { $nr }×
+modal-cta-ok = Aceptar
+modal-cta-got-it = Entendido
 # This is the label on a button that opens a popover menu, which shows a menu to adjust filters for the listed exposures.
 dashboard-exposures-filter = Filtro
 dashboard-exposures-filter-company = Compañía
 dashboard-exposures-filter-date-found-last-seven-days = Últimos 7 días
 dashboard-exposures-filter-date-found-last-thirty-days = Últimos 30 días
+dashboard-exposures-filter-date-found-last-year = El año pasado
 dashboard-exposures-filter-status = Estado
 popover-open-filter-settings-alt = Seleccionar filtros
+dashboard-exposures-filter-show-all = Mostrar todo
+dashboard-exposures-filter-show-results = Mostrar resultados
 
 ## Top banner on the dashboard
 
+dashboard-top-banner-your-data-is-protected-title = Tus datos están protegidos
+dashboard-top-banner-lets-keep-protecting-title = Sigamos protegiendo tus datos
+# Variables:
+# $exposures_unresolved_num is the remaining number of exposures the user has to resolve.
+dashboard-top-banner-lets-keep-protecting-description =
+    { $exposures_unresolved_num ->
+        [one] Todavía te queda { $exposures_unresolved_num } exposición por corregir. Sigue adelante y protégete. Te guiaremos paso a paso.
+       *[other] Todavía te quedan { $exposures_unresolved_num } exposiciones por corregir. Sigue adelante y protégete. Te guiaremos paso a paso.
+    }
+dashboard-top-banner-lets-keep-protecting-cta = Sigamos adelante
+dashboard-top-banner-protect-your-data-title = Protejamos tus datos
+dashboard-top-banner-protect-your-data-cta = Vamos a corregirlo
+# Note: this line is followed by `dashboard-top-banner-non-us-protect-your-data-description-line1`.
+# Variables:
+#   $exposures_unresolved_num (number) - the total number of exposures the user has.
+dashboard-top-banner-non-us-protect-your-data-description-line1 =
+    { $exposures_unresolved_num ->
+        [one] Encontramos { $exposures_unresolved_num } exposición de sus datos.
+       *[other] Encontramos { $exposures_unresolved_num } exposiciones de sus datos.
+    }
+# Note: this line is preceded by `dashboard-top-banner-non-us-protect-your-data-description-line1`.
+# Variables:
+#   $data_breach_unresolved_num (number) - the total number of data breaches the user has.
+dashboard-top-banner-non-us-protect-your-data-description-line2 =
+    { $data_breach_unresolved_num ->
+        [one] Apareció en la filtración de datos { $data_breach_unresolved_num }. Le guiaremos paso a paso sobre cómo solucionarlo.
+       *[other] Apareció en { $data_breach_unresolved_num } filtraciones de datos. Le guiaremos paso a paso sobre cómo solucionarlo.
+    }
+dashboard-top-banner-no-exposures-found-title = No se han encontrado exposiciones
+dashboard-top-banner-non-us-no-exposures-found-description = ¡Buenas noticias! Buscamos todas las filtraciones de datos conocidas y no encontramos exposiciones. Seguiremos monitorizando tu dirección de correo electrónico y te avisaremos si ocurre una nueva filtración.
+dashboard-no-exposures-label = No se han encontrado exposiciones
+# Variables:
+# $exposures_resolved_num is the number of exposures the user has resolved.
+dashboard-top-banner-non-us-your-data-is-protected-description =
+    { $exposures_resolved_num ->
+        [one] ¡Excelente trabajo, la exposición de tus datos está arreglada! Seguiremos monitoreando y te alertaremos sobre cualquier nueva exposición.
+       *[other] ¡Excelente trabajo, todas las exposiciones de { $exposures_resolved_num } de tus datos están arregladas! Seguiremos monitoreando y te alertaremos sobre cualquier nueva exposición.
+    }
+dashboard-top-banner-monitor-more-cta = Monitorear más correos electrónicos
 
 # About Exposure Indicators Modal
 
+modal-exposure-status-description-all = Buscamos exposiciones en todas las filtraciones de datos conocidas. Tus exposiciones tendrán uno de los siguientes estados:
+modal-exposure-indicator-title = Estados de exposición
+modal-exposure-indicator-action-needed = Se necesita una acción avanzada o manual para completar una acción.
+modal-exposure-indicator-fixed = La exposición ha sido resuelta y no tienes que tomar ninguna medida.
diff --git a/locales/es-MX/data-classes.ftl b/locales/es-MX/data-classes.ftl
index 2977d79adea..8aa5328f030 100644
--- a/locales/es-MX/data-classes.ftl
+++ b/locales/es-MX/data-classes.ftl
@@ -2,6 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+
 # Breach Data Classes
 
 account-balances = Saldos de cuentas
@@ -18,7 +19,7 @@ avatars = Avatares
 bank-account-numbers = Números de cuentas de banco
 beauty-ratings = Puntajes de belleza
 biometric-data = Datos biométricos
-# This string is the shortened version of "Biographies", and 
+# This string is the shortened version of "Biographies", and
 # refers to biographical data about a user.
 bios = Bios
 browser-user-agent-details = Detalles del agente de usuario del navegador
@@ -29,6 +30,8 @@ career-levels = Niveles de profesión
 cellular-network-names = Nombres de redes celulares
 charitable-donations = Donaciones para caridad
 chat-logs = Registros de chat
+citizenship-statuses = Estados de ciudadanía
+clothing-sizes = Tallas de ropa
 credit-card-cvv = CVV de tarjetas de crédito
 credit-cards = Tarjetas de crédito
 credit-status-information = Información del estado de crédito
@@ -38,7 +41,7 @@ customer-interactions = Interaciones del cliente
 dates-of-birth = Fechas de nacimiento
 deceased-date = Fecha de fallecimiento
 deceased-statuses = Estado de fallecimiento
-# Instructions that you can set up in online shopping services to get your orders 
+# Instructions that you can set up in online shopping services to get your orders
 # delivered (e.g. deliver to a specific neighbor, entrance location, etc.).
 delivery-instructions = Instrucciones de entrega
 device-information = Información del dispositivo
@@ -78,12 +81,13 @@ instant-messenger-identities = Identidades de mensajería instantánea
 ip-addresses = Direcciones IP
 job-applications = Solicitudes de empleo
 job-titles = Puestos de trabajo
-# This string refers to vehicle license plates. 
+# This string refers to vehicle license plates.
 licence-plates = Matrículas
 living-costs = Costes de vida
 # This string refers to financial loans.
 loan-information = Información del préstamos
 login-histories = Historiales de inicio de sesión
+loyalty-program-details = Detalles del programa de lealtad
 mac-addresses = Direcciones MAC
 marital-statuses = Estados civiles
 # Mnemonic phrases are a group of words used to access the content of cryptocurrency wallets.
@@ -144,6 +148,7 @@ spouses-names = Nombres de los cónyuges
 support-tickets = Peticiones de apoyo
 survey-results = Resultados de encuestas
 taxation-records = Registros tributarios
+telecommunications-carrier = Operadores de telecomunicaciones
 time-zones = Zonas horarias
 travel-habits = Hábitos de viaje
 user-statuses = Estados de usuario
diff --git a/locales/es-MX/email-strings.ftl b/locales/es-MX/email-strings.ftl
index 5b8ba10d347..4999e6288ac 100644
--- a/locales/es-MX/email-strings.ftl
+++ b/locales/es-MX/email-strings.ftl
@@ -2,52 +2,42 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-# Firefox Monitor is a product name and should not be translated.
--product-name = Firefox Monitor
-# Firefox is a brand name and should not be translated.
--brand-name = Firefox
 
+## Email headers
+
+email-header-logo-alt = { -brand-mozilla-monitor }
+email-header-button-sign-in = Iniciar sesión
+
+## Email footers
+
+email-footer-support-heading = ¿Tienes preguntas sobre { -brand-mozilla-monitor }?
+email-footer-support-content = Visita nuestro <support-link>Centro de asistencia</support-link> para obtener ayuda
+email-footer-trigger-transactional = Estás recibiendo este correo electrónico por tener una suscripción a { -brand-mozilla-monitor }.
+email-footer-source-hibp = Datos de filtración proporcionados por <hibp-link>{ -brand-HIBP }</hibp-link>
+email-footer-logo-mozilla-alt = { -brand-mozilla }
+email-footer-meta-privacy-notice = Privacidad
 # Firefox Relay is a product name and should not be translated.
 -product-name-relay = Firefox Relay
 # Mozilla VPN is a product name and should not be translated.
 -product-name-vpn = Mozilla VPN
-
 # A link to legal information about mozilla products.
 legal = Legal
-
-# Unsubscribe link in email.
-email-unsub-link = Eliminar suscripción
-
-# This string appears in the footer of breach report and breach alert emails.
-# { $unsubLink } is a link to the user's dashboard where they can unsubscribe from Monitor
-# and uses the text from { email-unsub-link }. { $faqLink } is a link to the 
-# Firefox Monitor SUMO page and uses the text from { frequently-asked-questions }.
-email-footer-blurb = Estás recibiendo este correo porque estás suscrito para recibir alertas de { -product-name }. ¿Ya no deseas estos correos? { $unsubLink }. Este es un correo automático. Para ayuda, visita { $faqLink }
-
 # Button text
 verify-email-cta = Verificar correo
-
 # Headline of verification email
 email-link-expires = Este enlace expira en 24 horas
 
-## Variables:
-##   $userEmail (string) - User email address
-
 ##
 
 # Subject line of email
 email-subject-found-breaches = { -product-name } encontró tu información en estas filtraciones
-
 # Subject line of email
 email-subject-no-breaches = { -product-name } se encontraron filtraciones conocidas
-
 # Subject line of email
 email-subject-verify = Verifica tu correo para { -product-name }
-
 fxm-warns-you-no-breaches =
     { -product-name } te advierte sobre las filtraciones de datos que afectan a tu información personal.
     Por ahora no se ha encontrado ninguna. Te enviaremos una alerta si tu dirección de correo aparece en una nueva filtración.
-
 email-breach-alert-blurb =
     { -product-name } te advierte sobre las filtraciones de datos que afectan a tu información personal.
     Acabamos de recibir información sobre la filtración de datos de otra empresa.
@@ -55,29 +45,10 @@ email-breach-alert-blurb =
 ## 2022 email template. HTML tags should not be translated, e.g. `<a>`
 
 # Have I Been Pwned attribution
+# Variables:
+#   $hibp-link-attr (String) - Link to Have I Been Pwned
 email-2022-hibp-attribution = Filtración de datos proporcionada por <a { $hibp-link-attr }>{ -brand-HIBP }</a>
 
-## Monthly email for unresolved breaches. HTML tags should not be translated, e.g. `<br>`
-
-## Monthly email for unresolved breaches. HTML tags should not be translated, e.g. `<br>`
-## Variables:
-##   $email-address (string) - Email address
-
-email-unresolved-heading = Tienes filtraciones de correo sin resolver
-email-unresolved-subhead = Tu correo ha quedado expuesto. <br>Soluciónalo ahora mismo { -product-name }.
-email-is-affected = Tu correo, { $email-address }, se vio afectado por al menos una filtración de datos
-email-more-detail = Inicia sesión en { -product-name } ahora para ver más detalles sobre tus filtraciones de correo (incluido cuando ocurrieron y que datos se expusieron) y conoce que debes hacer cuando tu correo ha sido expuesto en una filtración de datos.
-email-breach-status = Estado de la filtración actual
-# table row 1 label
-email-monitored = Total de correos monitoreados:
-# table row 2 label
-email-breach-total = Número total de filtraciones:
-# table row 3 label
-email-resolved = Filtraciones resueltas:
-# table row 4 label
-email-unresolved = Filtraciones sin resolver:
-email-resolve-cta = Resolver filtraciones:
-
 ## Verification email
 
 email-verify-heading = Protege tus datos, comenzando ahora mismo
@@ -86,14 +57,30 @@ email-verify-simply-click = Simplemente haz clic en el siguiente enlace para ter
 
 ## Breach report
 
-## Breach report
-## Variables:
-##   $email-address (string) - Email address
-
 email-breach-summary = Aquí está el resumen de tu filtración de datos
+# Variables:
+#   $email-address (string) - Email address, bolded
 email-breach-detected = Los resultados de búsqueda de tu cuenta { $email-address } han detectado que tu correo electrónico puede haber sido expuesto. Te recomendamos que actúes ahora para resolver esta violación.
+# Deprecated after the redesigned breach alert email is launched
+# Variables:
+#   $email-address (string) - Email address
+email-breach-detected-2 = Los resultados de búsqueda de tu cuenta <b>{ $email-address }</b> han detectado que tu correo electrónico puede haber sido expuesto. Te recomendamos que actúes ahora para resolver esta filtración.
 email-dashboard-cta = Ir al panel de control
 
 ## Breach alert
 
+# Deprecated after the redesigned breach alert email is launched
 email-spotted-new-breach = Hemos detectado una nueva filtración de datos
+
+## Redesigned breach alert email
+
+email-breach-alert-all-subject = Nueva filtración de datos detectada
+email-breach-alert-all-preview = Te guiaremos paso a paso para resolverlo.
+email-breach-alert-all-hero-heading = Tus datos han sido filtrados recientemente
+email-breach-alert-all-hero-subheading = No te preocupes, podemos ayudarte con esta filtración
+email-breach-alert-all-lead = { -brand-mozilla-monitor } descubrió la siguiente filtración de datos que incluye tu información personal:
+email-breach-alert-all-source-title = Fuente de la filtración:
+email-breach-alert-all-data-points-title = Datos expuestos:
+email-breach-alert-all-next-steps-lead = Te guiaremos paso a paso sobre cómo resolver esta filtración de datos.
+email-breach-alert-all-next-steps-cta-label = Comencemos
+email-breach-alert-all-next-steps-button-dashboard = Ir al panel de control
diff --git a/locales/es-MX/exposure-card.ftl b/locales/es-MX/exposure-card.ftl
index 4f40a532852..bba76244c25 100644
--- a/locales/es-MX/exposure-card.ftl
+++ b/locales/es-MX/exposure-card.ftl
@@ -2,12 +2,27 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+chevron-alt = Detalles de la exposición
+exposure-card-exposure-type = Tipo de exposición
+exposure-card-date-found = Fecha de la exposición
 
 # Status Pill
 
+status-pill-action-needed = Acción necesaria
+status-pill-progress = En progreso
+status-pill-fixed = Corregida
 
 # Exposure Card
 
+exposure-card-family-members = Miembros de la familia
+exposure-card-email = Correo electrónico
+exposure-card-phone-number = Número de teléfono
+exposure-card-address = Dirección
+exposure-card-credit-card = Tarjeta de crédito
+exposure-card-password = Contraseña
+exposure-card-ip-address = Dirección IP
+exposure-card-other = Otros
+exposure-card-label-company = Empresa
 # Status of the exposure card, could be In Progress, Fixed or Action Needed
 exposure-card-label-status = Estado
 # Variables:
diff --git a/locales/es-MX/fix.ftl b/locales/es-MX/fix.ftl
index 0389c610db9..7609c9d0ee3 100644
--- a/locales/es-MX/fix.ftl
+++ b/locales/es-MX/fix.ftl
@@ -25,21 +25,50 @@ high-risk-breach-skip = Saltar por ahora
 
 # Credit Card Breaches
 
+high-risk-breach-credit-card-step-one = Si todavía tienes esta tarjeta, comunícate con el emisor para informar del robo.
+high-risk-breach-credit-card-step-two = Solicita una nueva tarjeta con un nuevo número.
+high-risk-breach-credit-card-step-three = Revisa tus cuentas en busca de cargos no autorizados.
 
 # Bank Account Breaches
 
+high-risk-breach-bank-account-title = Tu cuenta bancaria fue expuesta
+high-risk-breach-bank-account-description = Tomar medidas lo antes posible podría brindarte más protección legal para ayudarte a recuperar cualquier pérdida.
+high-risk-breach-bank-account-step-one = Notifica inmediatamente a tu banco de que tu número de cuenta se ha visto comprometido.
+high-risk-breach-bank-account-step-two = Cambia tu número de cuenta.
+high-risk-breach-bank-account-step-three = Revisa tus cuentas en busca de cargos no autorizados.
 
 # Social Security Number Breaches
 
+high-risk-breach-social-security-title = Tu número de la seguridad social fue expuesto
+high-risk-breach-social-security-description = Los estafadores pueden abrir nuevos préstamos o tarjetas de crédito con tu número de la seguridad social. Actúa rápido para evitar daños financieros.
+high-risk-breach-social-security-step-one = Protégete <link_to_info>configurando una alerta de fraude o congelando tu crédito.</link_to_info>
+high-risk-breach-social-security-step-two = <link_to_info>Consulta tu informe de crédito</link_to_info> para detectar cuentas no reconocidas.
 
 # Social Security Number Modal
 
+ssn-modal-title = Acerca de las alertas de fraude y el bloqueo de crédito
+ssn-modal-description-fraud-part-one = <b>Una alerta de fraude</b> requiere que las empresas verifiquen tu identidad antes de emitir nuevo crédito a tu nombre. Es gratis, tiene una duración de un año y no afectará negativamente tu puntuación crediticia.
+ssn-modal-description-fraud-part-two = Para establecer uno, comunícate con cualquiera de las tres agencias de crédito. No es necesario que contactes a las tres.
+ssn-modal-description-freeze-credit-part-one = <b>Congelar tu crédito</b> impide que alguien abra una nueva cuenta a tu nombre. Es gratis y no afectará negativamente tu puntuación crediticia, pero deberás descongelarlo antes de abrir cuentas nuevas.
+ssn-modal-description-freeze-credit-part-two = Para congelar su crédito, comunícate con cada una de las tres agencias de crédito: <equifax_link>Equifax</equifax_link>, <experian_link>Experian</experian_link> y <transunion_link>TransUnion</transunion_link>.
+ssn-modal-learn-more = Saber más sobre las alertas de fraude y las congelaciones de crédito
+ssn-modal-ok = Aceptar
 
 # PIN Breaches
 
+high-risk-breach-pin-title = Tu PIN fue expuesto
+high-risk-breach-pin-description = Tomar medidas lo antes posible podría brindarte más protección legal para ayudarte a recuperar cualquier pérdida.
+high-risk-breach-pin-step-one = Notifica inmediatamente a tu banco de que tu PIN se ha visto comprometido.
+high-risk-breach-pin-step-two = Cambia tu PIN en cualquier lugar donde hayas usado el mismo.
+high-risk-breach-pin-step-three = Revisa tus cuentas en busca de cargos no autorizados.
 
 # No high risk breaches found
 
+high-risk-breach-none-title = Buenas noticias, no encontramos ninguna filtración de datos de alto riesgo.
+# Variables
+# $email_list is list of emails that the user is monitoring for breaches. E.g. john@yahoo.com, ali@gmail.com, sam@hotmail.com
+high-risk-breach-none-description = Detectamos filtraciones de datos en base a tu dirección de correo electrónico, y no encontramos ninguna filtración de datos de alto riesgo para { $email_list }.
+high-risk-breach-none-sub-description-part-one = Las filtraciones de datos de alto riesgo incluyen:
 
 # Security recommendations
 
diff --git a/locales/nn-NO/email-strings.ftl b/locales/nn-NO/email-strings.ftl
index 2da67c4a1e6..1e68fd52075 100644
--- a/locales/nn-NO/email-strings.ftl
+++ b/locales/nn-NO/email-strings.ftl
@@ -68,3 +68,4 @@ email-spotted-new-breach = Vi har oppdaga ein ny datalekkasje
 ## Redesigned breach alert email
 
 email-breach-alert-all-subject = Ny datalekkasje oppdaga
+email-breach-alert-all-next-steps-button-dashboard = Gå til oversynet

From 1e9cf4a62959e318cc979c373c181c3cd9ea8e5a Mon Sep 17 00:00:00 2001
From: Vincent <git@vincenttunru.com>
Date: Wed, 8 Jan 2025 14:15:35 +0100
Subject: [PATCH 8/9] Run sass-migrator

This fixes Sass deprecation warnings by running

  npx sass-migrator division **/*.scss

and

  npx sass-migrator module **/*.scss

The only manual change after that was replacing `math.div` with
`list.slash` in the `$text-title-*` and `$text-body-*` variables
in tokens.scss, as the `/` there wasn't part of a division.
---
 .../admin/dev/UserAdmin.module.scss           |  38 ++--
 .../admin/emails/EmailTrigger.module.scss     |  22 +-
 .../components/FlagEditor.module.scss         |  48 ++--
 .../admin/feature-flags/page.module.scss      |  26 +--
 .../admin/qa-customs/ConfigPage.module.scss   |  30 +--
 .../admin/removals/Removals.module.scss       |  14 +-
 .../DashboardTopBanner.module.scss            |  18 +-
 .../DashboardTopBannerContent.module.scss     |  18 +-
 .../(dashboard)/dashboard/View.module.scss    |  26 +--
 .../fix/ResolutionContainer.module.scss       |  58 ++---
 .../fix/ResolutionContent.module.scss         |  22 +-
 .../dataBrokerProfiles.module.scss            | 110 ++++-----
 .../ManualRemoveView.module.scss              |  50 ++---
 .../RemovalUnderMaintenance.module.scss       |  59 ++---
 .../AboutBrokersIcon.module.scss              |  12 +-
 .../welcome-to-plus/welcomeToPlus.module.scss |  24 +-
 .../(dashboard)/dashboard/fix/fix.module.scss |  45 ++--
 .../FraudAlertModal.module.scss               |  12 +-
 .../settings/AlertAddressForm.module.scss     |  24 +-
 .../settings/CancelFlow.module.scss           |  50 ++---
 .../settings/EmailAddressAdder.module.scss    |  14 +-
 .../settings/EmailListing.module.scss         |  26 +--
 .../SettingsConfirmationDialog.module.scss    |   4 +-
 .../settings/SettingsContent.module.scss      |  34 +--
 .../(dashboard)/settings/View.module.scss     |  32 +--
 .../settings/panels/Panel.module.scss         |  22 +-
 .../panels/SettingsPanelEditInfo.module.scss  |  12 +-
 .../SettingsPanelNotifications.module.scss    |  18 +-
 .../user/welcome/EnterInfo.module.scss        |  52 ++---
 .../user/welcome/FindExposures.module.scss    |  10 +-
 .../user/welcome/GetStarted.module.scss       |  34 +--
 .../user/welcome/View.module.scss             |  82 +++----
 .../AccountDeletionNotification.module.scss   |  28 +--
 .../(redesign)/(public)/Faq.module.scss       |  28 +--
 .../(public)/LandingView.module.scss          | 208 +++++++++---------
 .../(public)/PlansTable.module.scss           | 188 ++++++++--------
 .../(public)/PublicShell.module.scss          |  36 +--
 .../(public)/SignUpForm.module.scss           |  16 +-
 .../[breachName]/BreachDetailView.module.scss |  90 ++++----
 .../breaches/BreachIndexView.module.scss      |  78 +++----
 .../how-it-works/HowItWorksView.module.scss   | 181 +++++++--------
 .../LimitationsApply.module.scss              |  18 +-
 .../UnsubscribeMonthlyReport.module.scss      |  16 +-
 .../(redesign)/MobileShell.module.scss        |  50 ++---
 .../(redesign)/Shell.module.scss              |  50 ++---
 .../client/BillingPeriod.module.scss          |  28 +--
 src/app/components/client/Button.module.scss  |  76 +++----
 src/app/components/client/Chart.module.scss   | 104 ++++-----
 .../components/client/ComboBox.module.scss    |   6 +-
 .../client/DataBrokerProfiles.module.scss     |  30 +--
 .../client/ExposuresFilter.module.scss        |  84 +++----
 .../client/FixNavigation.module.scss          |  86 ++++----
 .../components/client/InputField.module.scss  |  64 +++---
 src/app/components/client/ListBox.module.scss |  12 +-
 .../client/LocationAutocomplete.module.scss   |  14 +-
 .../client/PercentageChart.module.scss        |  44 ++--
 .../client/PetitionBanner.module.scss         |  48 ++--
 src/app/components/client/Popover.module.scss |   8 +-
 .../components/client/ProgressBar.module.scss |  18 +-
 .../client/ProgressCard.module.scss           |  82 +++----
 .../components/client/RadioInput.module.scss  |  10 +-
 .../SubscriberWaitlistDialog.module.scss      |  12 +-
 .../components/client/SwitchInput.module.scss |  10 +-
 src/app/components/client/TabList.module.scss |  28 +--
 .../client/TelemetryLink.module.scss          |   4 +-
 .../csat_survey/CsatSurveyBanner.module.scss  |  30 +--
 .../client/dialog/Dialog.module.scss          |  56 ++---
 .../client/dialog/ModalOverlay.module.scss    |   4 +-
 .../exposure_card/ExposureCard.module.scss    |  86 ++++----
 .../ExposureCardDataClass.module.scss         |   8 +-
 .../client/toolbar/AppPicker.module.scss      |  52 ++---
 .../client/toolbar/Toolbar.module.scss        |  14 +-
 .../client/toolbar/UpsellBadge.module.scss    |  28 +--
 .../client/toolbar/UpsellDialog.module.scss   |  24 +-
 .../client/toolbar/UserMenu.module.scss       |  40 ++--
 .../components/server/BreachLogo.module.scss  |  48 ++--
 .../components/server/StatusPill.module.scss  |  24 +-
 .../server/VisuallyHidden.module.scss         |   4 +-
 src/app/not-found.module.scss                 |   6 +-
 src/app/tokens.scss                           |  24 +-
 80 files changed, 1637 insertions(+), 1612 deletions(-)

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss
index 3024d2e1871..3fdb508f88d 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss
@@ -1,20 +1,20 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
-  background-color: $color-grey-05;
+  gap: tokens.$spacing-2xl;
+  background-color: tokens.$color-grey-05;
   height: 100%;
-  padding: $layout-lg $layout-2xl;
+  padding: tokens.$layout-lg tokens.$layout-2xl;
 
-  @media screen and (max-width: $screen-lg) {
-    padding: $spacing-lg;
+  @media screen and (max-width: tokens.$screen-lg) {
+    padding: tokens.$spacing-lg;
   }
 }
 
 .header {
-  font: $text-title-xs;
+  font: tokens.$text-title-xs;
   font-weight: normal;
 
   b {
@@ -25,33 +25,33 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
+  gap: tokens.$spacing-2xl;
 
   .userPicker {
     flex: 1 0 auto;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: $spacing-2xl;
-    min-height: $layout-2xl;
+    gap: tokens.$spacing-2xl;
+    min-height: tokens.$layout-2xl;
 
     label {
       display: flex;
       flex-direction: column;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
       min-width: 50%;
     }
 
     input {
-      padding: $spacing-sm;
-      font: $text-body-md;
+      padding: tokens.$spacing-sm;
+      font: tokens.$text-body-md;
     }
   }
 
   .actions {
     display: flex;
     flex-wrap: wrap;
-    gap: $spacing-xl;
+    gap: tokens.$spacing-xl;
 
     button {
       flex: 1 1 25%;
@@ -60,9 +60,9 @@
 }
 
 .status {
-  background-color: $color-yellow-05;
-  border: 2px solid $color-yellow-20;
-  border-radius: $border-radius-sm;
-  padding: $spacing-md $spacing-lg;
-  font: $text-body-md;
+  background-color: tokens.$color-yellow-05;
+  border: 2px solid tokens.$color-yellow-20;
+  border-radius: tokens.$border-radius-sm;
+  padding: tokens.$spacing-md tokens.$spacing-lg;
+  font: tokens.$text-body-md;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss
index 722fc30bbd3..91668189abf 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss
@@ -1,35 +1,35 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
-  background-color: $color-grey-05;
+  gap: tokens.$spacing-2xl;
+  background-color: tokens.$color-grey-05;
   height: 100%;
-  padding: $layout-lg $layout-2xl;
+  padding: tokens.$layout-lg tokens.$layout-2xl;
 
-  @media screen and (max-width: $screen-lg) {
-    padding: $spacing-lg;
+  @media screen and (max-width: tokens.$screen-lg) {
+    padding: tokens.$spacing-lg;
   }
 }
 
 .addressSection {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .addressPicker {
     display: flex;
     align-items: center;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
     label {
-      font: $text-body-lg;
+      font: tokens.$text-body-lg;
       font-weight: 700;
     }
 
     select {
-      padding: $spacing-sm;
+      padding: tokens.$spacing-sm;
     }
   }
 }
@@ -37,5 +37,5 @@
 .triggers {
   display: flex;
   flex-wrap: wrap;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss
index 8464bd2128c..6521ec1dc95 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss
@@ -1,32 +1,32 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .flagWrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  background-color: $color-white;
-  padding: $spacing-lg;
-  border-radius: $border-radius-md;
-  max-width: $content-sm;
+  gap: tokens.$spacing-lg;
+  background-color: tokens.$color-white;
+  padding: tokens.$spacing-lg;
+  border-radius: tokens.$border-radius-md;
+  max-width: tokens.$content-sm;
 }
 
 .flagName {
-  font: $text-title-3xs;
+  font: tokens.$text-title-3xs;
 }
 
 .enabledControl {
   display: flex;
-  gap: $spacing-xs;
-  font: $text-body-lg;
+  gap: tokens.$spacing-xs;
+  font: tokens.$text-body-lg;
 }
 
 .allowListWrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   h4 {
-    font: $text-body-md;
+    font: tokens.$text-body-md;
     font-weight: bold;
   }
 }
@@ -35,7 +35,7 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  gap: $spacing-xs;
+  gap: tokens.$spacing-xs;
   padding: 0;
   list-style-type: none;
 }
@@ -43,8 +43,8 @@
 .addressListing {
   display: flex;
   align-items: center;
-  gap: $spacing-xs;
-  font: $text-body-md;
+  gap: tokens.$spacing-xs;
+  font: tokens.$text-body-md;
   font-family: monospace;
 
   :first-child {
@@ -54,25 +54,25 @@
   button {
     background-color: transparent;
     border: none;
-    border-radius: $border-radius-xl;
+    border-radius: tokens.$border-radius-xl;
     aspect-ratio: 1;
 
     &:hover {
       cursor: pointer;
-      background-color: $color-red-70;
-      color: $color-white;
+      background-color: tokens.$color-red-70;
+      color: tokens.$color-white;
     }
   }
 
   &:has(button:hover) {
-    color: $color-red-70;
+    color: tokens.$color-red-70;
   }
 }
 
 .addressAdder {
   display: flex;
   align-items: center;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   input[type="email"] {
     flex-grow: 1;
@@ -87,15 +87,15 @@
     align-items: center;
     height: 100%;
     background-color: transparent;
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
     border: none;
-    border-radius: $border-radius-sm;
-    padding: $spacing-sm;
+    border-radius: tokens.$border-radius-sm;
+    padding: tokens.$spacing-sm;
 
     &:hover {
       cursor: pointer;
-      background-color: $color-blue-50;
-      color: $color-white;
+      background-color: tokens.$color-blue-50;
+      color: tokens.$color-white;
     }
   }
   /* stylelint-enable no-descending-specificity */
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss
index 9d90eb6fbf1..70cb54ed1ea 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss
@@ -1,14 +1,14 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   width: 100%;
   height: 100%;
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
   overflow: auto;
 
   .tabBar {
-    height: $tab-bar-height;
-    border-bottom: 1px solid $color-grey-20;
+    height: tokens.$tab-bar-height;
+    border-bottom: 1px solid tokens.$color-grey-20;
     display: flex;
     align-items: center;
 
@@ -16,14 +16,14 @@
       flex: 1 0 auto;
       display: flex;
       align-items: center;
-      padding-inline: $spacing-2xl;
+      padding-inline: tokens.$spacing-2xl;
     }
 
     .end {
-      padding-inline: $spacing-xl;
+      padding-inline: tokens.$spacing-xl;
     }
 
-    @media screen and (max-width: $screen-md) {
+    @media screen and (max-width: tokens.$screen-md) {
       .start {
         justify-content: center;
       }
@@ -35,7 +35,7 @@
   }
 
   .main {
-    padding: $spacing-lg 0;
+    padding: tokens.$spacing-lg 0;
   }
 
   th,
@@ -45,15 +45,15 @@
   }
 
   h3 {
-    padding: 0 $spacing-2xl;
-    font: $text-title-2xs;
+    padding: 0 tokens.$spacing-2xl;
+    font: tokens.$text-title-2xs;
   }
 }
 
 .flagList {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax($content-xs, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(tokens.$content-xs, 1fr));
   justify-content: flex-start;
-  gap: $spacing-lg;
-  padding: $spacing-2xl;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$spacing-2xl;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss
index 5c78b21fe99..4b157c0c911 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/qa-customs/ConfigPage.module.scss
@@ -1,12 +1,12 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: grid;
   grid-template-rows: 120px min-content;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
   height: 100%;
-  padding: $layout-sm;
-  background-color: $color-grey-05;
+  padding: tokens.$layout-sm;
+  background-color: tokens.$color-grey-05;
   align-items: center;
   justify-content: center;
 }
@@ -17,7 +17,7 @@
 }
 
 .header {
-  font: $text-title-xs;
+  font: tokens.$text-title-xs;
   font-weight: normal;
   margin: auto;
   width: 100%;
@@ -28,8 +28,8 @@
 }
 
 .formAndListWrapper {
-  gap: $spacing-md;
-  margin-top: $spacing-lg;
+  gap: tokens.$spacing-md;
+  margin-top: tokens.$spacing-lg;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr;
@@ -63,7 +63,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 }
 
 .searchBox {
@@ -134,7 +134,7 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
   align-items: center;
   width: min-content;
 
@@ -143,20 +143,20 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: $spacing-md;
-    min-height: $layout-md;
+    gap: tokens.$spacing-md;
+    min-height: tokens.$layout-md;
 
     label {
       display: flex;
       flex-direction: column;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
       min-width: 50%;
       width: 350px;
     }
 
     input {
-      padding: $spacing-sm;
-      font: $text-body-md;
+      padding: tokens.$spacing-sm;
+      font: tokens.$text-body-md;
       transition: border-color 0.3s ease;
     }
   }
@@ -196,7 +196,7 @@
 
 .configContainer {
   display: flex;
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
 }
 
 .configLeft {
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss
index 4d97abf58d0..3d8b1dc5592 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/Removals.module.scss
@@ -1,20 +1,20 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
-  background-color: $color-grey-05;
+  gap: tokens.$spacing-2xl;
+  background-color: tokens.$color-grey-05;
   height: 100%;
-  padding: $layout-lg $layout-2xl;
+  padding: tokens.$layout-lg tokens.$layout-2xl;
 
-  @media screen and (max-width: $screen-lg) {
-    padding: $spacing-lg;
+  @media screen and (max-width: tokens.$screen-lg) {
+    padding: tokens.$spacing-lg;
   }
 }
 
 .header {
-  font: $text-title-xs;
+  font: tokens.$text-title-xs;
   font-weight: normal;
 
   b {
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss
index 5304af2e9cd..bb6eb3ccc04 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBanner.module.scss
@@ -1,19 +1,19 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .container {
-  background-color: $color-white;
+  background-color: tokens.$color-white;
   background-image: url("../images/dashboard-top-banner-wave.svg");
   background-position: center;
   background-size: cover;
-  border-radius: $border-radius-md;
-  border: 1px solid rgba($color-purple-50, 0.2);
+  border-radius: tokens.$border-radius-md;
+  border: 1px solid rgba(tokens.$color-purple-50, 0.2);
   display: flex;
   flex-direction: column-reverse;
-  gap: $layout-sm;
-  padding: $layout-xs;
+  gap: tokens.$layout-sm;
+  padding: tokens.$layout-xs;
 
-  @media screen and (min-width: $screen-lg) {
-    padding: $layout-md;
+  @media screen and (min-width: tokens.$screen-lg) {
+    padding: tokens.$layout-md;
     flex-direction: row;
     align-items: center;
   }
@@ -22,7 +22,7 @@
     display: flex;
     justify-content: center;
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       flex: 1 1 0%;
     }
   }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss
index ef0005e1190..c503a2d7ea6 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/DashboardTopBanner/DashboardTopBannerContent.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .explainerContentWrapper {
   align-items: center;
@@ -6,7 +6,7 @@
   justify-content: center;
   flex: 1 1 0%;
 
-  @media screen and (min-width: $screen-sm) and (max-width: calc($screen-md - 1px)) {
+  @media screen and (min-width: tokens.$screen-sm) and (max-width: calc(tokens.$screen-md - 1px)) {
     justify-content: center;
     flex: 0.5 1 0%;
     text-align: center;
@@ -14,27 +14,27 @@
 
   .explainerContent {
     display: flex;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
     flex-direction: column;
 
-    @media screen and (min-width: $screen-md) {
-      max-width: $content-sm;
+    @media screen and (min-width: tokens.$screen-md) {
+      max-width: tokens.$content-sm;
     }
 
     h3 {
-      font: $text-title-2xs;
+      font: tokens.$text-title-2xs;
     }
 
     .cta {
       align-self: start;
 
-      @media screen and (min-width: $screen-sm) and (max-width: calc($screen-md - 1px)) {
+      @media screen and (min-width: tokens.$screen-sm) and (max-width: calc(tokens.$screen-md - 1px)) {
         align-self: center;
       }
 
-      @media screen and (max-width: calc($screen-md - 1px)) {
+      @media screen and (max-width: calc(tokens.$screen-md - 1px)) {
         display: grid;
-        max-width: $content-sm;
+        max-width: tokens.$content-sm;
         width: 100%;
       }
     }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss
index cdb6ced3191..d2da7ebcf76 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.module.scss
@@ -1,35 +1,35 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .wrapper {
   width: 100%;
   height: 100%;
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
 }
 
 .dashboardContent {
-  padding-block: $spacing-2xl;
-  padding-inline: $spacing-xl;
+  padding-block: tokens.$spacing-2xl;
+  padding-inline: tokens.$spacing-xl;
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 }
 
 .exposuresArea {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .exposuresAreaHeadline {
-    font: $text-body-xl;
+    font: tokens.$text-body-xl;
     font-weight: 600;
   }
 
   .exposuresAreaDescription {
-    font: $text-body-md;
+    font: tokens.$text-body-md;
   }
 
   .exposuresFilterWrapper {
-    padding-block: $spacing-md;
+    padding-block: tokens.$spacing-md;
   }
 }
 
@@ -38,17 +38,17 @@
   padding-inline: 0;
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 }
 
 .zeroStateIndicator {
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: $spacing-sm;
-  padding: $spacing-md;
+  gap: tokens.$spacing-sm;
+  padding: tokens.$spacing-md;
 }
 
 .visuallyHidden {
-  @include visually-hidden;
+  @include tokens.visually-hidden;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss
index d100b67ce3f..8e9e30a7bbc 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContainer.module.scss
@@ -1,16 +1,16 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .container {
   display: grid;
-  grid-gap: $layout-lg;
+  grid-gap: tokens.$layout-lg;
   flex-direction: row;
 
-  @media screen and (min-width: $screen-xl) {
-    padding-inline: $layout-lg;
+  @media screen and (min-width: tokens.$screen-xl) {
+    padding-inline: tokens.$layout-lg;
   }
 
   &.hasIllustration {
-    @media screen and (min-width: $screen-xl) {
+    @media screen and (min-width: tokens.$screen-xl) {
       grid-template-columns: 2fr 1fr;
     }
   }
@@ -18,55 +18,55 @@
   .breachContentWrapper {
     display: flex;
     flex-direction: column;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
 
     .label {
       align-self: flex-start;
-      background: rgba($color-blue-50, 0.3);
-      border-radius: $border-radius-sm;
-      color: $color-blue-90;
+      background: rgba(tokens.$color-blue-50, 0.3);
+      border-radius: tokens.$border-radius-sm;
+      color: tokens.$color-blue-90;
       display: inline-flex;
-      font: $text-body-xs;
+      font: tokens.$text-body-xs;
       font-weight: 600;
       line-height: 1;
-      padding: $spacing-sm;
+      padding: tokens.$spacing-sm;
     }
 
     h3 {
-      font: $text-title-2xs;
-      padding: $spacing-sm 0 $spacing-xs;
+      font: tokens.$text-title-2xs;
+      padding: tokens.$spacing-sm 0 tokens.$spacing-xs;
     }
 
     .recommendations {
       p {
-        font: $text-body-sm;
+        font: tokens.$text-body-sm;
       }
       ol {
-        padding-top: $spacing-md;
+        padding-top: tokens.$spacing-md;
         list-style-position: inside;
         padding-left: 0;
       }
-      padding-top: $spacing-md;
+      padding-top: tokens.$spacing-md;
     }
 
     .buttons {
-      padding-top: $spacing-md;
+      padding-top: tokens.$spacing-md;
       display: flex;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
       align-items: center;
     }
 
     .breachItemsWrapper {
       display: flex;
       flex-wrap: wrap;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
 
       .breachItem {
-        font: $text-body-sm;
+        font: tokens.$text-body-sm;
         font-weight: 600;
-        background: $color-grey-10;
-        padding: $spacing-xs $spacing-sm;
-        border-radius: $border-radius-md;
+        background: tokens.$color-grey-10;
+        padding: tokens.$spacing-xs tokens.$spacing-sm;
+        border-radius: tokens.$border-radius-md;
 
         .date {
           font-weight: 400;
@@ -76,8 +76,8 @@
   }
 
   .estimatedTime {
-    @include estimated-time;
-    padding-top: $layout-xs;
+    @include tokens.estimated-time;
+    padding-top: tokens.$layout-xs;
   }
 
   .illustrationWrapper {
@@ -86,7 +86,7 @@
     &.hideOnMobile {
       display: none;
 
-      @media screen and (min-width: $screen-xl) {
+      @media screen and (min-width: tokens.$screen-xl) {
         display: flex;
       }
     }
@@ -98,10 +98,10 @@
 
   .doneContentWrapper {
     display: grid;
-    gap: $layout-xs;
+    gap: tokens.$layout-xs;
     grid-template-columns: 1fr;
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       grid-template-columns: 1fr 1fr;
     }
 
@@ -109,7 +109,7 @@
       align-items: flex-start;
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
     }
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss
index 6c86b545316..4f27b7f4648 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/ResolutionContent.module.scss
@@ -1,17 +1,17 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .recommendations {
-  padding-top: $spacing-md;
+  padding-top: tokens.$spacing-md;
   p {
-    font: $text-body-sm;
+    font: tokens.$text-body-sm;
   }
   ul,
   ol {
-    padding-top: $spacing-md;
-    padding-left: $spacing-lg;
+    padding-top: tokens.$spacing-md;
+    padding-left: tokens.$spacing-lg;
 
     li {
-      margin-bottom: $spacing-xs;
+      margin-bottom: tokens.$spacing-xs;
       align-items: flex-start;
     }
   }
@@ -20,14 +20,14 @@
 .breachItemsWrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: $spacing-xs;
+  gap: tokens.$spacing-xs;
 
   .breachItem {
-    font: $text-body-sm;
+    font: tokens.$text-body-sm;
     font-weight: 600;
-    background: $color-grey-10;
-    padding: $spacing-xs $spacing-sm;
-    border-radius: $border-radius-md;
+    background: tokens.$color-grey-10;
+    padding: tokens.$spacing-xs tokens.$spacing-sm;
+    border-radius: tokens.$border-radius-md;
 
     .date {
       font-weight: 400;
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss
index 57824d78b94..86026f85b6e 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss
@@ -1,11 +1,11 @@
-@import "../../../../../../../../tokens";
+@use "../../../../../../../../tokens";
 
 .main {
   flex-direction: column;
 }
 
 .contentWrapper {
-  max-width: $content-md;
+  max-width: tokens.$content-md;
   margin: 0 auto;
   text-align: center;
 }
@@ -14,13 +14,13 @@
   display: flex;
   flex-direction: column;
   text-align: center;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   a {
     display: block;
   }
 
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -30,7 +30,7 @@
 
 .upgradeToggleWrapper {
   display: block;
-  margin-bottom: $spacing-lg;
+  margin-bottom: tokens.$spacing-lg;
 
   > span {
     display: block;
@@ -38,21 +38,21 @@
 }
 
 .removalStepsList {
-  font: $text-body-md;
+  font: tokens.$text-body-md;
   text-align: left;
 
   li {
-    margin-bottom: $spacing-md;
+    margin-bottom: tokens.$spacing-md;
 
     > strong {
       display: block;
-      margin-bottom: $spacing-xs;
+      margin-bottom: tokens.$spacing-xs;
       font-weight: 700;
     }
 
     // The subhead/bullet content is wrapped in a span to style to OL marker (1.)
     > span {
-      font: $text-body-sm;
+      font: tokens.$text-body-sm;
       font-weight: normal;
     }
   }
@@ -60,20 +60,20 @@
 
 .content {
   text-align: center;
-  max-width: $content-md;
-  margin: 0 auto $spacing-2xl;
+  max-width: tokens.$content-md;
+  margin: 0 auto tokens.$spacing-2xl;
 
   h3 {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
   }
 
   h4 {
-    font: $text-title-3xs;
+    font: tokens.$text-title-3xs;
   }
 
   p,
   h3 {
-    margin-block-end: $spacing-md;
+    margin-block-end: tokens.$spacing-md;
   }
 
   h3 + p {
@@ -81,14 +81,14 @@
   }
 
   > a {
-    color: $color-blue-60;
+    color: tokens.$color-blue-60;
     display: inline-block;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: tokens.$spacing-sm;
   }
 }
 
 .cityScape {
-  margin: 0 auto $spacing-2xl;
+  margin: 0 auto tokens.$spacing-2xl;
   display: block;
   max-width: 100%;
 }
@@ -97,31 +97,31 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: $spacing-xs;
-  font: $text-title-3xs;
+  gap: tokens.$spacing-xs;
+  font: tokens.$text-title-3xs;
 }
 
 .questionTooltip {
-  @include question-mark-circle-btn;
+  @include tokens.question-mark-circle-btn;
 }
 
 .contentAutomaticRemove {
   h3 {
-    @include no-focus-outline;
+    @include tokens.no-focus-outline;
     text-align: left;
   }
 }
 
 .featuresList {
   text-align: left;
-  max-width: $content-sm;
-  margin-bottom: $spacing-lg;
+  max-width: tokens.$content-sm;
+  margin-bottom: tokens.$spacing-lg;
 
   ul {
     padding: 0;
     li {
       background: url("../images/icon-check-mark.svg") no-repeat left center;
-      padding: $spacing-sm 0 $spacing-sm $spacing-xl;
+      padding: tokens.$spacing-sm 0 tokens.$spacing-sm tokens.$spacing-xl;
       list-style: none;
       margin: 0;
       vertical-align: middle;
@@ -132,40 +132,40 @@
 .upgradeToggle {
   width: auto;
   display: inline-flex;
-  gap: $spacing-sm;
-  background-color: $color-grey-10;
-  border-radius: $border-radius-xl;
-  padding: $spacing-sm $spacing-sm;
-  font: $text-body-sm;
-  margin-bottom: $spacing-md;
+  gap: tokens.$spacing-sm;
+  background-color: tokens.$color-grey-10;
+  border-radius: tokens.$border-radius-xl;
+  padding: tokens.$spacing-sm tokens.$spacing-sm;
+  font: tokens.$text-body-sm;
+  margin-bottom: tokens.$spacing-md;
 
   .toggleBtn {
     cursor: pointer;
     appearance: none;
     background-color: transparent;
     border: 0;
-    color: $color-grey-50;
-    padding: $spacing-xs $spacing-md;
+    color: tokens.$color-grey-50;
+    padding: tokens.$spacing-xs tokens.$spacing-md;
     font-weight: 500;
 
     &.isActive,
     &:hover {
-      background-color: $color-white;
-      border-radius: $border-radius-xl;
-      color: $color-informational;
+      background-color: tokens.$color-white;
+      border-radius: tokens.$border-radius-xl;
+      color: tokens.$color-informational;
     }
 
     &.isFocused {
-      outline: 2px solid $color-purple-70;
-      background-color: $color-purple-10;
+      outline: 2px solid tokens.$color-purple-70;
+      background-color: tokens.$color-purple-10;
     }
   }
 }
 
 .upgradeContentWrapper {
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     display: flex;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
     justify-content: space-between;
     // Used to stop purple box from stretching full width
     align-items: flex-start;
@@ -177,36 +177,36 @@
     justify-content: space-between;
     flex-direction: column;
     width: 100%;
-    background-color: $color-purple-70;
-    color: $color-white;
-    padding: $spacing-lg;
+    background-color: tokens.$color-purple-70;
+    color: tokens.$color-white;
+    padding: tokens.$spacing-lg;
     // Note: Confirmed with design to only round the top-right corner
-    border-top-right-radius: $border-radius-xl;
+    border-top-right-radius: tokens.$border-radius-xl;
     > strong {
       text-align: center;
       display: block;
-      font: $text-body-xl;
+      font: tokens.$text-body-xl;
       small {
         display: block;
-        font: $text-body-md;
+        font: tokens.$text-body-md;
       }
     }
     // Price block
     > span {
-      margin: $spacing-xl 0;
-      font: $text-title-sm;
+      margin: tokens.$spacing-xl 0;
+      font: tokens.$text-title-sm;
       font-weight: 500;
     }
 
     // Invert color for the plan selection CTA to increase visibility
     // against the purple background.
     & > a {
-      color: $color-white;
-      box-shadow: inset 0 0 0 2px $color-white;
+      color: tokens.$color-white;
+      box-shadow: inset 0 0 0 2px tokens.$color-white;
 
       &:hover {
-        background-color: $color-white;
-        color: $color-purple-70;
+        background-color: tokens.$color-white;
+        color: tokens.$color-purple-70;
       }
     }
   }
@@ -215,15 +215,15 @@
 .dataBrokerResolutionStats {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
   justify-content: center;
-  padding-top: $layout-sm;
+  padding-top: tokens.$layout-sm;
 
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     flex-direction: row;
   }
   div {
-    @include estimated-time;
+    @include tokens.estimated-time;
     justify-content: center;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss
index 8caa7cefd9b..c6c10b1f353 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.module.scss
@@ -1,23 +1,23 @@
-@import "../../../../../../../../../tokens";
+@use "../../../../../../../../../tokens";
 
 .main {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 }
 
 .buttonsWrapper {
   display: flex;
   flex-direction: column;
   text-align: center;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   a {
     display: block;
   }
 
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -26,66 +26,66 @@
 }
 
 .removalStepsList {
-  font: $text-body-md;
+  font: tokens.$text-body-md;
   text-align: left;
 
   li {
-    margin-bottom: $spacing-md;
+    margin-bottom: tokens.$spacing-md;
 
     > strong {
       display: block;
-      margin-bottom: $spacing-xs;
+      margin-bottom: tokens.$spacing-xs;
       font-weight: 700;
     }
 
     // The subhead/bullet content is wrapped in a span to style to OL marker (1.)
     > span {
-      font: $text-body-sm;
+      font: tokens.$text-body-sm;
       font-weight: normal;
     }
   }
 }
 
 .content {
-  max-width: $content-md;
+  max-width: tokens.$content-md;
 
   h3 {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
     text-align: center;
   }
 
   h4 {
-    font: $text-title-3xs;
+    font: tokens.$text-title-3xs;
   }
 
   p,
   h3 {
-    margin-block-end: $spacing-md;
+    margin-block-end: tokens.$spacing-md;
   }
 
   > a {
-    color: $color-blue-60;
+    color: tokens.$color-blue-60;
     display: inline-block;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: tokens.$spacing-sm;
   }
 }
 
 .exposureListing {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 
   h3 {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
   }
 
   .exposureList {
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
-    @media screen and (min-width: $screen-md) {
-      padding-inline: $spacing-lg;
+    @media screen and (min-width: tokens.$screen-md) {
+      padding-inline: tokens.$spacing-lg;
     }
   }
 }
@@ -94,22 +94,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: $spacing-xs;
-  font: $text-title-3xs;
+  gap: tokens.$spacing-xs;
+  font: tokens.$text-title-3xs;
 }
 
 .dataBrokerResolutionStats {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
   justify-content: center;
-  padding-top: $layout-sm;
+  padding-top: tokens.$layout-sm;
 
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     flex-direction: row;
   }
   div {
-    @include estimated-time;
+    @include tokens.estimated-time;
     justify-content: center;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss
index 6abfe523995..f8a4369fc38 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenance.module.scss
@@ -1,24 +1,25 @@
-@import "../../../../../../../../../tokens";
+@use "../../../../../../../../../tokens";
 
 .dataBrokerInformationWrapper {
   .exposureCardWrapper {
-    margin-top: $spacing-md;
-    padding-bottom: $spacing-lg;
+    margin-top: tokens.$spacing-md;
+    padding-bottom: tokens.$spacing-lg;
 
     .exposureCard {
       display: flex;
       flex-direction: column;
-      background-color: $color-white;
-      border: 2px solid rgba($color-purple-70, 0.2);
-      border-radius: $border-radius-lg;
-      padding: $layout-sm $layout-sm $layout-xs $layout-sm;
+      background-color: tokens.$color-white;
+      border: 2px solid rgba(tokens.$color-purple-70, 0.2);
+      border-radius: tokens.$border-radius-lg;
+      padding: tokens.$layout-sm tokens.$layout-sm tokens.$layout-xs
+        tokens.$layout-sm;
 
       .dataClassesList {
         justify-content: space-between;
         margin-left: 0;
         display: grid;
         grid-template-columns: 1fr;
-        grid-row-gap: $spacing-sm;
+        grid-row-gap: tokens.$spacing-sm;
         transition: opacity 0.35s ease-in-out;
         opacity: 1;
 
@@ -26,38 +27,38 @@
           opacity: 0;
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media screen and (min-width: tokens.$screen-md) {
           grid-template-columns: 1fr 1fr 1fr;
-          gap: $spacing-sm;
+          gap: tokens.$spacing-sm;
         }
 
-        @media screen and (min-width: $screen-lg) {
+        @media screen and (min-width: tokens.$screen-lg) {
           display: flex;
           flex-direction: row;
           align-items: flex-start;
-          gap: $layout-xs;
+          gap: tokens.$layout-xs;
           flex-wrap: wrap;
           justify-content: flex-start;
         }
       }
 
       .buttonsWrapper {
-        margin-top: $spacing-lg;
-        border-top: 2px solid $color-grey-10;
-        padding-top: $spacing-lg;
+        margin-top: tokens.$spacing-lg;
+        border-top: 2px solid tokens.$color-grey-10;
+        padding-top: tokens.$spacing-lg;
         display: flex;
-        gap: $spacing-sm;
+        gap: tokens.$spacing-sm;
       }
 
       .estimatedTime {
-        @include estimated-time;
-        padding-top: $spacing-sm;
+        @include tokens.estimated-time;
+        padding-top: tokens.$spacing-sm;
       }
     }
   }
 
   .header {
-    font: $text-body-lg;
+    font: tokens.$text-body-lg;
     font-weight: 700;
     transition: opacity 0.35s ease-in-out;
     opacity: 1;
@@ -74,44 +75,44 @@
     cursor: pointer;
   }
   .headerRemovalGuide {
-    padding-top: $spacing-lg;
-    font: $text-body-xl;
+    padding-top: tokens.$spacing-lg;
+    font: tokens.$text-body-xl;
     font-weight: 700;
   }
 
   .buttonWrapper {
     display: flex;
     justify-content: center;
-    padding-top: $spacing-lg;
+    padding-top: tokens.$spacing-lg;
   }
 }
 
 .removalContentSection {
-  margin-top: $layout-md;
+  margin-top: tokens.$layout-md;
 
   dt {
-    font: $text-body-lg;
+    font: tokens.$text-body-lg;
     font-weight: 600;
 
     &.removalGuideInstructions {
-      font: $text-body-md;
+      font: tokens.$text-body-md;
       font-weight: 700;
     }
   }
 
   dd {
-    padding-top: $spacing-sm;
+    padding-top: tokens.$spacing-sm;
   }
 
   ol {
-    padding-top: $spacing-sm;
+    padding-top: tokens.$spacing-sm;
 
     li {
-      margin-bottom: $spacing-xs;
+      margin-bottom: tokens.$spacing-xs;
     }
   }
 
   button {
-    margin-top: $spacing-lg;
+    margin-top: tokens.$spacing-lg;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss
index 0c3c4b37e83..aeb00cff05b 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/view-data-brokers/AboutBrokersIcon.module.scss
@@ -1,9 +1,9 @@
-@import "../../../../../../../../../tokens";
+@use "../../../../../../../../../tokens";
 
 .triggerButton {
   border-style: none;
   background-color: transparent;
-  color: $color-purple-70;
+  color: tokens.$color-purple-70;
   aspect-ratio: 1 / 1;
   cursor: pointer;
 }
@@ -11,14 +11,14 @@
 .dialogContents {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  color: $color-grey-50;
+  gap: tokens.$spacing-lg;
+  color: tokens.$color-grey-50;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss
index 5c384512cf5..eccffe7af60 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/welcome-to-plus/welcomeToPlus.module.scss
@@ -1,13 +1,13 @@
-@import "../../../../../../../../../tokens";
+@use "../../../../../../../../../tokens";
 
 .contentWrapper {
-  max-width: $content-md;
+  max-width: tokens.$content-md;
   margin: 0 auto;
   text-align: center;
   display: flex;
   align-items: center;
-  gap: $spacing-xl;
-  @media screen and (max-width: $screen-xl) {
+  gap: tokens.$spacing-xl;
+  @media screen and (max-width: tokens.$screen-xl) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -18,13 +18,13 @@
   display: flex;
   flex-direction: column;
   text-align: center;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   a {
     display: block;
   }
 
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -33,23 +33,23 @@
 
 .content {
   text-align: left;
-  max-width: $content-sm;
+  max-width: tokens.$content-sm;
   margin: 0 auto;
 
   h3 {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
   }
 
   p,
   h3 {
-    margin-block-end: $spacing-md;
+    margin-block-end: tokens.$spacing-md;
     text-align: left;
   }
 
   > a {
-    color: $color-blue-60;
+    color: tokens.$color-blue-60;
     display: inline-block;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: tokens.$spacing-sm;
   }
 }
 
@@ -63,7 +63,7 @@
   &.hideOnMobile {
     display: none;
 
-    @media screen and (min-width: $screen-xl) {
+    @media screen and (min-width: tokens.$screen-xl) {
       display: flex;
     }
   }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss
index 918aca913ae..055e88ad47f 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/fix.module.scss
@@ -1,7 +1,7 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .fixContainer {
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
   height: 100%;
   display: flex;
   align-items: center;
@@ -9,17 +9,17 @@
   // Set position relative so the child <Confetti> canvas can overlay <FixView>
   position: relative;
 
-  @media screen and (min-width: $screen-md) {
-    padding: $layout-sm;
+  @media screen and (min-width: tokens.$screen-md) {
+    padding: tokens.$layout-sm;
   }
 
   .fixWrapper {
-    box-shadow: $box-shadow-xs;
-    border-radius: $border-radius-md;
-    max-width: $content-xl;
+    box-shadow: tokens.$box-shadow-xs;
+    border-radius: tokens.$border-radius-md;
+    max-width: tokens.$content-xl;
     width: 100%;
-    padding: $layout-xs;
-    background-color: $color-white;
+    padding: tokens.$layout-xs;
+    background-color: tokens.$color-white;
     background-size: cover;
     background-position: center;
     position: relative;
@@ -27,7 +27,7 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
-    min-height: $content-sm;
+    min-height: tokens.$content-sm;
 
     &.contentBackgroundImage {
       background-image: url("./images/high-risk-breaches-content-background.svg");
@@ -36,23 +36,24 @@
 
   .navClose {
     position: absolute;
-    right: $spacing-md;
-    top: $spacing-md;
+    right: tokens.$spacing-md;
+    top: tokens.$spacing-md;
   }
 
   .fixSection {
     display: flex;
     justify-content: stretch;
     align-items: center;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       // Add horizontal padding to account for next/prev arrow placement on larger screens
-      padding: $spacing-lg $spacing-2xl;
+      padding: tokens.$spacing-lg tokens.$spacing-2xl;
     }
 
-    @media screen and (min-width: $screen-xl) {
-      padding: $spacing-xl $spacing-lg $spacing-md $spacing-lg;
+    @media screen and (min-width: tokens.$screen-xl) {
+      padding: tokens.$spacing-xl tokens.$spacing-lg tokens.$spacing-md
+        tokens.$spacing-lg;
     }
 
     .navArrow {
@@ -61,15 +62,15 @@
       position: absolute;
       align-items: center;
       justify-content: center;
-      padding: $spacing-md;
-      border-radius: $border-radius-sm;
-      right: $spacing-md;
+      padding: tokens.$spacing-md;
+      border-radius: tokens.$border-radius-sm;
+      right: tokens.$spacing-md;
 
       &:hover {
-        background-color: $color-violet-20;
+        background-color: tokens.$color-violet-20;
       }
 
-      @media screen and (min-width: $screen-md) {
+      @media screen and (min-width: tokens.$screen-md) {
         display: flex;
       }
     }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss
index c747c7d9375..b0eadd4431b 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/FraudAlertModal.module.scss
@@ -1,20 +1,20 @@
-@import "../../../../../../../../tokens";
+@use "../../../../../../../../tokens";
 
 .triggerButton {
-  @include question-mark-circle-btn;
+  @include tokens.question-mark-circle-btn;
 }
 
 .dialogContents {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  color: $color-grey-50;
+  gap: tokens.$spacing-lg;
+  color: tokens.$color-grey-50;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss
index a345bc7efa9..35b6447c73e 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.module.scss
@@ -1,39 +1,39 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   .sectionTitle {
     h3 {
-      font: $text-title-3xs;
+      font: tokens.$text-title-3xs;
     }
 
     p {
-      color: $color-grey-40;
+      color: tokens.$color-grey-40;
     }
   }
 
   .radioGroup {
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
     .emailAlertsOptions {
-      padding-inline-start: $spacing-lg;
+      padding-inline-start: tokens.$spacing-lg;
       display: flex;
       flex-direction: column;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
     }
 
     .radioButton {
-      stroke: $color-black;
+      stroke: tokens.$color-black;
     }
 
     label {
       display: flex;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
       div {
         display: flex;
         flex-direction: column;
@@ -43,7 +43,7 @@
         }
 
         p {
-          color: $color-grey-40;
+          color: tokens.$color-grey-40;
         }
       }
 
@@ -53,11 +53,11 @@
     }
 
     .focusRing {
-      stroke: $color-blue-50;
+      stroke: tokens.$color-blue-50;
     }
 
     .selectedFill {
-      fill: $color-black;
+      fill: tokens.$color-black;
     }
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss
index 24e614b93ba..8f28bde754f 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/CancelFlow.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 // The attribute selector makes this more specific that <Button>'s direct styles,
 // so we can overwrite the font weight. Maybe it should just not be a <Button>…
@@ -10,30 +10,30 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-xs;
+  gap: tokens.$spacing-xs;
   text-align: center;
 
   button {
     &.primaryCta {
-      margin-top: $spacing-sm;
+      margin-top: tokens.$spacing-sm;
       font-weight: 600;
     }
 
     &.discountCta {
-      background-color: $color-purple-60;
+      background-color: tokens.$color-purple-60;
       width: 100%;
 
-      @media screen and (min-width: $screen-sm) {
-        width: $content-sm;
+      @media screen and (min-width: tokens.$screen-sm) {
+        width: tokens.$content-sm;
       }
 
       &:hover {
-        background-color: $color-purple-70;
+        background-color: tokens.$color-purple-70;
       }
     }
 
     &.tertiaryCta {
-      margin-top: $spacing-lg;
+      margin-top: tokens.$spacing-lg;
       font-weight: 500;
     }
   }
@@ -43,13 +43,13 @@
   }
 
   .limitationsApplyLink {
-    text-decoration-color: $color-grey-30;
+    text-decoration-color: tokens.$color-grey-30;
     .limitationsApplyText {
       display: flex;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
       align-items: center;
       justify-content: center;
-      text-decoration-color: $color-grey-30;
+      text-decoration-color: tokens.$color-grey-30;
 
       svg {
         width: 13px; // width of open in new tab icon
@@ -58,18 +58,18 @@
   }
 
   .errorApplyingCoupon {
-    padding-top: $spacing-sm;
-    color: $color-red-60;
+    padding-top: tokens.$spacing-sm;
+    color: tokens.$color-red-60;
     font-weight: 500;
 
     button {
-      color: $color-red-60;
+      color: tokens.$color-red-60;
       font-weight: 500;
     }
   }
 
   small {
-    color: $color-grey-30;
+    color: tokens.$color-grey-30;
     font-weight: 400;
   }
 
@@ -79,26 +79,26 @@
 }
 
 .goToDashboardCta {
-  margin-top: $spacing-lg;
-  font: $text-body-md;
+  margin-top: tokens.$spacing-lg;
+  font: tokens.$text-body-md;
   font-weight: 500;
   border: 0;
-  padding: $spacing-md $spacing-lg;
-  border-radius: $border-radius-md;
+  padding: tokens.$spacing-md tokens.$spacing-lg;
+  border-radius: tokens.$border-radius-md;
   cursor: pointer;
   display: inline-block;
   line-height: 1;
   text-align: center;
   text-decoration: none;
-  color: $color-white;
-  background-color: $color-blue-50;
+  color: tokens.$color-white;
+  background-color: tokens.$color-blue-50;
 
   &:hover {
-    background-color: $color-blue-60;
+    background-color: tokens.$color-blue-60;
   }
 
   &:focus {
-    outline: $border-focus-width solid $color-blue-30;
+    outline: tokens.$border-focus-width solid tokens.$color-blue-30;
   }
 }
 
@@ -109,7 +109,7 @@
 .cancellationIllustrationWrapper {
   height: 200px; // height of illustration;
   width: 100%;
-  padding-bottom: $spacing-lg;
+  padding-bottom: tokens.$spacing-lg;
 
   img {
     height: 100%;
@@ -128,7 +128,7 @@
   height: 280px; //height of iframe
 }
 
-@media (min-width: $content-lg) {
+@media (min-width: tokens.$content-lg) {
   .iframeWrapper {
     height: 260px;
   }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.module.scss
index 7e85842f409..deb8dfa3727 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.module.scss
@@ -1,9 +1,9 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .dialogContents {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   .description {
     text-align: center;
@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   label {
     font-weight: 600;
@@ -22,10 +22,10 @@
   }
 
   input {
-    border: 1px solid $color-grey-30;
-    border-radius: $border-radius-sm;
-    color: $color-black;
-    padding: $spacing-sm $spacing-md;
+    border: 1px solid tokens.$color-grey-30;
+    border-radius: tokens.$border-radius-sm;
+    color: tokens.$color-black;
+    padding: tokens.$spacing-sm tokens.$spacing-md;
     width: 100%;
   }
 
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailListing.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailListing.module.scss
index 6439f1ee5d9..fbf09bc0f9b 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailListing.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailListing.module.scss
@@ -1,10 +1,10 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .emailListing {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   div {
     display: flex;
@@ -12,33 +12,33 @@
     align-items: flex-start;
 
     small {
-      font: $text-body-sm;
-      color: $color-grey-40;
+      font: tokens.$text-body-sm;
+      color: tokens.$color-grey-40;
     }
 
     .verificationCallout {
       display: flex;
       align-items: center;
-      gap: $spacing-sm;
-      padding: $spacing-sm $spacing-xs;
-      color: $color-red-60;
+      gap: tokens.$spacing-sm;
+      padding: tokens.$spacing-sm tokens.$spacing-xs;
+      color: tokens.$color-red-60;
       font-weight: 600;
     }
 
     .reverifyButton {
       display: flex;
       align-items: center;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
       padding: 0;
       text-decoration: underline;
-      color: $color-blue-50;
+      color: tokens.$color-blue-50;
 
       &:hover {
-        color: $color-blue-70;
+        color: tokens.$color-blue-70;
       }
 
       &:disabled {
-        color: $color-grey-50;
+        color: tokens.$color-grey-50;
         text-decoration: none;
         cursor: default;
       }
@@ -49,13 +49,13 @@
     flex: 0 0 auto;
     background-color: transparent;
     border-style: none;
-    border-radius: $border-radius-sm;
+    border-radius: tokens.$border-radius-sm;
     text-decoration: underline;
     font-weight: 600;
     cursor: pointer;
 
     &:hover {
-      color: $color-blue-50;
+      color: tokens.$color-blue-50;
     }
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsConfirmationDialog.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsConfirmationDialog.module.scss
index 6207822a092..1deae8e852b 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsConfirmationDialog.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsConfirmationDialog.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 // The attribute selector makes this more specific that <Button>'s direct styles,
 // so we can overwrite the font weight. Maybe it should just not be a <Button>…
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   .dismissLink {
     font-weight: 600;
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsContent.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsContent.module.scss
index 08791d1e138..e2e18041629 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsContent.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsContent.module.scss
@@ -1,49 +1,49 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .main {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  gap: $spacing-lg;
-  padding: $layout-2xs;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$layout-2xs;
 
-  @media screen and (min-width: $screen-lg) {
+  @media screen and (min-width: tokens.$screen-lg) {
     flex-direction: row;
-    padding: $layout-lg;
+    padding: tokens.$layout-lg;
   }
 
-  @media screen and (min-width: $screen-sm) {
-    padding: $layout-sm;
+  @media screen and (min-width: tokens.$screen-sm) {
+    padding: tokens.$layout-sm;
   }
 }
 
 .header {
   display: flex;
   flex-direction: column;
-  gap: $layout-xs;
+  gap: tokens.$layout-xs;
 
   h2 {
-    font: $text-title-xs;
+    font: tokens.$text-title-xs;
   }
 
   & [role="tab"]::after {
-    width: calc(100% - 24px - $spacing-xs);
+    width: calc(100% - 24px - tokens.$spacing-xs);
   }
 
-  @media screen and (min-width: $screen-lg) {
-    flex: 0 0 $content-xs;
+  @media screen and (min-width: tokens.$screen-lg) {
+    flex: 0 0 tokens.$content-xs;
   }
 }
 
 .content {
   align-items: flex-start;
-  background-color: $color-white;
-  border-radius: $border-radius-md;
-  box-shadow: $box-shadow-xs;
+  background-color: tokens.$color-white;
+  border-radius: tokens.$border-radius-md;
+  box-shadow: tokens.$box-shadow-xs;
   display: flex;
   flex-direction: column;
   flex: 1 0 0;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
   overflow: hidden;
-  padding: $spacing-lg;
+  padding: tokens.$spacing-lg;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.module.scss
index 988c27775e0..d00693d17f2 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.module.scss
@@ -1,23 +1,23 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .wrapper {
   width: 100%;
   height: 100%;
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
 }
 
 .wrapper .main {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: $spacing-2xl;
-  padding: $spacing-2xl;
+  gap: tokens.$spacing-2xl;
+  padding: tokens.$spacing-2xl;
 
   .title {
-    flex: 0 0 $content-xs;
+    flex: 0 0 tokens.$content-xs;
 
     h2 {
-      font: $text-title-xs;
+      font: tokens.$text-title-xs;
     }
   }
 
@@ -26,20 +26,20 @@
     display: flex;
     align-items: flex-start;
     flex-direction: column;
-    gap: $spacing-lg;
+    gap: tokens.$spacing-lg;
 
     h3 {
-      font: $text-title-3xs;
+      font: tokens.$text-title-3xs;
     }
 
     .description {
-      color: $color-grey-40;
+      color: tokens.$color-grey-40;
     }
 
     hr {
       align-self: stretch;
       border-style: none;
-      border-top: 1px solid $color-grey-10;
+      border-top: 1px solid tokens.$color-grey-10;
     }
   }
 }
@@ -51,7 +51,7 @@
   align-self: stretch;
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 }
 
 .cancelSection,
@@ -59,17 +59,17 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   a {
     display: flex;
     align-items: center;
-    gap: $spacing-xs;
-    color: $color-blue-50;
+    gap: tokens.$spacing-xs;
+    color: tokens.$color-blue-50;
     font-weight: 600;
 
     &:hover {
-      color: $color-blue-70;
+      color: tokens.$color-blue-70;
     }
   }
 }
@@ -77,6 +77,6 @@
 .dialogLead {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
   text-align: center;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/Panel.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/Panel.module.scss
index 0d23f2bd490..1e3fcb8c5be 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/Panel.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/Panel.module.scss
@@ -1,25 +1,25 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .panel {
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  gap: $layout-xs;
+  gap: tokens.$layout-xs;
   width: 100%;
 
   hr {
     border-style: none;
-    border-top: 1px solid $color-grey-30;
+    border-top: 1px solid tokens.$color-grey-30;
     width: 100%;
   }
 
   h3 {
-    font: $text-body-xl;
+    font: tokens.$text-body-xl;
     font-weight: 600;
 
     & + p {
-      color: $color-grey-40;
-      font: $text-body-md;
+      color: tokens.$color-grey-40;
+      font: tokens.$text-body-md;
     }
   }
 
@@ -28,20 +28,20 @@
     display: flex;
     flex-direction: column;
     font-weight: 600;
-    gap: $spacing-xs;
+    gap: tokens.$spacing-xs;
     width: 100%;
 
     h4 {
-      font: $text-body-lg;
+      font: tokens.$text-body-lg;
       font-weight: 600;
     }
 
     p {
-      color: $color-grey-40;
+      color: tokens.$color-grey-40;
       font-weight: 400;
 
-      @media screen and (min-width: $content-md) {
-        padding-right: $layout-xl;
+      @media screen and (min-width: tokens.$content-md) {
+        padding-right: tokens.$layout-xl;
       }
     }
   }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.module.scss
index 470f1ebf23b..61774d93cb1 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.module.scss
@@ -1,22 +1,22 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .emailList {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
   width: 100%;
 }
 
 .resendButtonWrapper {
-  font: $text-body-sm;
-  padding: $spacing-sm $spacing-md;
+  font: tokens.$text-body-sm;
+  padding: tokens.$spacing-sm tokens.$spacing-md;
 
   .resendButton {
     align-items: center;
     display: flex;
     font-weight: 500;
-    gap: $spacing-xs;
-    margin-top: $spacing-sm;
+    gap: tokens.$spacing-xs;
+    margin-top: tokens.$spacing-sm;
   }
 }
 
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelNotifications.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelNotifications.module.scss
index 85ab1a1170e..fc5c171fd5d 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelNotifications.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelNotifications.module.scss
@@ -1,31 +1,31 @@
-@import "../../../../../../../tokens";
+@use "../../../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $layout-xs;
+  gap: tokens.$layout-xs;
 
   .radioGroup {
     display: flex;
     flex-direction: column;
-    gap: $layout-xs;
+    gap: tokens.$layout-xs;
     justify-content: space-between;
     width: 100%;
 
     label {
       align-items: center;
       display: flex;
-      gap: $layout-xs;
+      gap: tokens.$layout-xs;
       justify-content: space-between;
 
-      @media screen and (min-width: $content-md) {
-        gap: $layout-md;
+      @media screen and (min-width: tokens.$content-md) {
+        gap: tokens.$layout-md;
       }
 
       div {
         display: flex;
         flex-direction: column;
-        gap: $spacing-xs;
+        gap: tokens.$spacing-xs;
       }
 
       svg {
@@ -36,8 +36,8 @@
     .radioInputs {
       display: flex;
       flex-direction: column;
-      font: $text-body-sm;
-      gap: $spacing-sm;
+      font: tokens.$text-body-sm;
+      gap: tokens.$spacing-sm;
     }
   }
 
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/EnterInfo.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/EnterInfo.module.scss
index c1f2ee38ce0..e418c0c4fb4 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/EnterInfo.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/EnterInfo.module.scss
@@ -1,16 +1,16 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .stepContent {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   h1 {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
 
-    @media screen and (min-width: $screen-md) {
-      font: $text-title-xs;
+    @media screen and (min-width: tokens.$screen-md) {
+      font: tokens.$text-title-xs;
     }
   }
 
@@ -21,12 +21,12 @@
   .explainerTrigger {
     background-color: transparent;
     border-style: none;
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
     text-decoration: underline;
     cursor: pointer;
 
     &:hover {
-      color: $color-blue-70;
+      color: tokens.$color-blue-70;
     }
   }
 }
@@ -34,23 +34,23 @@
 .dialogContents {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  font: $text-body-md;
-  color: $color-grey-50;
+  gap: tokens.$spacing-lg;
+  font: tokens.$text-body-md;
+  color: tokens.$color-grey-50;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 
   .list {
     list-style-position: inside;
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
     padding: 0;
 
     li::marker {
@@ -63,13 +63,13 @@
 .stepButtonWrapper {
   align-items: center;
   display: flex;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
   justify-content: flex-end;
-  padding-block: $layout-xs;
+  padding-block: tokens.$layout-xs;
   width: 100%;
 
-  @media screen and (min-width: $screen-sm) {
-    padding-block-start: $layout-sm;
+  @media screen and (min-width: tokens.$screen-sm) {
+    padding-block-start: tokens.$layout-sm;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
@@ -80,10 +80,10 @@
   align-items: flex-start;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  gap: $spacing-lg $spacing-xl;
-  padding: $spacing-lg 0;
+  gap: tokens.$spacing-lg tokens.$spacing-xl;
+  padding: tokens.$spacing-lg 0;
 
-  @media screen and (min-width: $screen-lg) {
+  @media screen and (min-width: tokens.$screen-lg) {
     // The child items in the grid are input fields. Whether items marked as
     // “optional” are shown depends on the enabled variants in the
     // `welcome-scan-optional-info` experiment.
@@ -118,7 +118,7 @@
     }
   }
 
-  @media screen and (max-width: calc($screen-lg - 1px)) {
+  @media screen and (max-width: calc(tokens.$screen-lg - 1px)) {
     grid-template-columns: 1fr;
   }
 
@@ -143,22 +143,22 @@
 .infoList {
   align-items: center;
   columns: 2;
-  font: $text-body-lg;
-  gap: $spacing-lg;
+  font: tokens.$text-body-lg;
+  gap: tokens.$spacing-lg;
   list-style: none;
   margin: 0;
   padding-inline-start: var(--exposureDetailsIconWidth);
   padding: 0;
 
-  @media screen and (max-width: $screen-md) {
+  @media screen and (max-width: tokens.$screen-md) {
     columns: 1;
   }
 }
 
 .infoItem {
   display: flex;
-  gap: $spacing-sm;
-  padding: $spacing-sm 0;
+  gap: tokens.$spacing-sm;
+  padding: tokens.$spacing-sm 0;
 
   // Force all fields related to the users name to be listed in the left column.
   &.isNameRelatedField {
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/FindExposures.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/FindExposures.module.scss
index 107f97ba0cc..4740202cc68 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/FindExposures.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/FindExposures.module.scss
@@ -1,14 +1,14 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .progressLabel {
-  margin: $spacing-xl 0 $spacing-lg;
+  margin: tokens.$spacing-xl 0 tokens.$spacing-lg;
 
   &Indicator {
-    font: $text-title-sm;
-    margin-top: $spacing-sm;
+    font: tokens.$text-title-sm;
+    margin-top: tokens.$spacing-sm;
 
     span {
-      color: $color-purple-70;
+      color: tokens.$color-purple-70;
     }
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/GetStarted.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/GetStarted.module.scss
index 281249c3068..78c785aff4f 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/GetStarted.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/GetStarted.module.scss
@@ -1,16 +1,16 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .stepContent {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   h1 {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
 
-    @media screen and (min-width: $screen-md) {
-      font: $text-title-xs;
+    @media screen and (min-width: tokens.$screen-md) {
+      font: tokens.$text-title-xs;
     }
   }
 
@@ -21,12 +21,12 @@
   .explainerTrigger {
     background-color: transparent;
     border-style: none;
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
     text-decoration: underline;
     cursor: pointer;
 
     &:hover {
-      color: $color-blue-70;
+      color: tokens.$color-blue-70;
     }
   }
 }
@@ -34,23 +34,23 @@
 .dialogContents {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  font: $text-body-md;
-  color: $color-grey-50;
+  gap: tokens.$spacing-lg;
+  font: tokens.$text-body-md;
+  color: tokens.$color-grey-50;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 
   .list {
     list-style-position: inside;
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
     padding: 0;
 
     li::marker {
@@ -63,13 +63,13 @@
 .stepButtonWrapper {
   align-items: center;
   display: flex;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
   justify-content: flex-end;
-  padding-block: $layout-xs;
+  padding-block: tokens.$layout-xs;
   width: 100%;
 
-  @media screen and (min-width: $screen-sm) {
-    padding-block-start: $layout-sm;
+  @media screen and (min-width: tokens.$screen-sm) {
+    padding-block-start: tokens.$layout-sm;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/View.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/View.module.scss
index 8dee3cfcecd..7d7248fa764 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/View.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/View.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   --backgroundImageWidth: 400px;
@@ -11,7 +11,7 @@
     --backgroundImageWidth: 200px;
     --sidebarWidth: 300px;
   }
-  @media screen and (max-width: $screen-md) {
+  @media screen and (max-width: tokens.$screen-md) {
     --sidebarWidth: 0;
   }
 
@@ -19,9 +19,9 @@
   background-image: url("./images/Scanning.svg"),
     linear-gradient(
       to right,
-      $color-grey-05,
-      $color-grey-05 var(--sidebarWidth),
-      $color-white calc(var(--sidebarWidth) + 1px)
+      tokens.$color-grey-05,
+      tokens.$color-grey-05 var(--sidebarWidth),
+      tokens.$color-white calc(var(--sidebarWidth) + 1px)
     );
   background-repeat: no-repeat;
   background-position-y: center;
@@ -35,15 +35,15 @@
   padding-inline-start: var(--sidebarWidth);
   display: flex;
   flex-direction: column;
-  gap: $spacing-xl;
+  gap: tokens.$spacing-xl;
 
   .homeLink {
     margin-inline-start: calc(-1 * var(--sidebarWidth));
     display: block;
-    padding: $spacing-md;
+    padding: tokens.$spacing-md;
 
-    @media screen and (min-width: $screen-md) {
-      padding-inline: $spacing-xl;
+    @media screen and (min-width: tokens.$screen-md) {
+      padding-inline: tokens.$spacing-xl;
     }
   }
 
@@ -52,34 +52,34 @@
     align-items: center;
     justify-content: center;
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       // Gives the steps indicator some extra white-space to match the designs
       // on desktop
       height: 20vh;
     }
 
     .steps {
-      @include no-focus-outline;
+      @include tokens.no-focus-outline;
     }
   }
 
   .stepsWrapper,
   .contentWrapper {
-    padding-inline: $spacing-lg;
+    padding-inline: tokens.$spacing-lg;
 
-    @media screen and (min-width: $screen-md) {
-      padding-inline: $spacing-2xl;
+    @media screen and (min-width: tokens.$screen-md) {
+      padding-inline: tokens.$spacing-2xl;
     }
 
-    @media screen and (min-width: $screen-lg) {
-      padding-inline: $layout-xl;
+    @media screen and (min-width: tokens.$screen-lg) {
+      padding-inline: tokens.$layout-xl;
     }
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media screen and (max-width: tokens.$screen-md) {
     .contentWrapper {
       $backgroundImageHeight: 200px;
-      padding-top: $backgroundImageHeight + $spacing-lg;
+      padding-top: $backgroundImageHeight + tokens.$spacing-lg;
       background-image: url("./images/Scanning.svg");
       background-repeat: no-repeat;
       background-position-x: center;
@@ -88,15 +88,15 @@
   }
 }
 
-@media screen and (min-width: $screen-md) {
+@media screen and (min-width: tokens.$screen-md) {
   .steps {
-    $stepGap: $spacing-2xl;
+    $stepGap: tokens.$spacing-2xl;
     padding-inline-start: 0;
     list-style-type: none;
     display: flex;
     justify-content: space-evenly;
     gap: $stepGap;
-    max-width: $content-sm;
+    max-width: tokens.$content-sm;
     position: relative;
 
     li {
@@ -106,14 +106,14 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
       text-align: center;
-      font: $text-body-xs;
+      font: tokens.$text-body-xs;
       font-weight: 600;
-      color: $color-grey-30;
+      color: tokens.$color-grey-30;
 
       img {
-        background-color: $color-grey-30;
+        background-color: tokens.$color-grey-30;
         padding: 5px;
         margin-block: $iconBorderWidth;
         width: $iconDiameter;
@@ -132,7 +132,7 @@
       // 1-indexed, i.e. it doesn't start at 0.
       &:nth-child(n + 2)::before {
         content: "";
-        background-color: $color-grey-30;
+        background-color: tokens.$color-grey-30;
         // Since the step indicators are justified using space-evenly above, and
         // since there are three of them, they are positioned at 25%, 50% and
         // 75% of the width of the container. So to draw a line between two of
@@ -165,20 +165,20 @@
       &[aria-current="step"] {
         img {
           margin-block: 0;
-          border: $iconBorderWidth solid $color-purple-10;
+          border: $iconBorderWidth solid tokens.$color-purple-10;
         }
       }
 
       &.isCompleted,
       &[aria-current="step"] {
-        color: $color-purple-70;
+        color: tokens.$color-purple-70;
 
         &::before {
-          background-color: $color-purple-10;
+          background-color: tokens.$color-purple-10;
         }
 
         img {
-          background-color: $color-purple-70;
+          background-color: tokens.$color-purple-70;
         }
       }
     }
@@ -195,13 +195,13 @@
     }
   }
 }
-@media screen and (max-width: calc($screen-md - 1px)) {
+@media screen and (max-width: calc(tokens.$screen-md - 1px)) {
   .steps {
     padding-inline-start: 0;
     list-style-type: none;
     display: flex;
     justify-content: space-evenly;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
 
     li {
       img {
@@ -210,32 +210,32 @@
         // a 0 height and a border. The images are <1kB in size, so that
         // shouldn't matter too much.
         height: 0;
-        border: 3px solid $color-grey-30;
+        border: 3px solid tokens.$color-grey-30;
         border-radius: 3px;
-        min-width: $layout-sm;
+        min-width: tokens.$layout-sm;
         width: 100%;
         pointer-events: none;
         user-select: none;
       }
 
       &[aria-current="step"] img {
-        border-color: $color-purple-10;
+        border-color: tokens.$color-purple-10;
       }
 
       &.isCompleted img {
-        border-color: $color-purple-70;
+        border-color: tokens.$color-purple-70;
       }
 
       .stepLabel {
-        padding-block: $spacing-sm;
-        padding-inline: $spacing-md;
-        color: $color-purple-70;
-        font: $text-body-xs;
+        padding-block: tokens.$spacing-sm;
+        padding-inline: tokens.$spacing-md;
+        color: tokens.$color-purple-70;
+        font: tokens.$text-body-xs;
         font-weight: 600;
       }
 
       &:not([aria-current="step"]) .stepLabel {
-        @include visually-hidden;
+        @include tokens.visually-hidden;
       }
     }
   }
diff --git a/src/app/(proper_react)/(redesign)/(public)/AccountDeletionNotification.module.scss b/src/app/(proper_react)/(redesign)/(public)/AccountDeletionNotification.module.scss
index 896a985cdfb..6f6bd9b3997 100644
--- a/src/app/(proper_react)/(redesign)/(public)/AccountDeletionNotification.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/AccountDeletionNotification.module.scss
@@ -1,35 +1,35 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .notification[role="alert"] {
   position: absolute;
-  top: $spacing-xs;
+  top: tokens.$spacing-xs;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
-  gap: $spacing-md;
-  padding: $spacing-xs;
-  min-width: $content-sm;
-  background-color: $color-blue-50;
-  color: $color-white;
-  border-radius: $border-radius-sm;
-  box-shadow: $box-shadow-sm;
+  gap: tokens.$spacing-md;
+  padding: tokens.$spacing-xs;
+  min-width: tokens.$content-sm;
+  background-color: tokens.$color-blue-50;
+  color: tokens.$color-white;
+  border-radius: tokens.$border-radius-sm;
+  box-shadow: tokens.$box-shadow-sm;
   animation: fade-in 400ms;
 
   span {
-    padding: $spacing-sm $spacing-md;
+    padding: tokens.$spacing-sm tokens.$spacing-md;
   }
 
   .dismissButton {
-    padding: $spacing-md;
+    padding: tokens.$spacing-md;
     background-color: transparent;
     border-style: none;
-    color: $color-white;
-    border-radius: $border-radius-sm;
+    color: tokens.$color-white;
+    border-radius: tokens.$border-radius-sm;
     cursor: pointer;
 
     &:hover {
-      background-color: $color-blue-60;
+      background-color: tokens.$color-blue-60;
     }
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(public)/Faq.module.scss b/src/app/(proper_react)/(redesign)/(public)/Faq.module.scss
index 5d2b823c641..a4926e5cf21 100644
--- a/src/app/(proper_react)/(redesign)/(public)/Faq.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/Faq.module.scss
@@ -1,31 +1,31 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .faqWrapper {
   display: flex;
   flex-direction: column;
-  padding: $layout-md $spacing-md;
+  padding: tokens.$layout-md tokens.$spacing-md;
   align-items: center;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   .faqTitle {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
     font-weight: 600;
   }
 
   .faqCta {
     font-weight: 600;
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
   }
 
   dl {
-    padding-top: $spacing-md;
+    padding-top: tokens.$spacing-md;
     display: flex;
     flex-direction: column;
-    gap: $layout-xs;
+    gap: tokens.$layout-xs;
     width: 100%;
 
-    @media screen and (min-width: $screen-lg) {
-      width: $content-lg;
+    @media screen and (min-width: tokens.$screen-lg) {
+      width: tokens.$content-lg;
     }
 
     .faqQuestion {
@@ -38,14 +38,14 @@
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      gap: $layout-md;
+      gap: tokens.$layout-md;
       align-items: center;
-      font: $text-body-lg;
+      font: tokens.$text-body-lg;
       cursor: pointer;
       text-align: start;
 
       svg {
-        color: $color-blue-60;
+        color: tokens.$color-blue-60;
         width: 12px;
         height: 12px;
         transform: rotate(135deg);
@@ -61,8 +61,8 @@
       display: none;
       height: 0;
 
-      @media screen and (min-width: $screen-lg) {
-        padding-right: $spacing-lg;
+      @media screen and (min-width: tokens.$screen-lg) {
+        padding-right: tokens.$spacing-lg;
       }
 
       &.expanded {
diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss b/src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss
index 1634ac11af0..ed07350d152 100644
--- a/src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss
@@ -1,4 +1,4 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .wrapper {
   display: flex;
@@ -6,35 +6,35 @@
   height: 100%;
 }
 .navbar {
-  font: $text-body-xl;
-  padding: $layout-xs;
+  font: tokens.$text-body-xl;
+  padding: tokens.$layout-xs;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
   .navbarLinksContainer {
     display: flex;
     flex-direction: column;
     .navbarLinks {
       text-decoration: none;
-      color: $color-grey-50;
+      color: tokens.$color-grey-50;
     }
   }
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     justify-content: flex-end;
     .navbarLinksContainer {
       flex-direction: row;
       justify-content: flex-end;
       .navbarLinks {
-        margin-left: $spacing-lg;
+        margin-left: tokens.$spacing-lg;
       }
     }
   }
-  @media screen and (min-width: $screen-md) {
-    padding: $layout-xs $layout-xl;
+  @media screen and (min-width: tokens.$screen-md) {
+    padding: tokens.$layout-xs tokens.$layout-xl;
     .navbarLinksContainer {
       .navbarLinks {
-        margin-left: $spacing-xl;
+        margin-left: tokens.$spacing-xl;
       }
     }
   }
@@ -45,9 +45,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  gap: $spacing-lg;
-  padding-inline: $spacing-md;
-  padding-block-start: $spacing-xl;
+  gap: tokens.$spacing-lg;
+  padding-inline: tokens.$spacing-md;
+  padding-block-start: tokens.$spacing-xl;
   width: 100%;
   background-position: bottom center;
   background-size: cover;
@@ -59,26 +59,26 @@
     rgba(0, 144, 237, 0.08) 100%
   );
 
-  @media screen and (min-width: $screen-lg) {
+  @media screen and (min-width: tokens.$screen-lg) {
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
-    gap: $layout-lg;
-    padding-inline: $layout-lg;
+    gap: tokens.$layout-lg;
+    padding-inline: tokens.$layout-lg;
 
     .heroContent {
-      flex: 1 1 $content-sm;
+      flex: 1 1 tokens.$content-sm;
     }
 
     .heroImage {
-      flex: 1 1 $content-sm;
+      flex: 1 1 tokens.$content-sm;
       align-self: flex-end;
     }
   }
 
-  @media screen and (min-width: $screen-xl) {
-    gap: $layout-xl;
-    padding-inline: $layout-xl;
+  @media screen and (min-width: tokens.$screen-xl) {
+    gap: tokens.$layout-xl;
+    padding-inline: tokens.$layout-xl;
   }
 
   .heroContent {
@@ -86,17 +86,17 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
-    gap: $spacing-md;
-    max-width: $screen-xl / 2;
+    gap: tokens.$spacing-md;
+    max-width: tokens.$screen-xl * 0.5;
 
     h1 {
-      font: $text-title-md;
-      color: $color-grey-60;
+      font: tokens.$text-title-md;
+      color: tokens.$color-grey-60;
     }
 
     p {
-      font: $text-body-lg;
-      color: $color-grey-50;
+      font: tokens.$text-body-lg;
+      color: tokens.$color-grey-50;
     }
   }
 
@@ -105,36 +105,36 @@
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    max-width: min($screen-xl / 2, 100%);
-    padding-inline: $spacing-md;
+    max-width: min(tokens.$screen-xl / 2, 100%);
+    padding-inline: tokens.$spacing-md;
 
     .heroImageBadge {
       position: absolute;
       top: 33%;
-      left: -1 * $layout-xs;
-      background-color: $color-green-90;
-      color: $color-white;
-      border-radius: $border-radius-md;
-      box-shadow: $box-shadow-sm;
+      left: -1 * tokens.$layout-xs;
+      background-color: tokens.$color-green-90;
+      color: tokens.$color-white;
+      border-radius: tokens.$border-radius-md;
+      box-shadow: tokens.$box-shadow-sm;
       aspect-ratio: 1 / 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
-      padding: $spacing-sm;
+      padding: tokens.$spacing-sm;
 
-      @media screen and (max-width: $screen-xs) {
+      @media screen and (max-width: tokens.$screen-xs) {
         display: none;
       }
 
       .nr {
-        font: $text-title-md;
+        font: tokens.$text-title-md;
       }
 
       .description {
-        font: $text-body-sm;
-        width: $layout-xl;
+        font: tokens.$text-body-sm;
+        width: tokens.$layout-xl;
       }
     }
   }
@@ -144,37 +144,37 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-lg;
-  background-color: $color-grey-05;
-  padding: $layout-lg 0;
+  gap: tokens.$spacing-lg;
+  background-color: tokens.$color-grey-05;
+  padding: tokens.$layout-lg 0;
 
   .planName,
   .lead,
   table {
-    width: $content-lg;
+    width: tokens.$content-lg;
     max-width: 100%;
   }
 
   .planName,
   .lead {
-    padding-inline: $spacing-lg;
+    padding-inline: tokens.$spacing-lg;
     text-align: center;
   }
 }
 
 .quoteWrapper {
-  padding: $layout-lg $spacing-md;
+  padding: tokens.$layout-lg tokens.$spacing-md;
   display: flex;
   justify-content: center;
 
-  @media screen and (min-width: $content-md) {
-    padding: $layout-lg;
+  @media screen and (min-width: tokens.$content-md) {
+    padding: tokens.$layout-lg;
   }
 
   .quote {
-    max-width: $content-lg;
+    max-width: tokens.$content-lg;
     text-align: center;
-    font: $text-title-3xs;
+    font: tokens.$text-title-3xs;
     line-height: 1.4;
     font-family: var(--font-inter);
     font-weight: normal;
@@ -182,7 +182,7 @@
     h2 {
       .emphasis {
         display: inline;
-        color: $color-violet-50;
+        color: tokens.$color-violet-50;
       }
     }
   }
@@ -194,52 +194,52 @@
     flex-direction: column-reverse;
     align-items: center;
     justify-content: space-between;
-    padding: $spacing-2xl $spacing-md;
-    gap: $spacing-lg;
+    padding: tokens.$spacing-2xl tokens.$spacing-md;
+    gap: tokens.$spacing-lg;
 
     &.grayBg {
-      background: $color-grey-05;
+      background: tokens.$color-grey-05;
     }
 
     .exposureTypeList {
       font-weight: 600;
-      color: $color-purple-70;
+      color: tokens.$color-purple-70;
       display: inline;
     }
 
-    @media screen and (min-width: $screen-md) {
-      padding-inline: $layout-lg;
-      padding-block: $layout-sm;
+    @media screen and (min-width: tokens.$screen-md) {
+      padding-inline: tokens.$layout-lg;
+      padding-block: tokens.$layout-sm;
       flex-direction: row;
-      gap: $spacing-xl;
+      gap: tokens.$spacing-xl;
 
       &.reverseRow {
         flex-direction: row-reverse;
       }
 
-      @media screen and (min-width: $screen-lg) {
-        padding-inline: $layout-lg;
-        gap: $layout-xl;
+      @media screen and (min-width: tokens.$screen-lg) {
+        padding-inline: tokens.$layout-lg;
+        gap: tokens.$layout-xl;
 
-        @media screen and (min-width: $screen-xl) {
-          padding-inline: $layout-xl;
+        @media screen and (min-width: tokens.$screen-xl) {
+          padding-inline: tokens.$layout-xl;
         }
       }
     }
 
     span {
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
       display: flex;
       flex-direction: column;
 
       h2 {
-        font: $text-title-xs;
+        font: tokens.$text-title-xs;
         font-family: var(--font-inter);
         font-weight: 600;
       }
 
       p {
-        font: $text-body-lg;
+        font: tokens.$text-body-lg;
       }
     }
 
@@ -251,12 +251,12 @@
       img {
         height: auto;
       }
-      @media screen and (min-width: $screen-md) {
+      @media screen and (min-width: tokens.$screen-md) {
         flex: 1;
       }
     }
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       span,
       .illustration {
         flex: 1;
@@ -269,33 +269,33 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: $spacing-2xl $spacing-md;
-  gap: $spacing-sm;
+  padding: tokens.$spacing-2xl tokens.$spacing-md;
+  gap: tokens.$spacing-sm;
   text-align: center;
 
   .pressLogos {
-    padding-top: $layout-md;
+    padding-top: tokens.$layout-md;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: $spacing-lg;
+    gap: tokens.$spacing-lg;
     align-items: center;
     justify-content: center;
 
-    @media screen and (min-width: $content-md) {
+    @media screen and (min-width: tokens.$content-md) {
       flex-direction: row;
       flex-wrap: nowrap;
     }
 
     .label {
-      @include uppercase-only-english;
+      @include tokens.uppercase-only-english;
       flex-basis: 100%;
-      font: $text-body-sm;
-      color: $color-grey-30;
+      font: tokens.$text-body-sm;
+      color: tokens.$color-grey-30;
       font-weight: 600;
       text-align: center;
 
-      @media screen and (min-width: $content-md) {
+      @media screen and (min-width: tokens.$content-md) {
         flex-basis: auto;
       }
     }
@@ -306,62 +306,62 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: $spacing-2xl $spacing-md;
-  gap: $spacing-sm;
-  background-color: $color-grey-05;
+  padding: tokens.$spacing-2xl tokens.$spacing-md;
+  gap: tokens.$spacing-sm;
+  background-color: tokens.$color-grey-05;
   text-align: center;
 
   ul {
     list-style: none;
     padding: 0;
-    gap: $spacing-md;
-    padding-top: $layout-sm;
+    gap: tokens.$spacing-md;
+    padding-top: tokens.$layout-sm;
     display: grid;
     text-align: start;
 
     li {
       display: flex;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
       align-items: center;
 
       svg {
         min-width: 20px; // width of check icon
-        color: $color-blue-50;
+        color: tokens.$color-blue-50;
       }
     }
   }
 
   .heresHowWeHelpCta {
-    margin-top: $layout-sm;
+    margin-top: tokens.$layout-sm;
   }
 }
 
 .scanLimitWrapper {
   display: flex;
   flex-direction: column;
-  gap: $layout-xs;
+  gap: tokens.$layout-xs;
 
   .info {
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       flex-direction: row;
     }
 
     b {
-      @include uppercase-only-english;
+      @include tokens.uppercase-only-english;
       white-space: nowrap;
       align-self: flex-start;
-      border-radius: $border-radius-sm;
-      font: $text-body-sm;
+      border-radius: tokens.$border-radius-sm;
+      font: tokens.$text-body-sm;
       font-weight: 600;
-      background: $color-purple-70;
-      color: $color-white;
-      padding: $spacing-sm $spacing-md;
+      background: tokens.$color-purple-70;
+      color: tokens.$color-white;
+      padding: tokens.$spacing-sm tokens.$spacing-md;
 
-      @media screen and (min-width: $screen-md) {
+      @media screen and (min-width: tokens.$screen-md) {
         align-self: center;
       }
     }
@@ -371,7 +371,7 @@
 .waitlistCta {
   align-self: flex-start;
 
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     min-width: 200px; // width of waitlist button
   }
 }
@@ -381,13 +381,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: $layout-sm;
-  background-color: $color-purple-05;
-  padding: $layout-md $spacing-md;
+  gap: tokens.$layout-sm;
+  background-color: tokens.$color-purple-05;
+  padding: tokens.$layout-md tokens.$spacing-md;
   text-align: center;
 
   .title {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
     font-family: var(--font-inter);
     font-weight: 500;
   }
@@ -401,16 +401,16 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-lg;
-  padding: $layout-md $spacing-md;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$layout-md tokens.$spacing-md;
 
   .waitlistTitle {
     text-align: center;
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
     font-weight: 600;
     line-height: 1.4;
     font-family: var(--font-inter);
-    color: $color-purple-70;
+    color: tokens.$color-purple-70;
   }
 
   a {
diff --git a/src/app/(proper_react)/(redesign)/(public)/PlansTable.module.scss b/src/app/(proper_react)/(redesign)/(public)/PlansTable.module.scss
index 815665a3f16..5105b45022a 100644
--- a/src/app/(proper_react)/(redesign)/(public)/PlansTable.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/PlansTable.module.scss
@@ -1,13 +1,13 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .plansTable {
-  border-spacing: $spacing-xl 0;
+  border-spacing: tokens.$spacing-xl 0;
   table-layout: fixed;
   width: 100%;
 
   // Set column widths:
   thead th {
-    width: calc(30% - $spacing-xl);
+    width: calc(30% - tokens.$spacing-xl);
   }
 
   // Styles for the column headings
@@ -15,21 +15,21 @@
     th.featureHeadingCell {
       text-align: start;
       vertical-align: bottom;
-      padding-block: $spacing-lg;
+      padding-block: tokens.$spacing-lg;
     }
 
     .freeHeadingCell,
     .plusHeadingCell {
-      padding-block: $spacing-2xl;
+      padding-block: tokens.$spacing-2xl;
       position: relative;
     }
 
     h3 {
-      font: $text-title-xs;
+      font: tokens.$text-title-xs;
       font-weight: 600;
 
       b {
-        color: $color-purple-70;
+        color: tokens.$color-purple-70;
       }
     }
   }
@@ -41,7 +41,7 @@
     // compromise, we only show it on individual cells, rather than on the `tr`:
     tr td,
     tr th {
-      border-top: 1px solid $color-grey-20;
+      border-top: 1px solid tokens.$color-grey-20;
       font-weight: 400;
     }
 
@@ -54,7 +54,7 @@
     /* stylelint-disable no-descending-specificity */
     th,
     td {
-      padding-block: $spacing-md;
+      padding-block: tokens.$spacing-md;
 
       .cellWrapper {
         display: flex;
@@ -63,7 +63,7 @@
 
       svg.checkIcon {
         display: inline-block;
-        color: $color-blue-50;
+        color: tokens.$color-blue-50;
       }
     }
     /* stylelint-enable no-descending-specificity */
@@ -72,23 +72,23 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: $spacing-lg;
+      gap: tokens.$spacing-lg;
       text-align: center;
-      padding-block-end: $spacing-md;
-      padding-inline: $spacing-md;
+      padding-block-end: tokens.$spacing-md;
+      padding-inline: tokens.$spacing-md;
       width: 100%;
 
       .billingPeriod {
         display: flex;
         align-items: center;
         justify-content: center;
-        min-height: $layout-md;
+        min-height: tokens.$layout-md;
         font-weight: 500;
-        color: $color-blue-50;
+        color: tokens.$color-blue-50;
       }
 
       .price {
-        font: $text-title-sm;
+        font: tokens.$text-title-sm;
       }
 
       .total {
@@ -96,17 +96,17 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        min-height: $layout-xl;
-        font: $text-body-lg;
+        min-height: tokens.$layout-xl;
+        font: tokens.$text-body-lg;
 
         .discount {
-          color: $color-purple-70;
+          color: tokens.$color-purple-70;
           font-weight: 700;
           font-style: normal;
         }
 
         .sum {
-          color: $color-grey-40;
+          color: tokens.$color-grey-40;
           font-weight: 500;
         }
       }
@@ -116,7 +116,7 @@
       }
 
       .reassurance {
-        font: $text-body-sm;
+        font: tokens.$text-body-sm;
         font-weight: 400;
       }
     }
@@ -125,9 +125,9 @@
   // Draw purple border around the Plus plan column:
   .freeCell,
   .plusCell {
-    background-color: $color-white;
+    background-color: tokens.$color-white;
     vertical-align: middle;
-    color: $color-grey-50;
+    color: tokens.$color-grey-50;
 
     .cellWrapper {
       justify-content: center;
@@ -136,27 +136,27 @@
 
   .plusCell {
     font-weight: 700;
-    border-inline: 4px solid $color-purple-70;
+    border-inline: 4px solid tokens.$color-purple-70;
   }
 
   .badge {
     position: absolute;
     top: 0;
-    background-color: $color-purple-70;
-    color: $color-white;
+    background-color: tokens.$color-purple-70;
+    color: tokens.$color-white;
     transform: translateX(-50%) translateY(-50%);
-    border-radius: $border-radius-md;
-    font: $text-body-sm;
+    border-radius: tokens.$border-radius-md;
+    font: tokens.$text-body-sm;
     font-weight: 600;
-    padding: $spacing-sm $spacing-md;
+    padding: tokens.$spacing-sm tokens.$spacing-md;
 
-    @include uppercase-only-english;
+    @include tokens.uppercase-only-english;
   }
 
   th.plusHeadingCell {
-    border-top: 4px solid $color-purple-70;
-    border-top-right-radius: $border-radius-md;
-    border-top-left-radius: $border-radius-md;
+    border-top: 4px solid tokens.$color-purple-70;
+    border-top-right-radius: tokens.$border-radius-md;
+    border-top-left-radius: tokens.$border-radius-md;
 
     &::before {
       content: "+";
@@ -164,12 +164,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: $color-purple-70;
-      color: $color-white;
-      width: $spacing-2xl;
-      height: $spacing-2xl;
-      border-radius: $border-radius-xl;
-      font: $text-title-sm;
+      background-color: tokens.$color-purple-70;
+      color: tokens.$color-white;
+      width: tokens.$spacing-2xl;
+      height: tokens.$spacing-2xl;
+      border-radius: tokens.$border-radius-xl;
+      font: tokens.$text-title-sm;
       inset-block-start: 0;
       inset-inline-start: 0;
       transform: translateX(-50%) translateY(-50%);
@@ -177,26 +177,26 @@
   }
 
   tbody tr:last-child .plusBodyCell {
-    border-bottom: 4px solid $color-purple-70;
-    border-bottom-right-radius: $border-radius-md;
-    border-bottom-left-radius: $border-radius-md;
+    border-bottom: 4px solid tokens.$color-purple-70;
+    border-bottom-right-radius: tokens.$border-radius-md;
+    border-bottom-left-radius: tokens.$border-radius-md;
   }
 
   // Draw a light-grey line around the Free plan column:
   .freeCell {
-    border-inline: 1px solid $color-grey-20;
+    border-inline: 1px solid tokens.$color-grey-20;
   }
 
   th.freeHeadingCell {
-    border-top: 1px solid $color-grey-20;
-    border-top-right-radius: $border-radius-md;
-    border-top-left-radius: $border-radius-md;
+    border-top: 1px solid tokens.$color-grey-20;
+    border-top-right-radius: tokens.$border-radius-md;
+    border-top-left-radius: tokens.$border-radius-md;
   }
 
   tbody tr:last-child td:nth-child(2) {
-    border-bottom: 1px solid $color-grey-20;
-    border-bottom-right-radius: $border-radius-md;
-    border-bottom-left-radius: $border-radius-md;
+    border-bottom: 1px solid tokens.$color-grey-20;
+    border-bottom-right-radius: tokens.$border-radius-md;
+    border-bottom-left-radius: tokens.$border-radius-md;
   }
 }
 
@@ -204,23 +204,23 @@
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;
-  gap: $spacing-xl;
-  padding: $spacing-md;
+  gap: tokens.$spacing-xl;
+  padding: tokens.$spacing-md;
 
   [role="group"] {
-    flex: 1 1 $content-sm;
+    flex: 1 1 tokens.$content-sm;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    gap: $spacing-lg;
-    background-color: $color-white;
-    border-radius: $border-radius-md;
-    padding: $spacing-2xl $spacing-md;
+    gap: tokens.$spacing-lg;
+    background-color: tokens.$color-white;
+    border-radius: tokens.$border-radius-md;
+    padding: tokens.$spacing-2xl tokens.$spacing-md;
 
     hr {
       border-style: none;
-      border-top: 1px solid $color-grey-20;
+      border-top: 1px solid tokens.$color-grey-20;
       width: 100%;
     }
 
@@ -228,14 +228,14 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
 
       h3 {
-        font: $text-title-xs;
+        font: tokens.$text-title-xs;
         font-weight: 600;
 
         b {
-          color: $color-purple-70;
+          color: tokens.$color-purple-70;
         }
       }
     }
@@ -244,21 +244,21 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: $spacing-lg;
+      gap: tokens.$spacing-lg;
 
       .cost {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: $spacing-md;
+        gap: tokens.$spacing-md;
 
         .price {
-          font: $text-title-sm;
+          font: tokens.$text-title-sm;
         }
 
         .total {
           display: block;
-          color: $color-grey-40;
+          color: tokens.$color-grey-40;
 
           em {
             font-weight: 700;
@@ -272,7 +272,7 @@
       }
 
       .reassurance {
-        font: $text-body-sm;
+        font: tokens.$text-body-sm;
         font-weight: 400;
       }
     }
@@ -280,11 +280,11 @@
     .featuresSection {
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
-      padding-inline: $spacing-sm;
+      gap: tokens.$spacing-md;
+      padding-inline: tokens.$spacing-sm;
 
       h4 {
-        font: $text-title-3xs;
+        font: tokens.$text-title-3xs;
       }
 
       .featureList {
@@ -293,26 +293,26 @@
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        gap: $spacing-lg;
+        gap: tokens.$spacing-lg;
         margin: 0;
         padding: 0;
 
         li {
           display: flex;
           align-items: flex-start;
-          gap: $spacing-xs;
+          gap: tokens.$spacing-xs;
 
           .inclusionIcon {
-            margin: $spacing-xs;
+            margin: tokens.$spacing-xs;
             flex: 1 0 auto;
           }
 
           &.included .inclusionIcon {
-            color: $color-green-90;
+            color: tokens.$color-green-90;
           }
 
           &.notIncluded .inclusionIcon {
-            color: $color-red-60;
+            color: tokens.$color-red-60;
           }
 
           button {
@@ -324,26 +324,26 @@
 
     &.plusCard {
       position: relative;
-      border: 4px solid $color-purple-70;
+      border: 4px solid tokens.$color-purple-70;
     }
 
     &.freeCard {
       position: relative;
-      border: 2px solid $color-grey-20;
+      border: 2px solid tokens.$color-grey-20;
     }
     .badge {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateY(-50%) translateX(-50%);
-      background-color: $color-purple-70;
-      color: $color-white;
-      border-radius: $border-radius-md;
-      font: $text-body-sm;
+      background-color: tokens.$color-purple-70;
+      color: tokens.$color-white;
+      border-radius: tokens.$border-radius-md;
+      font: tokens.$text-body-sm;
       font-weight: 600;
-      padding: $spacing-sm $spacing-md;
+      padding: tokens.$spacing-sm tokens.$spacing-md;
 
-      @include uppercase-only-english;
+      @include tokens.uppercase-only-english;
     }
   }
 }
@@ -352,12 +352,12 @@
   background-color: transparent;
   border-style: none;
   cursor: pointer;
-  border-radius: $border-radius-md;
+  border-radius: tokens.$border-radius-md;
   padding: 0;
 
   svg {
-    width: $layout-2xs;
-    height: $layout-2xs;
+    width: tokens.$layout-2xs;
+    height: tokens.$layout-2xs;
   }
 }
 
@@ -367,20 +367,20 @@
 }
 
 .popover {
-  box-shadow: $box-shadow-sm;
-  background-color: $color-white;
-  border: 1px solid $color-grey-20;
-  border-radius: $border-radius-md;
-  padding: $spacing-md;
-  max-width: $content-sm;
+  box-shadow: tokens.$box-shadow-sm;
+  background-color: tokens.$color-white;
+  border: 1px solid tokens.$color-grey-20;
+  border-radius: tokens.$border-radius-md;
+  padding: tokens.$spacing-md;
+  max-width: tokens.$content-sm;
 }
 
 .popoverArrow {
   position: absolute;
   width: 12px;
   height: 12px;
-  fill: $color-white;
-  stroke: $color-grey-20;
+  fill: tokens.$color-white;
+  stroke: tokens.$color-grey-20;
   stroke-width: 1px;
 
   &[data-placement="top"] {
@@ -394,12 +394,12 @@
   }
 }
 
-@media (max-width: $screen-lg) {
+@media (max-width: tokens.$screen-lg) {
   .plansTable {
     display: none;
   }
 }
-@media (min-width: calc($screen-lg + 1px)) {
+@media (min-width: calc(tokens.$screen-lg + 1px)) {
   .plansCards {
     display: none;
   }
diff --git a/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss b/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss
index e890a27dc6d..6061313f401 100644
--- a/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss
@@ -1,4 +1,4 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .wrapper {
   display: flex;
@@ -6,17 +6,17 @@
   height: 100%;
 
   // See https://fkhadra.github.io/react-toastify/how-to-style#override-css-variabless
-  --toastify-color-light: #{$color-white};
-  --toastify-color-dark: #{$color-grey-50};
-  --toastify-color-info: #{$color-blue-50};
-  --toastify-color-success: #{$color-green-50};
-  --toastify-color-warning: #{$color-yellow-50};
-  --toastify-color-error: #{$color-red-60};
-
-  --toastify-text-color-info: #{$color-white};
-  --toastify-text-color-success: #{$color-grey-50};
-  --toastify-text-color-warning: #{$color-grey-50};
-  --toastify-text-color-error: #{$color-white};
+  --toastify-color-light: #{tokens.$color-white};
+  --toastify-color-dark: #{tokens.$color-grey-50};
+  --toastify-color-info: #{tokens.$color-blue-50};
+  --toastify-color-success: #{tokens.$color-green-50};
+  --toastify-color-warning: #{tokens.$color-yellow-50};
+  --toastify-color-error: #{tokens.$color-red-60};
+
+  --toastify-text-color-info: #{tokens.$color-white};
+  --toastify-text-color-success: #{tokens.$color-grey-50};
+  --toastify-text-color-warning: #{tokens.$color-grey-50};
+  --toastify-text-color-error: #{tokens.$color-white};
 
   --toastify-toast-min-height: $layout-md;
   --toastify-toast-max-height: $layout-md;
@@ -26,12 +26,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: $spacing-md;
-  background-color: $color-white;
-  gap: $spacing-lg;
+  padding: tokens.$spacing-md;
+  background-color: tokens.$color-white;
+  gap: tokens.$spacing-lg;
 
   h1 {
-    font: $text-title-3xs;
+    font: tokens.$text-title-3xs;
   }
 
   .logo {
@@ -44,8 +44,8 @@
     flex-shrink: 0;
   }
 
-  @media screen and (min-width: $screen-md) {
-    padding: $spacing-lg $layout-xl;
+  @media screen and (min-width: tokens.$screen-md) {
+    padding: tokens.$spacing-lg tokens.$layout-xl;
   }
 }
 
diff --git a/src/app/(proper_react)/(redesign)/(public)/SignUpForm.module.scss b/src/app/(proper_react)/(redesign)/(public)/SignUpForm.module.scss
index b0f4e79ba25..68709f4150a 100644
--- a/src/app/(proper_react)/(redesign)/(public)/SignUpForm.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/SignUpForm.module.scss
@@ -1,26 +1,26 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .form {
   display: flex;
   flex-wrap: wrap;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 
   input {
     flex: 1 0 auto;
-    border-radius: $border-radius-md;
-    border: 1px solid $color-grey-20;
-    padding: $spacing-md;
-    font: $text-body-md;
+    border-radius: tokens.$border-radius-md;
+    border: 1px solid tokens.$color-grey-20;
+    padding: tokens.$spacing-md;
+    font: tokens.$text-body-md;
   }
 
   button {
     flex: 1 0 auto;
-    font: $text-body-md;
+    font: tokens.$text-body-md;
     font-weight: 600;
   }
 
   label {
-    font: $text-body-sm;
+    font: tokens.$text-body-sm;
     font-weight: 500;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(public)/breach-details/[breachName]/BreachDetailView.module.scss b/src/app/(proper_react)/(redesign)/(public)/breach-details/[breachName]/BreachDetailView.module.scss
index 4741275f62e..ee22e01ec9f 100644
--- a/src/app/(proper_react)/(redesign)/(public)/breach-details/[breachName]/BreachDetailView.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/breach-details/[breachName]/BreachDetailView.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: flex;
@@ -6,79 +6,79 @@
   align-items: center;
 
   header {
-    padding: $layout-xl $spacing-xl;
-    max-width: $content-lg;
+    padding: tokens.$layout-xl tokens.$spacing-xl;
+    max-width: tokens.$content-lg;
     text-align: center;
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
     h1 {
-      font: $text-title-sm;
+      font: tokens.$text-title-sm;
       display: flex;
       align-items: center;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
     }
 
     a {
-      color: $color-blue-50;
+      color: tokens.$color-blue-50;
       font-weight: 700;
     }
   }
 
   .overview {
     width: 100%;
-    background-color: rgba($color-purple-05, 0.2);
+    background-color: rgba(tokens.$color-purple-05, 0.2);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: $spacing-lg;
-    padding: $spacing-2xl;
+    gap: tokens.$spacing-lg;
+    padding: tokens.$spacing-2xl;
 
     h2.overviewTitle,
     .content {
-      width: $content-md;
+      width: tokens.$content-md;
       max-width: 100%;
     }
 
     h2.overviewTitle {
-      font: $text-title-sm;
+      font: tokens.$text-title-sm;
     }
 
     .content {
       display: flex;
       flex-direction: column;
-      gap: $spacing-lg;
+      gap: tokens.$spacing-lg;
 
       a[href="#delayed-reporting"] {
-        color: $color-black;
+        color: tokens.$color-black;
       }
 
       h3 {
-        font: $text-title-2xs;
+        font: tokens.$text-title-2xs;
       }
 
       .compromisedDataList ul {
         list-style-type: none;
         display: flex;
         flex-direction: column;
-        gap: $spacing-md;
+        gap: tokens.$spacing-md;
         margin: 0;
-        padding: $spacing-md;
+        padding: tokens.$spacing-md;
 
         li {
           display: flex;
-          gap: $spacing-md;
+          gap: tokens.$spacing-md;
         }
       }
 
       small {
-        color: $color-grey-50;
-        font: $text-body-sm;
+        color: tokens.$color-grey-50;
+        font: tokens.$text-body-sm;
 
         a {
           font-weight: 700;
-          color: $color-grey-50;
+          color: tokens.$color-grey-50;
 
           &:hover {
             text-decoration: none;
@@ -89,23 +89,23 @@
   }
 
   .signUp {
-    background-color: rgba($color-purple-05, 0.5);
+    background-color: rgba(tokens.$color-purple-05, 0.5);
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
-    gap: $spacing-lg;
-    padding: $spacing-2xl;
+    gap: tokens.$spacing-lg;
+    padding: tokens.$spacing-2xl;
 
     .content {
-      max-width: $content-sm;
+      max-width: tokens.$content-sm;
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
 
       h2.signUpTitle {
-        font: $text-title-3xs;
+        font: tokens.$text-title-3xs;
       }
     }
   }
@@ -116,33 +116,33 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-2xl;
-  padding: $spacing-2xl;
+  gap: tokens.$spacing-2xl;
+  padding: tokens.$spacing-2xl;
 
   h2.recommendationTitle,
   .lead,
   dl {
-    width: $content-md;
+    width: tokens.$content-md;
     max-width: 100%;
   }
 
   h2.recommendationTitle {
-    font: $text-title-xs;
+    font: tokens.$text-title-xs;
   }
 
   dl {
     display: flex;
     flex-direction: column;
-    gap: $spacing-2xl;
+    gap: tokens.$spacing-2xl;
 
     div {
       $iconWidth: 48px;
 
-      padding-inline-start: calc($iconWidth + $spacing-xl);
+      padding-inline-start: calc($iconWidth + tokens.$spacing-xl);
       position: relative;
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
 
       img {
         position: absolute;
@@ -154,21 +154,21 @@
       }
 
       dt {
-        font: $text-title-3xs;
+        font: tokens.$text-title-3xs;
       }
 
       dd {
         display: flex;
         flex-direction: column;
-        gap: $spacing-md;
-        color: $color-grey-50;
+        gap: tokens.$spacing-md;
+        color: tokens.$color-grey-50;
 
         .cta {
           font-weight: 700;
-          color: $color-blue-50;
+          color: tokens.$color-blue-50;
 
           &:hover {
-            color: $color-blue-80;
+            color: tokens.$color-blue-80;
           }
         }
       }
@@ -177,23 +177,23 @@
 }
 
 .explainers {
-  background-color: rgba($color-purple-05, 0.2);
+  background-color: rgba(tokens.$color-purple-05, 0.2);
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-2xl;
-  padding: $spacing-2xl;
+  gap: tokens.$spacing-2xl;
+  padding: tokens.$spacing-2xl;
 
   .explainer {
-    width: $content-md;
+    width: tokens.$content-md;
     max-width: 100%;
     display: flex;
     flex-direction: column;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
   }
 
   h2.explainerTitle {
-    font: $text-title-xs;
+    font: tokens.$text-title-xs;
   }
 }
diff --git a/src/app/(proper_react)/(redesign)/(public)/breaches/BreachIndexView.module.scss b/src/app/(proper_react)/(redesign)/(public)/breaches/BreachIndexView.module.scss
index 31e13ddcd38..e6148455719 100644
--- a/src/app/(proper_react)/(redesign)/(public)/breaches/BreachIndexView.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/breaches/BreachIndexView.module.scss
@@ -1,26 +1,26 @@
-@import "../../../../tokens";
+@use "../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-lg;
-  padding: $spacing-xs;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$spacing-xs;
 
-  @media (min-width: $screen-md) {
-    padding: $spacing-lg;
+  @media (min-width: tokens.$screen-md) {
+    padding: tokens.$spacing-lg;
   }
 
   header {
-    padding: $spacing-2xl $spacing-xl;
-    max-width: $content-lg;
+    padding: tokens.$spacing-2xl tokens.$spacing-xl;
+    max-width: tokens.$content-lg;
     text-align: center;
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
     h1 {
-      font: $text-title-sm;
+      font: tokens.$text-title-sm;
     }
   }
 }
@@ -29,8 +29,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $spacing-sm;
-  padding: $spacing-md;
+  gap: tokens.$spacing-sm;
+  padding: tokens.$spacing-md;
   transition: opacity ease-in 500ms;
 
   &[aria-hidden="true"] {
@@ -40,27 +40,27 @@
   }
 
   label {
-    font: $text-body-sm;
-    @include visually-hidden;
+    font: tokens.$text-body-sm;
+    @include tokens.visually-hidden;
   }
   input {
-    font: $text-body-lg;
-    padding: $spacing-sm;
+    font: tokens.$text-body-lg;
+    padding: tokens.$spacing-sm;
   }
 }
 
 .breachList {
-  width: $content-xl;
-  max-width: calc(100% - 2 * $spacing-2xl);
+  width: tokens.$content-xl;
+  max-width: calc(100% - 2 * tokens.$spacing-2xl);
   display: grid;
   align-items: start;
-  grid-gap: $spacing-2xl;
+  grid-gap: tokens.$spacing-2xl;
   list-style-type: none;
   margin: 0;
   padding: 0;
 
-  @media (min-width: $screen-md) {
-    grid-template-columns: repeat(auto-fit, minmax($content-xs, 1fr));
+  @media (min-width: tokens.$screen-md) {
+    grid-template-columns: repeat(auto-fit, minmax(tokens.$content-xs, 1fr));
   }
 
   li {
@@ -70,41 +70,43 @@
   .breachCard {
     display: flex;
     flex-direction: column;
-    box-shadow: $box-shadow-sm;
-    border-radius: $border-radius-md;
+    box-shadow: tokens.$box-shadow-sm;
+    border-radius: tokens.$border-radius-md;
     height: 100%;
     text-decoration: none;
     color: inherit;
 
     &:hover {
-      box-shadow: $box-shadow-md;
+      box-shadow: tokens.$box-shadow-md;
     }
 
     h2 {
-      background-color: $color-grey-05;
+      background-color: tokens.$color-grey-05;
       display: flex;
       align-items: center;
-      gap: $spacing-md;
-      padding: $spacing-md $spacing-lg;
-      font: $text-title-3xs;
+      gap: tokens.$spacing-md;
+      padding: tokens.$spacing-md tokens.$spacing-lg;
+      font: tokens.$text-title-3xs;
     }
 
     dl {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
-      padding: $spacing-lg $spacing-md;
+      gap: tokens.$spacing-md;
+      padding: tokens.$spacing-lg tokens.$spacing-md;
 
-      @media (min-width: $screen-sm) {
+      @media (min-width: tokens.$screen-sm) {
         // `.breachCard h2` padding + breach logo width + `.breachCard h2` gap,
         // to align the content to the title in the header:
-        padding-inline-start: calc($spacing-md + 32px + $spacing-md);
+        padding-inline-start: calc(
+          tokens.$spacing-md + 32px + tokens.$spacing-md
+        );
       }
 
       dt {
-        font: $text-body-sm;
-        color: $color-grey-50;
+        font: tokens.$text-body-sm;
+        color: tokens.$color-grey-50;
       }
 
       dd {
@@ -113,14 +115,16 @@
     }
 
     .linkDescription {
-      padding: $spacing-md;
-      color: $color-blue-50;
+      padding: tokens.$spacing-md;
+      color: tokens.$color-blue-50;
       font-weight: 700;
 
-      @media (min-width: $screen-sm) {
+      @media (min-width: tokens.$screen-sm) {
         // `.breachCard h2` padding + breach logo width + `.breachCard h2` gap,
         // to align the content to the title in the header:
-        padding-inline-start: calc($spacing-md + 32px + $spacing-md);
+        padding-inline-start: calc(
+          tokens.$spacing-md + 32px + tokens.$spacing-md
+        );
       }
 
       &:hover {
diff --git a/src/app/(proper_react)/(redesign)/(public)/how-it-works/HowItWorksView.module.scss b/src/app/(proper_react)/(redesign)/(public)/how-it-works/HowItWorksView.module.scss
index f78e12bfe3b..a2621b9082f 100644
--- a/src/app/(proper_react)/(redesign)/(public)/how-it-works/HowItWorksView.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/how-it-works/HowItWorksView.module.scss
@@ -1,33 +1,33 @@
-@import "../../../../tokens";
+@use "../../../../tokens";
 
 .brokersEmphasis {
   display: inline;
-  color: $color-violet-50;
+  color: tokens.$color-violet-50;
 }
 .breachesEmphasis {
   display: inline;
-  color: $color-purple-70;
+  color: tokens.$color-purple-70;
 }
 
 .header {
-  padding: $layout-lg $spacing-md;
+  padding: tokens.$layout-lg tokens.$spacing-md;
   display: flex;
   justify-content: center;
   span {
     width: 100%;
-    max-width: $content-xl;
+    max-width: tokens.$content-xl;
   }
-  @media screen and (min-width: $content-md) {
-    padding: $layout-lg;
+  @media screen and (min-width: tokens.$content-md) {
+    padding: tokens.$layout-lg;
   }
   .title {
-    font: $text-title-lg;
+    font: tokens.$text-title-lg;
     font-family: "Inter", sans-serif;
-    color: $color-grey-60;
+    color: tokens.$color-grey-60;
   }
   p {
-    color: $color-grey-40;
-    font: $text-body-xl;
+    color: tokens.$color-grey-40;
+    font: tokens.$text-body-xl;
   }
 }
 .sectionWrapper {
@@ -36,7 +36,7 @@
   align-items: center;
   justify-content: space-between;
   &.grayBG {
-    background: $color-grey-05;
+    background: tokens.$color-grey-05;
   }
   ul {
     list-style-type: none;
@@ -47,28 +47,28 @@
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    max-width: $content-xl;
-    @media screen and (min-width: $content-md) {
-      padding: $spacing-2xl 0;
-      gap: $spacing-lg;
+    max-width: tokens.$content-xl;
+    @media screen and (min-width: tokens.$content-md) {
+      padding: tokens.$spacing-2xl 0;
+      gap: tokens.$spacing-lg;
     }
     .introContent {
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
       display: flex;
       flex-direction: column;
-      padding: 0 $spacing-md;
+      padding: 0 tokens.$spacing-md;
       h2 {
-        color: $color-grey-60;
-        font: $text-title-md;
+        color: tokens.$color-grey-60;
+        font: tokens.$text-title-md;
         font-family: "Inter", sans-serif;
       }
       p {
-        color: $color-grey-40;
-        font: $text-body-xl;
+        color: tokens.$color-grey-40;
+        font: tokens.$text-body-xl;
       }
       .horizontalRule {
-        border: 1px solid $color-grey-20;
-        margin: $spacing-md 0;
+        border: 1px solid tokens.$color-grey-20;
+        margin: tokens.$spacing-md 0;
       }
     }
     .introCTA {
@@ -76,18 +76,18 @@
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
-      gap: $spacing-lg;
-      padding-inline: $spacing-md;
-      padding-block-start: $spacing-xl;
+      gap: tokens.$spacing-lg;
+      padding-inline: tokens.$spacing-md;
+      padding-block-start: tokens.$spacing-xl;
       width: 100%;
       h3 {
-        color: $color-grey-50;
-        font: $text-title-xs;
+        color: tokens.$color-grey-50;
+        font: tokens.$text-title-xs;
         font-family: "Inter", sans-serif;
         flex: auto;
-        max-width: $content-xl;
-        @media screen and (min-width: $screen-md) {
-          width: $content-sm;
+        max-width: tokens.$content-xl;
+        @media screen and (min-width: tokens.$screen-md) {
+          width: tokens.$content-sm;
         }
       }
     }
@@ -98,106 +98,106 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    max-width: $content-xl;
+    max-width: tokens.$content-xl;
     &.reversedStep {
       flex-direction: column-reverse;
     }
     .stepTextContainer {
-      max-width: $content-sm;
-      padding: $spacing-sm;
+      max-width: tokens.$content-sm;
+      padding: tokens.$spacing-sm;
       .stepTitle {
-        font: $text-title-2xs;
+        font: tokens.$text-title-2xs;
         font-family: "Inter", sans-serif;
-        padding-block-start: $spacing-xl;
-        @include uppercase-only-english;
+        padding-block-start: tokens.$spacing-xl;
+        @include tokens.uppercase-only-english;
       }
       .stepSubtitle {
-        color: $color-grey-50;
-        font: $text-title-xs;
+        color: tokens.$color-grey-50;
+        font: tokens.$text-title-xs;
         font-family: "Inter", sans-serif;
-        padding-block-start: $spacing-md;
+        padding-block-start: tokens.$spacing-md;
       }
       .stepBody {
-        color: $color-grey-50;
-        padding-block-start: $spacing-md;
+        color: tokens.$color-grey-50;
+        padding-block-start: tokens.$spacing-md;
       }
       .stepGroupTitleAfter1st {
-        padding-block-start: $spacing-2xl;
+        padding-block-start: tokens.$spacing-2xl;
       }
       .privateInfoRow {
         display: flex;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
-        gap: $spacing-xs;
-        padding-block-start: $spacing-sm;
+        gap: tokens.$spacing-xs;
+        padding-block-start: tokens.$spacing-sm;
         width: 100%;
         .privateInfoText {
-          color: $color-grey-50;
+          color: tokens.$color-grey-50;
         }
         img {
           width: 30px;
-          margin-top: $spacing-sm;
-          margin-right: $spacing-sm;
+          margin-top: tokens.$spacing-sm;
+          margin-right: tokens.$spacing-sm;
         }
         .boldedText {
           font-weight: 700;
         }
       }
     }
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
-      padding: $spacing-md;
-      gap: $spacing-lg;
+      padding: tokens.$spacing-md;
+      gap: tokens.$spacing-lg;
       &.reversedStep {
         flex-direction: row;
       }
       .stepTextContainer {
-        max-width: $content-xs;
+        max-width: tokens.$content-xs;
       }
       img {
-        max-width: $content-xs;
+        max-width: tokens.$content-xs;
       }
     }
-    @media screen and (min-width: $screen-lg) {
-      padding: $spacing-xs;
+    @media screen and (min-width: tokens.$screen-lg) {
+      padding: tokens.$spacing-xs;
       .stepTextContainer {
-        max-width: $content-sm;
+        max-width: tokens.$content-sm;
       }
       img {
-        max-width: $content-sm;
+        max-width: tokens.$content-sm;
       }
     }
-    @media screen and (min-width: $screen-xl) {
-      padding: $spacing-xs;
+    @media screen and (min-width: tokens.$screen-xl) {
+      padding: tokens.$spacing-xs;
       .stepTextContainer {
-        max-width: $content-md;
+        max-width: tokens.$content-md;
       }
       img {
-        max-width: $content-sm;
+        max-width: tokens.$content-sm;
       }
     }
   }
   .sectionCTAButton {
     display: grid;
-    max-width: $content-sm;
+    max-width: tokens.$content-sm;
     width: 100%;
-    margin: $spacing-md 0;
+    margin: tokens.$spacing-md 0;
     button {
-      padding: $spacing-md $spacing-xl;
+      padding: tokens.$spacing-md tokens.$spacing-xl;
     }
     a {
-      margin-inline: $spacing-lg;
+      margin-inline: tokens.$spacing-lg;
     }
     &.breachesCTAButton {
-      padding-inline: $spacing-md;
-      margin-bottom: $spacing-xl;
+      padding-inline: tokens.$spacing-md;
+      margin-bottom: tokens.$spacing-xl;
     }
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       width: unset;
       max-width: unset;
       a {
@@ -205,21 +205,21 @@
       }
     }
   }
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: unset;
-    margin-bottom: $layout-lg;
+    margin-bottom: tokens.$layout-lg;
     a {
-      margin: $layout-md;
+      margin: tokens.$layout-md;
     }
     button {
-      margin: $layout-md;
+      margin: tokens.$layout-md;
     }
   }
-  @media screen and (min-width: $screen-lg) {
-    padding-inline: $layout-lg;
+  @media screen and (min-width: tokens.$screen-lg) {
+    padding-inline: tokens.$layout-lg;
   }
 }
 .footerSection {
@@ -227,40 +227,41 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: $color-purple-05;
-  padding: $spacing-2xl $spacing-md;
+  background: tokens.$color-purple-05;
+  padding: tokens.$spacing-2xl tokens.$spacing-md;
   .footerSectionCTA {
-    font: $text-title-2xs;
+    font: tokens.$text-title-2xs;
     font-family: var(--font-inter);
     font-weight: 500;
-    margin-bottom: $spacing-xl;
+    margin-bottom: tokens.$spacing-xl;
   }
   .footerSectionCTAInput {
     display: flex;
     flex-wrap: wrap;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
     input {
       flex: 1 0 auto;
-      border-radius: $border-radius-md;
-      border: 1px solid $color-grey-20;
-      padding: $spacing-sm;
-      font: $text-body-md;
+      border-radius: tokens.$border-radius-md;
+      border: 1px solid tokens.$color-grey-20;
+      padding: tokens.$spacing-sm;
+      font: tokens.$text-body-md;
     }
     button {
       flex: 1 0 auto;
-      font: $text-body-md;
+      font: tokens.$text-body-md;
       font-weight: 600;
     }
   }
   .note {
-    color: $color-grey-40;
-    font: $text-body-sm;
-    margin-top: $spacing-sm;
+    color: tokens.$color-grey-40;
+    font: tokens.$text-body-sm;
+    margin-top: tokens.$spacing-sm;
   }
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     .footerSectionCTAInput {
       input {
-        padding: $spacing-md $spacing-xl $spacing-md $spacing-md;
+        padding: tokens.$spacing-md tokens.$spacing-xl tokens.$spacing-md
+          tokens.$spacing-md;
       }
     }
   }
diff --git a/src/app/(proper_react)/(redesign)/(public)/limitations-apply/LimitationsApply.module.scss b/src/app/(proper_react)/(redesign)/(public)/limitations-apply/LimitationsApply.module.scss
index 3d5b5e5e452..dbef99c7cdd 100644
--- a/src/app/(proper_react)/(redesign)/(public)/limitations-apply/LimitationsApply.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/limitations-apply/LimitationsApply.module.scss
@@ -1,35 +1,35 @@
-@import "../../../../tokens";
+@use "../../../../tokens";
 
 .limitationsApplyContainer {
   display: flex;
-  padding: $layout-md $spacing-sm;
+  padding: tokens.$layout-md tokens.$spacing-sm;
 
   .limitationsApplyWrapper {
     display: flex;
     flex-direction: column;
-    gap: $layout-md;
+    gap: tokens.$layout-md;
     align-items: center;
     margin: 0 auto;
 
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: tokens.$screen-md) {
       flex-direction: row;
     }
 
     .limitationsApplyDescription {
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
 
       h1 {
-        font: $text-title-sm;
+        font: tokens.$text-title-sm;
         font-family: var(--font-inter);
       }
 
       aside {
         width: fit-content;
-        background-color: $color-purple-10;
-        border-radius: $border-radius-lg;
-        padding: $spacing-sm $spacing-md;
+        background-color: tokens.$color-purple-10;
+        border-radius: tokens.$border-radius-lg;
+        padding: tokens.$spacing-sm tokens.$spacing-md;
       }
     }
   }
diff --git a/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReport.module.scss b/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReport.module.scss
index f92257189ae..0e57f5d8ea1 100644
--- a/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReport.module.scss
+++ b/src/app/(proper_react)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReport.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .unSubscribeMonthlyReportContainer {
   margin: 0 auto;
@@ -6,25 +6,25 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: $spacing-lg $spacing-sm;
-  gap: $spacing-lg;
+  padding: tokens.$spacing-lg tokens.$spacing-sm;
+  gap: tokens.$spacing-lg;
   text-align: center;
 
-  @media screen and (min-width: $screen-md) {
-    max-width: $content-lg;
+  @media screen and (min-width: tokens.$screen-md) {
+    max-width: tokens.$content-lg;
   }
 
   h1 {
-    font: $text-title-md;
+    font: tokens.$text-title-md;
   }
 
   .cta {
-    max-width: $content-xs;
+    max-width: tokens.$content-xs;
   }
 }
 
 .tryAgain {
-  color: $color-white;
+  color: tokens.$color-white;
   font-weight: 600;
   text-decoration: underline;
   background: none;
diff --git a/src/app/(proper_react)/(redesign)/MobileShell.module.scss b/src/app/(proper_react)/(redesign)/MobileShell.module.scss
index 418e76d18c6..84955521f5f 100644
--- a/src/app/(proper_react)/(redesign)/MobileShell.module.scss
+++ b/src/app/(proper_react)/(redesign)/MobileShell.module.scss
@@ -1,4 +1,4 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .wrapper {
   display: flex;
@@ -9,15 +9,15 @@
 .header {
   display: none;
 
-  @media screen and (max-width: $screen-xl) {
+  @media screen and (max-width: tokens.$screen-xl) {
     position: sticky;
-    background-color: $color-white;
-    box-shadow: $box-shadow-sm;
+    background-color: tokens.$color-white;
+    box-shadow: tokens.$box-shadow-sm;
     width: 100%;
     display: flex;
     align-items: center;
-    gap: $spacing-sm;
-    padding: $spacing-xs $spacing-sm;
+    gap: tokens.$spacing-sm;
+    padding: tokens.$spacing-xs tokens.$spacing-sm;
     // Overlay `.nonHeader` so that the box-shadow of this element
     // is not covered.
     z-index: 1;
@@ -34,7 +34,7 @@
         justify-content: center;
         background-color: transparent;
         border-style: none;
-        padding: $spacing-md;
+        padding: tokens.$spacing-md;
         cursor: pointer;
 
         svg {
@@ -43,7 +43,7 @@
         }
 
         &:hover svg {
-          color: $color-blue-50;
+          color: tokens.$color-blue-50;
         }
       }
     }
@@ -85,7 +85,7 @@
     display: none;
   }
 
-  @media screen and (max-width: $screen-xl) {
+  @media screen and (max-width: tokens.$screen-xl) {
     .hasOpenMenu & .mainMenuLayer {
       display: block;
       position: sticky;
@@ -97,8 +97,8 @@
       .mainMenu {
         align-items: center;
         display: flex;
-        background-color: $color-white;
-        box-shadow: $box-shadow-sm;
+        background-color: tokens.$color-white;
+        box-shadow: tokens.$box-shadow-sm;
         flex-direction: column;
 
         ul {
@@ -110,33 +110,33 @@
         a,
         a:visited {
           display: block;
-          padding: $spacing-sm $spacing-lg;
-          color: $color-grey-40;
+          padding: tokens.$spacing-sm tokens.$spacing-lg;
+          color: tokens.$color-grey-40;
           font-weight: 500;
-          border-top: 1px solid $color-grey-10;
+          border-top: 1px solid tokens.$color-grey-10;
           text-decoration: none;
 
           &.isActive {
-            color: $color-purple-70;
+            color: tokens.$color-purple-70;
           }
 
           &:hover {
-            background-color: $color-purple-50;
-            color: $color-white;
+            background-color: tokens.$color-purple-50;
+            color: tokens.$color-white;
             text-decoration: underline;
           }
 
           // The `a` and `a:visited` violate this rule, but are safe:
           // stylelint-disable-next-line no-descending-specificity
           &:focus {
-            background-color: $color-blue-50;
-            color: $color-white;
+            background-color: tokens.$color-blue-50;
+            color: tokens.$color-white;
             outline: none;
           }
         }
 
         .subMenu {
-          padding-left: $layout-xs;
+          padding-left: tokens.$layout-xs;
 
           // The `a` and `a:visited` violate this rule, but are safe:
           // stylelint-disable-next-line no-descending-specificity
@@ -145,16 +145,16 @@
             border-top: none;
 
             &.isActive {
-              color: $color-purple-40;
+              color: tokens.$color-purple-40;
               text-decoration: underline;
 
               &:hover {
-                color: $color-purple-70;
+                color: tokens.$color-purple-70;
               }
             }
 
             &:hover {
-              color: $color-grey-40;
+              color: tokens.$color-grey-40;
               background: none;
               text-decoration: underline;
             }
@@ -163,8 +163,8 @@
       }
 
       .premiumCta {
-        margin: $spacing-md;
-        min-width: $screen-xs;
+        margin: tokens.$spacing-md;
+        min-width: tokens.$screen-xs;
 
         & > button {
           width: 100%;
diff --git a/src/app/(proper_react)/(redesign)/Shell.module.scss b/src/app/(proper_react)/(redesign)/Shell.module.scss
index 71ffab8a5b5..9e87242df30 100644
--- a/src/app/(proper_react)/(redesign)/Shell.module.scss
+++ b/src/app/(proper_react)/(redesign)/Shell.module.scss
@@ -1,4 +1,4 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .wrapper {
   height: 100%;
@@ -8,29 +8,29 @@
 .mainMenu {
   display: none;
 
-  @media screen and (min-width: $screen-xl) {
+  @media screen and (min-width: tokens.$screen-xl) {
     flex: 0 0 auto;
     display: flex;
     flex-direction: column;
 
     .homeLink {
-      height: $tab-bar-height;
+      height: tokens.$tab-bar-height;
       display: flex;
       align-items: center;
-      padding: $spacing-xl $spacing-2xl;
-      border-bottom: 1px solid $color-grey-10;
+      padding: tokens.$spacing-xl tokens.$spacing-2xl;
+      border-bottom: 1px solid tokens.$color-grey-10;
 
       &:hover {
-        box-shadow: $box-shadow-sm;
+        box-shadow: tokens.$box-shadow-sm;
       }
 
       &:focus {
-        border-bottom-color: $color-blue-50;
+        border-bottom-color: tokens.$color-blue-50;
       }
 
       img {
         width: auto;
-        height: $layout-sm;
+        height: tokens.$layout-sm;
       }
     }
 
@@ -42,19 +42,19 @@
 
       a {
         display: block;
-        padding: $spacing-md $spacing-lg;
-        color: $color-grey-40;
+        padding: tokens.$spacing-md tokens.$spacing-lg;
+        color: tokens.$color-grey-40;
         font-weight: 500;
-        border-bottom: 1px solid $color-grey-10;
+        border-bottom: 1px solid tokens.$color-grey-10;
         text-decoration: none;
 
         &.isActive {
-          color: $color-purple-70;
+          color: tokens.$color-purple-70;
         }
 
         &:hover {
-          background-color: $color-purple-50;
-          color: $color-white;
+          background-color: tokens.$color-purple-50;
+          color: tokens.$color-white;
           text-decoration: underline;
         }
       }
@@ -74,18 +74,18 @@
 }
 
 .footer {
-  background-color: $color-black;
+  background-color: tokens.$color-black;
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: $spacing-xl;
-  padding-block: $spacing-xl;
+  gap: tokens.$spacing-xl;
+  padding-block: tokens.$spacing-xl;
 
   .mozillaLink {
-    padding: 0 $spacing-md;
+    padding: 0 tokens.$spacing-md;
 
     &:hover img {
-      background-color: $color-purple-50;
+      background-color: tokens.$color-purple-50;
     }
   }
 
@@ -98,18 +98,18 @@
 
     a {
       display: block;
-      color: $color-grey-05;
+      color: tokens.$color-grey-05;
       font-weight: 500;
       text-decoration: none;
-      padding: $spacing-sm $spacing-md;
+      padding: tokens.$spacing-sm tokens.$spacing-md;
 
       &:hover {
-        color: $color-purple-50;
+        color: tokens.$color-purple-50;
       }
     }
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media screen and (min-width: tokens.$screen-lg) {
     flex-direction: row;
     align-items: center;
     padding-block: 0;
@@ -117,11 +117,11 @@
     .externalLinks {
       flex-direction: row;
       justify-content: flex-end;
-      padding: 0 $spacing-2xl;
+      padding: 0 tokens.$spacing-2xl;
     }
 
     .mozillaLink {
-      padding: $spacing-md $spacing-2xl;
+      padding: tokens.$spacing-md tokens.$spacing-2xl;
     }
   }
 }
diff --git a/src/app/components/client/BillingPeriod.module.scss b/src/app/components/client/BillingPeriod.module.scss
index 604c60e85e6..a35ecc2c486 100644
--- a/src/app/components/client/BillingPeriod.module.scss
+++ b/src/app/components/client/BillingPeriod.module.scss
@@ -1,32 +1,32 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .toggleContainer {
-  background-color: $color-grey-10;
-  border-radius: $border-radius-xl;
-  border: 1px solid $color-grey-30;
-  padding: $spacing-sm;
+  background-color: tokens.$color-grey-10;
+  border-radius: tokens.$border-radius-xl;
+  border: 1px solid tokens.$color-grey-30;
+  padding: tokens.$spacing-sm;
   display: flex;
   align-items: center;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .option {
-    border-radius: $border-radius-xl;
-    padding: $spacing-xs $spacing-md;
+    border-radius: tokens.$border-radius-xl;
+    padding: tokens.$spacing-xs tokens.$spacing-md;
     font-weight: 500;
-    color: $color-grey-50;
+    color: tokens.$color-grey-50;
     cursor: pointer;
 
     &.isFocused {
-      outline: 4px solid $color-purple-70;
-      background-color: $color-purple-10;
+      outline: 4px solid tokens.$color-purple-70;
+      background-color: tokens.$color-purple-10;
     }
     &:hover {
-      background-color: $color-purple-20;
+      background-color: tokens.$color-purple-20;
     }
 
     &.isSelected {
-      background-color: $color-white;
-      color: $color-blue-50;
+      background-color: tokens.$color-white;
+      color: tokens.$color-blue-50;
     }
   }
 }
diff --git a/src/app/components/client/Button.module.scss b/src/app/components/client/Button.module.scss
index 54b92667c2d..a704a5810db 100644
--- a/src/app/components/client/Button.module.scss
+++ b/src/app/components/client/Button.module.scss
@@ -1,11 +1,11 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .button {
-  font: $text-body-md;
+  font: tokens.$text-body-md;
   font-weight: 500;
   border: 0;
-  padding: $spacing-md $spacing-lg;
-  border-radius: $border-radius-md;
+  padding: tokens.$spacing-md tokens.$spacing-lg;
+  border-radius: tokens.$border-radius-md;
   cursor: pointer;
   display: inline-block;
   line-height: 1;
@@ -28,13 +28,13 @@
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
     &.primary {
-      border: 4px solid $color-white;
-      border-color: $color-white transparent transparent transparent;
+      border: 4px solid tokens.$color-white;
+      border-color: tokens.$color-white transparent transparent transparent;
     }
 
     &.secondary {
-      border: 4px solid $color-purple-70;
-      border-color: $color-purple-70 transparent transparent transparent;
+      border: 4px solid tokens.$color-purple-70;
+      border-color: tokens.$color-purple-70 transparent transparent transparent;
     }
   }
   .ldsRing div:nth-child(1) {
@@ -56,84 +56,84 @@
   }
 
   &.primary {
-    color: $color-white;
-    background-color: $color-purple-70;
+    color: tokens.$color-white;
+    background-color: tokens.$color-purple-70;
 
     &:hover {
-      background-color: $color-purple-80;
+      background-color: tokens.$color-purple-80;
     }
 
     &:focus {
-      outline: $border-focus-width solid $color-purple-30;
+      outline: tokens.$border-focus-width solid tokens.$color-purple-30;
     }
 
     &.destructive {
-      color: $color-white;
-      background-color: $color-red-60;
+      color: tokens.$color-white;
+      background-color: tokens.$color-red-60;
 
       &:hover {
-        background-color: $color-red-70;
+        background-color: tokens.$color-red-70;
       }
 
       &:focus {
-        outline: $border-focus-width solid $color-red-30;
+        outline: tokens.$border-focus-width solid tokens.$color-red-30;
       }
     }
 
     &.disabled {
-      background: $color-grey-20;
+      background: tokens.$color-grey-20;
       pointer-events: none;
     }
   }
 
   &.secondary {
     font-weight: 400;
-    color: $color-purple-70;
-    box-shadow: inset 0 0 0 2px $color-purple-70;
+    color: tokens.$color-purple-70;
+    box-shadow: inset 0 0 0 2px tokens.$color-purple-70;
     background-color: transparent;
 
     &:hover {
-      background-color: $color-purple-70;
-      color: $color-white;
+      background-color: tokens.$color-purple-70;
+      color: tokens.$color-white;
 
       .ldsRing div {
         &.secondary {
-          border: 4px solid $color-white;
-          border-color: $color-white transparent transparent transparent;
+          border: 4px solid tokens.$color-white;
+          border-color: tokens.$color-white transparent transparent transparent;
         }
       }
     }
 
     &.destructive {
-      color: $color-red-70;
-      box-shadow: inset 0 0 0 2px $color-red-70;
+      color: tokens.$color-red-70;
+      box-shadow: inset 0 0 0 2px tokens.$color-red-70;
 
       &:hover {
-        background-color: $color-red-70;
-        color: $color-white;
+        background-color: tokens.$color-red-70;
+        color: tokens.$color-white;
       }
     }
 
     &.disabled {
-      color: $color-grey-20;
+      color: tokens.$color-grey-20;
       background: transparent;
-      box-shadow: inset 0 0 0 2px $color-grey-20;
+      box-shadow: inset 0 0 0 2px tokens.$color-grey-20;
       pointer-events: none;
     }
   }
 
   &.tertiary {
     background: none;
-    color: $color-purple-70;
+    color: tokens.$color-purple-70;
 
     &:hover {
-      background-color: rgba($color-purple-70, 0.2);
+      background-color: rgba(tokens.$color-purple-70, 0.2);
     }
   }
 
   &.link {
     background: none;
-    color: $color-purple-50;
+    color: tokens.$color-purple-50;
     font: inherit;
     padding: 0;
     text-decoration: underline;
@@ -141,11 +141,11 @@
 
   &.icon {
     background: none;
-    color: $color-grey-50;
-    padding: $spacing-md;
+    color: tokens.$color-grey-50;
+    padding: tokens.$spacing-md;
 
     &:hover {
-      background-color: $color-grey-05;
+      background-color: tokens.$color-grey-05;
     }
   }
 
@@ -156,14 +156,14 @@
 
   &.small {
     line-height: 1.5;
-    padding: $spacing-sm $spacing-md;
+    padding: tokens.$spacing-sm tokens.$spacing-md;
 
     &.icon {
-      padding: $spacing-sm;
+      padding: tokens.$spacing-sm;
     }
   }
 
   &.wide {
-    padding: $spacing-md $spacing-2xl;
+    padding: tokens.$spacing-md tokens.$spacing-2xl;
   }
 }
diff --git a/src/app/components/client/Chart.module.scss b/src/app/components/client/Chart.module.scss
index 385e86c6692..aa7f8880359 100644
--- a/src/app/components/client/Chart.module.scss
+++ b/src/app/components/client/Chart.module.scss
@@ -1,12 +1,12 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .chartContainer {
   text-align: center;
   display: flex;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
   flex-direction: column;
 
-  @media screen and (min-width: $screen-lg) {
+  @media screen and (min-width: tokens.$screen-lg) {
     align-items: flex-end;
   }
 
@@ -14,12 +14,12 @@
     text-align: center;
     display: flex;
     align-items: center;
-    gap: $spacing-xs;
-    font: $text-body-xs;
+    gap: tokens.$spacing-xs;
+    font: tokens.$text-body-xs;
     font-style: italic;
 
     button {
-      @include question-mark-circle-btn;
+      @include tokens.question-mark-circle-btn;
     }
   }
 }
@@ -27,29 +27,29 @@
 .modalBodyContent {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 }
 
 .gutter {
-  stroke: $color-white;
+  stroke: tokens.$color-white;
 }
 
 .chartAndLegendWrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
-  @media screen and (min-width: $screen-lg) {
+  @media screen and (min-width: tokens.$screen-lg) {
     flex-direction: row;
-    gap: $spacing-xl;
+    gap: tokens.$spacing-xl;
   }
 
   .chart {
@@ -77,16 +77,16 @@
     align-self: center;
     flex-direction: column;
     display: flex;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
 
     .prompt {
-      font: $text-body-xs;
+      font: tokens.$text-body-xs;
       display: flex;
       text-align: start;
       flex-direction: column;
-      gap: $spacing-xs;
-      border: 1px solid $color-purple-70;
-      padding: $spacing-sm;
+      gap: tokens.$spacing-xs;
+      border: 1px solid tokens.$color-purple-70;
+      padding: tokens.$spacing-sm;
       align-items: flex-start;
     }
 
@@ -107,12 +107,12 @@
 
     tbody tr {
       text-align: start;
-      color: $color-grey-40;
-      font: $text-body-xs;
+      color: tokens.$color-grey-40;
+      font: tokens.$text-body-xs;
 
       td {
-        padding-block: $spacing-xs;
-        padding-inline: $spacing-xs;
+        padding-block: tokens.$spacing-xs;
+        padding-inline: tokens.$spacing-xs;
       }
 
       svg {
@@ -126,123 +126,123 @@
 /* stylelint-disable no-descending-specificity */
 // We start at 2, because element 1 is .gutter
 .slice:nth-child(2) {
-  stroke: $color-purple-90;
+  stroke: tokens.$color-purple-90;
 }
 .legend tbody tr:nth-child(1) {
   .chartAndLegendWrapper:has(.slice:nth-child(2):hover) & {
-    color: $color-purple-90;
+    color: tokens.$color-purple-90;
   }
 
   rect {
-    fill: $color-purple-90;
+    fill: tokens.$color-purple-90;
   }
 }
 .slice:nth-child(3) {
-  stroke: $color-purple-70;
+  stroke: tokens.$color-purple-70;
 }
 .legend tbody tr:nth-child(2) {
   .chartAndLegendWrapper:has(.slice:nth-child(3):hover) & {
-    color: $color-purple-70;
+    color: tokens.$color-purple-70;
   }
 
   rect {
-    fill: $color-purple-70;
+    fill: tokens.$color-purple-70;
   }
 }
 .slice:nth-child(4) {
-  stroke: $color-purple-50;
+  stroke: tokens.$color-purple-50;
 }
 .legend tbody tr:nth-child(3) {
   .chartAndLegendWrapper:has(.slice:nth-child(4):hover) & {
-    color: $color-purple-50;
+    color: tokens.$color-purple-50;
   }
 
   rect {
-    fill: $color-purple-50;
+    fill: tokens.$color-purple-50;
   }
 }
 .slice:nth-child(5) {
-  stroke: $color-purple-30;
+  stroke: tokens.$color-purple-30;
 }
 .legend tbody tr:nth-child(4) {
   .chartAndLegendWrapper:has(.slice:nth-child(5):hover) & {
-    color: $color-purple-30;
+    color: tokens.$color-purple-30;
   }
 
   rect {
-    fill: $color-purple-30;
+    fill: tokens.$color-purple-30;
   }
 }
 .slice:nth-child(6) {
-  stroke: $color-purple-10;
+  stroke: tokens.$color-purple-10;
 }
 .legend tbody tr:nth-child(5) {
   .chartAndLegendWrapper:has(.slice:nth-child(6):hover) & {
-    color: $color-purple-10;
+    color: tokens.$color-purple-10;
   }
 
   rect {
-    fill: $color-purple-10;
+    fill: tokens.$color-purple-10;
   }
 }
 .slice:nth-child(7) {
-  stroke: $color-purple-80;
+  stroke: tokens.$color-purple-80;
 }
 .legend tbody tr:nth-child(6) {
   .chartAndLegendWrapper:has(.slice:nth-child(7):hover) & {
-    color: $color-purple-80;
+    color: tokens.$color-purple-80;
   }
 
   rect {
-    fill: $color-purple-80;
+    fill: tokens.$color-purple-80;
   }
 }
 .slice:nth-child(8) {
-  stroke: $color-purple-60;
+  stroke: tokens.$color-purple-60;
 }
 .legend tbody tr:nth-child(7) {
   .chartAndLegendWrapper:has(.slice:nth-child(8):hover) & {
-    color: $color-purple-60;
+    color: tokens.$color-purple-60;
   }
 
   rect {
-    fill: $color-purple-60;
+    fill: tokens.$color-purple-60;
   }
 }
 .slice:nth-child(9) {
-  stroke: $color-purple-40;
+  stroke: tokens.$color-purple-40;
 }
 .legend tbody tr:nth-child(8) {
   .chartAndLegendWrapper:has(.slice:nth-child(9):hover) & {
-    color: $color-purple-40;
+    color: tokens.$color-purple-40;
   }
 
   rect {
-    fill: $color-purple-40;
+    fill: tokens.$color-purple-40;
   }
 }
 .slice:nth-child(10) {
-  stroke: $color-purple-20;
+  stroke: tokens.$color-purple-20;
 }
 .legend tbody tr:nth-child(9) {
   .chartAndLegendWrapper:has(.slice:nth-child(10):hover) & {
-    color: $color-purple-20;
+    color: tokens.$color-purple-20;
   }
 
   rect {
-    fill: $color-purple-20;
+    fill: tokens.$color-purple-20;
   }
 }
 .slice:nth-child(11) {
-  stroke: $color-violet-90;
+  stroke: tokens.$color-violet-90;
 }
 .legend tbody tr:nth-child(10) {
   .chartAndLegendWrapper:has(.slice:nth-child(11):hover) & {
-    color: $color-violet-90;
+    color: tokens.$color-violet-90;
   }
 
   rect {
-    fill: $color-violet-90;
+    fill: tokens.$color-violet-90;
   }
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/app/components/client/ComboBox.module.scss b/src/app/components/client/ComboBox.module.scss
index daabde6c62e..ea347d36390 100644
--- a/src/app/components/client/ComboBox.module.scss
+++ b/src/app/components/client/ComboBox.module.scss
@@ -1,6 +1,6 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .popoverList {
-  border-radius: $border-radius-sm;
-  box-shadow: $box-shadow-sm;
+  border-radius: tokens.$border-radius-sm;
+  box-shadow: tokens.$box-shadow-sm;
 }
diff --git a/src/app/components/client/DataBrokerProfiles.module.scss b/src/app/components/client/DataBrokerProfiles.module.scss
index f82d4037105..b88d4672ec8 100644
--- a/src/app/components/client/DataBrokerProfiles.module.scss
+++ b/src/app/components/client/DataBrokerProfiles.module.scss
@@ -1,4 +1,4 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .dataBrokerProfileCardsWapper {
   text-align: center;
@@ -6,10 +6,10 @@
 
 // This view shows the first X many data broker profile cards based on the break point. It uses nth-child to set/unset visibility.
 .dataBrokerProfileCards {
-  padding: $spacing-md 0;
+  padding: tokens.$spacing-md 0;
   display: grid;
   grid-template-columns: 1fr;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
   list-style: none;
   width: 100%;
 
@@ -27,12 +27,12 @@
   &.showAll {
     li {
       display: unset;
-      @media screen and (min-width: $screen-md) {
+      @media screen and (min-width: tokens.$screen-md) {
         &:nth-child(n + 5) {
           display: unset;
         }
       }
-      @media screen and (min-width: $screen-xl) {
+      @media screen and (min-width: tokens.$screen-xl) {
         &:nth-child(n + 7),
         &:nth-child(n + 9) {
           display: unset;
@@ -41,11 +41,11 @@
     }
   }
 
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     grid-template-columns: 1fr 1fr;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     grid-template-columns: 1fr 1fr 1fr;
 
     li:nth-child(n + 5) {
@@ -60,12 +60,12 @@
 }
 
 .dataBrokerProfileCard {
-  background-color: $color-white;
-  box-shadow: $box-shadow-sm;
-  border-radius: $border-radius-sm;
+  background-color: tokens.$color-white;
+  box-shadow: tokens.$box-shadow-sm;
+  border-radius: tokens.$border-radius-sm;
   text-align: center;
-  padding: $spacing-md $spacing-sm $spacing-md;
-  font: $text-body-sm;
+  padding: tokens.$spacing-md tokens.$spacing-sm tokens.$spacing-md;
+  font: tokens.$text-body-sm;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -84,11 +84,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
   }
 
   .openInNewTab {
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
     display: inline-block;
   }
 }
@@ -100,7 +100,7 @@
   display: inline-flex;
   justify-items: center;
   align-items: center;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
   transition: transform 0.2s ease;
   cursor: pointer;
 
diff --git a/src/app/components/client/ExposuresFilter.module.scss b/src/app/components/client/ExposuresFilter.module.scss
index 55214b9c353..627e7ded12d 100644
--- a/src/app/components/client/ExposuresFilter.module.scss
+++ b/src/app/components/client/ExposuresFilter.module.scss
@@ -1,13 +1,13 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .filterHeaderWrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  gap: $layout-xs;
-  padding: $spacing-sm $spacing-md;
-  border-bottom: 1px solid $color-grey-20;
+  gap: tokens.$layout-xs;
+  padding: tokens.$spacing-sm tokens.$spacing-md;
+  border-bottom: 1px solid tokens.$color-grey-20;
 
   .rightSpace {
     // Spacing to accomodate the gap where the chevron of the same dimension falls within the alignment
@@ -16,24 +16,24 @@
   }
 
   button {
-    @include question-mark-circle-btn;
+    @include tokens.question-mark-circle-btn;
   }
 
   ul.filterHeaderList {
-    font: $text-body-sm;
+    font: tokens.$text-body-sm;
     font-weight: 600;
     list-style-type: none;
     display: flex;
     align-items: center;
     padding-left: 0;
-    gap: $layout-sm;
+    gap: tokens.$layout-sm;
     width: 100%;
     justify-content: space-between;
 
     li {
       display: flex;
       align-items: center;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
 
       button svg {
         min-width: 15px;
@@ -43,15 +43,15 @@
         display: none;
       }
 
-      @media screen and (min-width: $screen-lg) {
+      @media screen and (min-width: tokens.$screen-lg) {
         flex: 1 1 0%;
 
         &.exposureImageWrapper {
-          flex: 0.2 0 $width-first-column-filter-bar;
+          flex: 0.2 0 tokens.$width-first-column-filter-bar;
         }
       }
 
-      @media screen and (min-width: $screen-xl) {
+      @media screen and (min-width: tokens.$screen-xl) {
         &.hideOnMobile {
           display: flex;
         }
@@ -65,43 +65,43 @@
     .filterBtn {
       display: flex;
       flex-direction: row;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
       align-items: center;
     }
   }
 }
 
 .filterDialog {
-  background: $color-white;
-  border-radius: $border-radius-sm;
-  box-shadow: $box-shadow-md;
-  width: $content-xs;
+  background: tokens.$color-white;
+  border-radius: tokens.$border-radius-sm;
+  box-shadow: tokens.$box-shadow-md;
+  width: tokens.$content-xs;
   overflow-y: scroll;
 
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     width: auto;
     overflow-y: hidden;
   }
 
   .exposuresFilterWrapper {
-    padding: $spacing-md;
+    padding: tokens.$spacing-md;
 
-    @media screen and (min-width: $screen-sm) {
-      padding: $spacing-xl;
+    @media screen and (min-width: tokens.$screen-sm) {
+      padding: tokens.$spacing-xl;
     }
 
     .dismissButton {
       position: absolute;
       top: 0;
       right: 0;
-      padding: $spacing-md;
-      color: $color-grey-40;
+      padding: tokens.$spacing-md;
+      color: tokens.$color-grey-40;
       background: none;
       border: none;
       cursor: pointer;
 
       &:hover {
-        color: $color-grey-30;
+        color: tokens.$color-grey-30;
       }
     }
 
@@ -109,43 +109,43 @@
       display: flex;
       justify-content: flex-end;
       flex-direction: row;
-      gap: $spacing-sm;
-      padding-top: $spacing-md;
+      gap: tokens.$spacing-sm;
+      padding-top: tokens.$spacing-md;
       width: 100%;
     }
 
     .exposuresFilterRadioButtons {
       display: flex;
       flex-direction: column;
-      gap: $spacing-md;
+      gap: tokens.$spacing-md;
 
-      @media screen and (min-width: $screen-sm) {
+      @media screen and (min-width: tokens.$screen-sm) {
         flex-direction: row;
-        gap: $spacing-2xl;
+        gap: tokens.$spacing-2xl;
       }
 
       .exposuresFilterCategory {
         .radioButtonsWrapper {
-          padding-top: $spacing-sm;
+          padding-top: tokens.$spacing-sm;
           display: flex;
           flex-direction: column;
-          gap: $spacing-xs;
+          gap: tokens.$spacing-xs;
 
           .radioItem {
-            font: $text-body-sm;
+            font: tokens.$text-body-sm;
             font-weight: 500;
             display: flex;
-            gap: $spacing-xs;
+            gap: tokens.$spacing-xs;
           }
         }
 
         .exposuresFilterLabel {
           font-weight: 600;
-          border-bottom: 1px solid $color-black;
-          padding-bottom: $spacing-xs;
+          border-bottom: 1px solid tokens.$color-black;
+          padding-bottom: tokens.$spacing-xs;
           display: flex;
           flex-direction: row;
-          gap: $spacing-xs;
+          gap: tokens.$spacing-xs;
           align-items: center;
         }
       }
@@ -157,20 +157,20 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   .statusList {
-    padding: $spacing-md 0;
+    padding: tokens.$spacing-md 0;
 
     .statusListItem {
       align-items: flex-start;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
       display: flex;
       flex-direction: column;
 
-      @media screen and (min-width: $screen-sm) {
+      @media screen and (min-width: tokens.$screen-sm) {
         align-items: center;
-        gap: $spacing-md;
+        gap: tokens.$spacing-md;
         flex-direction: row;
       }
     }
@@ -178,9 +178,9 @@
 }
 
 .visuallyHidden {
-  @include visually-hidden;
+  @include tokens.visually-hidden;
 }
 
 .companyNameArea {
-  @include company-name-area;
+  @include tokens.company-name-area;
 }
diff --git a/src/app/components/client/FixNavigation.module.scss b/src/app/components/client/FixNavigation.module.scss
index 92b9ade23d1..89d8954243e 100644
--- a/src/app/components/client/FixNavigation.module.scss
+++ b/src/app/components/client/FixNavigation.module.scss
@@ -1,33 +1,35 @@
-@import "../../tokens";
+@use "sass:math";
+
+@use "../../tokens";
 
 .stepsWrapper {
-  @include no-focus-outline;
-  margin-block-end: $layout-lg;
+  @include tokens.no-focus-outline;
+  margin-block-end: tokens.$layout-lg;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-inline: $spacing-lg;
+  padding-inline: tokens.$spacing-lg;
 
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     height: 33%;
   }
 
-  @media screen and (min-width: $screen-md) {
-    padding-inline: $spacing-2xl;
+  @media screen and (min-width: tokens.$screen-md) {
+    padding-inline: tokens.$spacing-2xl;
   }
 
-  @media screen and (min-width: $screen-lg) {
-    padding-inline: $layout-xl;
+  @media screen and (min-width: tokens.$screen-lg) {
+    padding-inline: tokens.$layout-xl;
   }
 
   .steps {
-    @include no-focus-outline;
+    @include tokens.no-focus-outline;
   }
 }
 
-@media screen and (min-width: $screen-md) {
+@media screen and (min-width: tokens.$screen-md) {
   .steps {
-    $stepGap: $layout-xl;
+    $stepGap: tokens.$layout-xl;
     $iconDiameter: 40px;
     $checkIconDiameter: 15px;
     $iconBorderWidth: 4px;
@@ -38,7 +40,7 @@
     display: flex;
     gap: $stepGap;
     position: relative;
-    max-width: $content-md;
+    max-width: tokens.$content-md;
     align-items: center;
 
     .progressBarLineContainer {
@@ -51,11 +53,11 @@
       .progressBarLineWrapper {
         width: 100%;
         height: 3px;
-        background-color: $color-grey-30;
+        background-color: tokens.$color-grey-30;
         position: relative;
 
         .activeProgressBarLine {
-          background-color: $color-purple-10;
+          background-color: tokens.$color-purple-10;
           height: 3px;
           position: absolute;
 
@@ -65,13 +67,13 @@
               width: calc(100% / 6 + $iconDiameter);
             }
             &.beginHighRiskDataBreaches {
-              width: 100% / 6 * 2;
+              width: math.div(100%, 6) * 2;
             }
             &.duringHighRiskDataBreaches {
-              width: 100% / 6 * 3;
+              width: math.div(100%, 6) * 3;
             }
             &.beginLeakedPasswords {
-              width: 100% / 6 * 4;
+              width: math.div(100%, 6) * 4;
             }
             &.duringLeakedPasswords {
               width: calc(100% / 6 * 5 - $iconDiameter);
@@ -89,7 +91,7 @@
               width: 50%;
             }
             &.duringLeakedPasswords {
-              width: 100% / 3 * 2;
+              width: math.div(100%, 3) * 2;
             }
             &.beginSecurityRecommendations {
               width: 100%;
@@ -103,11 +105,11 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: $spacing-xs;
+      gap: tokens.$spacing-xs;
       text-align: center;
-      font: $text-body-xs;
+      font: tokens.$text-body-xs;
       font-weight: 400;
-      color: $color-grey-30;
+      color: tokens.$color-grey-30;
 
       &.navigationItem {
         // Overlap the horizontal line
@@ -126,48 +128,48 @@
           width: 100%;
           height: 100%;
           border-radius: 100%;
-          padding: $spacing-sm;
-          background-color: $color-grey-30;
+          padding: tokens.$spacing-sm;
+          background-color: tokens.$color-grey-30;
 
           &.checkIcon {
-            color: $color-white;
+            color: tokens.$color-white;
             padding: 12px; // Specific padding for check mark icon
           }
         }
       }
 
       &[aria-current="step"] .stepIcon > * {
-        outline: $iconBorderWidth solid $color-purple-10;
+        outline: $iconBorderWidth solid tokens.$color-purple-10;
       }
 
       .stepLabel {
-        padding-top: $layout-md;
+        padding-top: tokens.$layout-md;
         position: absolute;
         width: 100px;
       }
 
       &[aria-current="step"] .stepLabel {
-        padding-top: calc($layout-md + $spacing-sm);
+        padding-top: calc(tokens.$layout-md + tokens.$spacing-sm);
       }
 
       &.isCompleted,
       &[aria-current="step"] {
-        color: $color-purple-70;
+        color: tokens.$color-purple-70;
 
         .stepIcon > * {
-          background-color: $color-purple-70;
+          background-color: tokens.$color-purple-70;
         }
       }
     }
   }
 }
-@media screen and (max-width: calc($screen-md - 1px)) {
+@media screen and (max-width: calc(tokens.$screen-md - 1px)) {
   .steps {
     padding-inline-start: 0;
     list-style-type: none;
     display: flex;
     justify-content: space-evenly;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
 
     li {
       .stepIcon {
@@ -176,9 +178,9 @@
         // a 0 height and a border. The images are <1kB in size, so that
         // shouldn't matter too much.
         height: 0;
-        border: 3px solid $color-grey-30;
+        border: 3px solid tokens.$color-grey-30;
         border-radius: 3px;
-        min-width: $layout-sm;
+        min-width: tokens.$layout-sm;
         width: 100%;
         pointer-events: none;
         user-select: none;
@@ -189,24 +191,24 @@
       }
 
       &[aria-current="step"] .stepIcon {
-        border-color: $color-purple-10;
+        border-color: tokens.$color-purple-10;
       }
 
       &.isCompleted .stepIcon {
-        border-color: $color-purple-70;
+        border-color: tokens.$color-purple-70;
       }
 
       .stepLabel {
-        padding-block: $spacing-sm;
-        padding-inline: $spacing-md;
-        color: $color-purple-70;
-        font: $text-body-xs;
+        padding-block: tokens.$spacing-sm;
+        padding-inline: tokens.$spacing-md;
+        color: tokens.$color-purple-70;
+        font: tokens.$text-body-xs;
         font-weight: 600;
-        top: $spacing-lg;
+        top: tokens.$spacing-lg;
       }
 
       &:not([aria-current="step"]) .stepLabel {
-        @include visually-hidden;
+        @include tokens.visually-hidden;
       }
     }
   }
diff --git a/src/app/components/client/InputField.module.scss b/src/app/components/client/InputField.module.scss
index 5f4f5e941b7..105ad834f23 100644
--- a/src/app/components/client/InputField.module.scss
+++ b/src/app/components/client/InputField.module.scss
@@ -1,8 +1,8 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .input,
 .comboBox {
-  background: $color-white;
+  background: tokens.$color-white;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -12,14 +12,14 @@
   }
 
   .floatingLabel {
-    background: $color-white;
-    border-radius: $border-radius-sm;
-    color: $color-black;
+    background: tokens.$color-white;
+    border-radius: tokens.$border-radius-sm;
+    color: tokens.$color-black;
     display: inline-block;
     // Add a bit more space: The next spacing step is too much.
-    left: calc($spacing-sm * 1.5);
+    left: calc(tokens.$spacing-sm * 1.5);
     line-height: 1em;
-    padding: 0 calc($spacing-xs * 0.5);
+    padding: 0 calc(tokens.$spacing-xs * 0.5);
     pointer-events: none;
     position: absolute;
     top: 50%;
@@ -30,51 +30,53 @@
   }
 
   .inputField {
-    border: 1px solid $color-grey-30;
-    border-radius: $border-radius-sm;
-    color: $color-black;
+    border: 1px solid tokens.$color-grey-30;
+    border-radius: tokens.$border-radius-sm;
+    color: tokens.$color-black;
     // Add a bit more space: The next spacing step is too much.
-    padding: calc($spacing-sm * 1.5);
+    padding: calc(tokens.$spacing-sm * 1.5);
     width: 100%;
 
     &.noValue {
-      color: $color-grey-40;
+      color: tokens.$color-grey-40;
     }
 
     &.hasError {
-      border-color: $color-error;
+      border-color: tokens.$color-error;
 
       &:focus {
-        border: 1px solid $color-error;
-        outline: $border-focus-width solid $color-error-focus;
+        border: 1px solid tokens.$color-error;
+        outline: tokens.$border-focus-width solid tokens.$color-error-focus;
       }
     }
 
     &:focus {
-      border: 1px solid $color-informational-active;
-      outline: $border-focus-width solid $color-informational-focus;
+      border: 1px solid tokens.$color-informational-active;
+      outline: tokens.$border-focus-width solid
+        tokens.$color-informational-focus;
     }
 
     &:disabled {
       background: none;
-      border: 1px solid $color-grey-10;
+      border: 1px solid tokens.$color-grey-10;
     }
   }
 
   &:has(.floatingLabel) {
     ::placeholder {
-      @include visually-hidden;
+      @include tokens.visually-hidden;
     }
     .inputField {
       // Move the value string off-center.
-      padding: calc($spacing-md * 1.25) calc($spacing-sm * 1.5) $spacing-xs;
+      padding: calc(tokens.$spacing-md * 1.25) calc(tokens.$spacing-sm * 1.5)
+        tokens.$spacing-xs;
     }
   }
 
   &:focus-within,
   &:not(:has(:placeholder-shown)) {
     .floatingLabel {
-      color: $color-grey-40;
+      color: tokens.$color-grey-40;
       // Make the floating label visually align with the input value.
       transform: translate(-0.05em, -115%) scale(0.75);
     }
@@ -82,32 +84,32 @@
 
   .inputLabel {
     font-weight: 600;
-    margin-bottom: $spacing-sm;
+    margin-bottom: tokens.$spacing-sm;
   }
 
   .buttonIcon {
     position: absolute;
-    right: $spacing-xs;
+    right: tokens.$spacing-xs;
     top: 50%;
     transform: translateY(-50%);
 
     &:hover button {
-      color: $color-error;
+      color: tokens.$color-error;
     }
   }
 
   .inputMessage {
     display: flex;
     align-items: center;
-    color: $color-grey-40;
-    gap: $spacing-xs;
+    color: tokens.$color-grey-40;
+    gap: tokens.$spacing-xs;
     background: inherit;
-    border-radius: $border-radius-sm;
+    border-radius: tokens.$border-radius-sm;
     bottom: 0;
-    font: $text-body-xs;
+    font: tokens.$text-body-xs;
     left: 0;
-    margin: 0 $spacing-sm;
-    padding: 0 $spacing-sm;
+    margin: 0 tokens.$spacing-sm;
+    padding: 0 tokens.$spacing-sm;
     position: absolute;
     // the negative y-offset is 50% of the line-height plus a bit extra for
     // visual balance in relation to the input border endings left and right
@@ -115,6 +117,6 @@
   }
 
   &:has([aria-invalid="true"]) .inputMessage {
-    color: $color-error;
+    color: tokens.$color-error;
   }
 }
diff --git a/src/app/components/client/ListBox.module.scss b/src/app/components/client/ListBox.module.scss
index 9af56137d47..5e47e8a74f1 100644
--- a/src/app/components/client/ListBox.module.scss
+++ b/src/app/components/client/ListBox.module.scss
@@ -1,24 +1,24 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .listBox {
   list-style: none;
   margin: 0;
-  padding: $spacing-sm 0;
+  padding: tokens.$spacing-sm 0;
 }
 
 .item {
-  background: $color-white;
+  background: tokens.$color-white;
   color: color;
   cursor: pointer;
   outline: none;
 
   &.isSelected {
-    background: $color-purple-10;
+    background: tokens.$color-purple-10;
   }
   &.isFocused {
-    background: $color-grey-10;
+    background: tokens.$color-grey-10;
   }
   &.isDisabled {
-    color: $color-grey-30;
+    color: tokens.$color-grey-30;
   }
 }
diff --git a/src/app/components/client/LocationAutocomplete.module.scss b/src/app/components/client/LocationAutocomplete.module.scss
index 394bfac8aa2..2aa65c247e7 100644
--- a/src/app/components/client/LocationAutocomplete.module.scss
+++ b/src/app/components/client/LocationAutocomplete.module.scss
@@ -1,9 +1,9 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .locationItem {
-  font: $text-body-sm;
+  font: tokens.$text-body-sm;
   // Add a bit more vertical space: The next spacing step is too much.
-  padding: $spacing-sm calc($spacing-sm * 1.5);
+  padding: tokens.$spacing-sm calc(tokens.$spacing-sm * 1.5);
 
   strong {
     // Space small bold letters a bit wider for legibility.
@@ -11,13 +11,13 @@
   }
 
   span {
-    color: $color-grey-40;
-    font: $text-body-xs;
+    color: tokens.$color-grey-40;
+    font: tokens.$text-body-xs;
     margin-left: 0.5em;
   }
 }
 
 .infoText {
-  font: $text-body-xs;
-  padding: $spacing-sm 0;
+  font: tokens.$text-body-xs;
+  padding: tokens.$spacing-sm 0;
 }
diff --git a/src/app/components/client/PercentageChart.module.scss b/src/app/components/client/PercentageChart.module.scss
index e86d24b3844..11bf79d1844 100644
--- a/src/app/components/client/PercentageChart.module.scss
+++ b/src/app/components/client/PercentageChart.module.scss
@@ -1,9 +1,9 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .chartContainer {
   text-align: center;
   display: flex;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
   flex-direction: column;
   align-items: center;
 
@@ -11,12 +11,12 @@
     text-align: center;
     display: flex;
     align-items: center;
-    gap: $spacing-xs;
-    font: $text-body-xs;
+    gap: tokens.$spacing-xs;
+    font: tokens.$text-body-xs;
     font-style: italic;
 
     button {
-      @include question-mark-circle-btn;
+      @include tokens.question-mark-circle-btn;
     }
   }
 }
@@ -24,29 +24,29 @@
 .modalBodyContent {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 }
 
 .gutter {
-  stroke: $color-white;
+  stroke: tokens.$color-white;
 }
 
 .chartWrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
-  @media screen and (min-width: $screen-sm) {
+  @media screen and (min-width: tokens.$screen-sm) {
     flex-direction: row;
-    gap: $spacing-xl;
+    gap: tokens.$spacing-xl;
   }
 
   .chart {
@@ -83,34 +83,34 @@
 /* stylelint-disable no-descending-specificity */
 // We start at 2, because element 1 is .gutter
 .slice:nth-child(2) {
-  stroke: $color-purple-90;
+  stroke: tokens.$color-purple-90;
 }
 
 .slice:nth-child(3) {
-  stroke: $color-purple-70;
+  stroke: tokens.$color-purple-70;
 }
 .slice:nth-child(4) {
-  stroke: $color-purple-50;
+  stroke: tokens.$color-purple-50;
 }
 .slice:nth-child(5) {
-  stroke: $color-purple-30;
+  stroke: tokens.$color-purple-30;
 }
 .slice:nth-child(6) {
-  stroke: $color-purple-10;
+  stroke: tokens.$color-purple-10;
 }
 .slice:nth-child(7) {
-  stroke: $color-purple-80;
+  stroke: tokens.$color-purple-80;
 }
 .slice:nth-child(8) {
-  stroke: $color-purple-60;
+  stroke: tokens.$color-purple-60;
 }
 .slice:nth-child(9) {
-  stroke: $color-purple-40;
+  stroke: tokens.$color-purple-40;
 }
 .slice:nth-child(10) {
-  stroke: $color-purple-20;
+  stroke: tokens.$color-purple-20;
 }
 .slice:nth-child(11) {
-  stroke: $color-violet-90;
+  stroke: tokens.$color-violet-90;
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/app/components/client/PetitionBanner.module.scss b/src/app/components/client/PetitionBanner.module.scss
index 01ef3d539a1..5f008ea7bdb 100644
--- a/src/app/components/client/PetitionBanner.module.scss
+++ b/src/app/components/client/PetitionBanner.module.scss
@@ -1,68 +1,72 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .banner {
-  background: linear-gradient(90deg, $color-purple-90 50%, $color-purple-60);
+  background: linear-gradient(
+    90deg,
+    tokens.$color-purple-90 50%,
+    tokens.$color-purple-60
+  );
   display: flex;
   justify-content: center;
-  padding: $layout-xs $layout-sm;
+  padding: tokens.$layout-xs tokens.$layout-sm;
   position: relative;
 }
 
 .content {
   h2 {
-    font: $text-title-xs;
+    font: tokens.$text-title-xs;
     font-weight: 500;
   }
 
   display: flex;
   flex-direction: column;
-  gap: $spacing-xs;
-  color: $color-white;
-  max-width: $content-lg;
+  gap: tokens.$spacing-xs;
+  color: tokens.$color-white;
+  max-width: tokens.$content-lg;
 }
 
 .buttons {
   display: flex;
-  gap: $spacing-xs;
-  margin-top: $spacing-md;
+  gap: tokens.$spacing-xs;
+  margin-top: tokens.$spacing-md;
 
   .signButton {
-    background-color: $color-purple-60;
+    background-color: tokens.$color-purple-60;
     &:hover {
-      background-color: $color-purple-50;
+      background-color: tokens.$color-purple-50;
     }
   }
 
   .signLink {
-    background-color: $color-purple-60;
-    border-radius: $border-radius-md;
-    color: $color-white;
-    font: $text-body-md;
+    background-color: tokens.$color-purple-60;
+    border-radius: tokens.$border-radius-md;
+    color: tokens.$color-white;
+    font: tokens.$text-body-md;
     font-weight: 500;
     line-height: 1;
-    padding: $spacing-md $spacing-lg;
+    padding: tokens.$spacing-md tokens.$spacing-lg;
     text-align: center;
     text-decoration: none;
     &:hover {
-      background-color: $color-purple-50;
+      background-color: tokens.$color-purple-50;
     }
   }
 
   .dismissButton {
-    color: $color-white;
+    color: tokens.$color-white;
     &:hover {
-      background-color: rgba($color-purple-50, 0.2);
+      background-color: rgba(tokens.$color-purple-50, 0.2);
     }
   }
 }
 
 .closeButton {
   background-color: transparent;
-  border-radius: $border-radius-sm;
+  border-radius: tokens.$border-radius-sm;
   border-style: none;
-  color: $color-white;
+  color: tokens.$color-white;
   cursor: pointer;
-  padding: $spacing-md;
+  padding: tokens.$spacing-md;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/src/app/components/client/Popover.module.scss b/src/app/components/client/Popover.module.scss
index 307e4844a9f..231c28289e9 100644
--- a/src/app/components/client/Popover.module.scss
+++ b/src/app/components/client/Popover.module.scss
@@ -1,4 +1,4 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .underlay {
   position: fixed;
@@ -6,11 +6,11 @@
 }
 
 .popover {
-  background: $color-white;
+  background: tokens.$color-white;
   box-shadow: none;
-  border-radius: $border-radius-sm;
+  border-radius: tokens.$border-radius-sm;
 
   &.isOpen {
-    box-shadow: $box-shadow-sm;
+    box-shadow: tokens.$box-shadow-sm;
   }
 }
diff --git a/src/app/components/client/ProgressBar.module.scss b/src/app/components/client/ProgressBar.module.scss
index 8fab770c92e..54fa0e345ba 100644
--- a/src/app/components/client/ProgressBar.module.scss
+++ b/src/app/components/client/ProgressBar.module.scss
@@ -1,15 +1,15 @@
-@import "../../tokens";
+@use "../../tokens";
 
 $progressBarHeight: 56px;
 .progressContainer {
   .labelContainer {
-    font: $text-title-2xs;
-    padding: 0 $spacing-sm;
-    margin-bottom: $spacing-sm;
+    font: tokens.$text-title-2xs;
+    padding: 0 tokens.$spacing-sm;
+    margin-bottom: tokens.$spacing-sm;
   }
 
   .progressBar {
-    background: $color-grey-05;
+    background: tokens.$color-grey-05;
     border-radius: calc($progressBarHeight / 2);
     height: $progressBarHeight;
     overflow: hidden;
@@ -17,10 +17,10 @@ $progressBarHeight: 56px;
     width: 100%;
 
     &Percentage {
-      color: $color-white;
+      color: tokens.$color-white;
       position: absolute;
-      font: $text-title-xs;
-      left: $spacing-lg;
+      font: tokens.$text-title-xs;
+      left: tokens.$spacing-lg;
       // Center vertically plus some extra for visual balance of the label
       // within the progress bar.
       top: 52%;
@@ -29,7 +29,7 @@ $progressBarHeight: 56px;
     }
 
     &Inner {
-      background: $gradient-linear-purple;
+      background: tokens.$gradient-linear-purple;
       border-radius: calc($progressBarHeight / 2);
       height: 100%;
       left: 0;
diff --git a/src/app/components/client/ProgressCard.module.scss b/src/app/components/client/ProgressCard.module.scss
index 90dd6d3972e..236aafbe745 100644
--- a/src/app/components/client/ProgressCard.module.scss
+++ b/src/app/components/client/ProgressCard.module.scss
@@ -1,34 +1,34 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .progressCard {
-  background: $color-white;
-  border-radius: $border-radius-md;
-  border: 2px solid rgba($color-purple-70, 0.4);
+  background: tokens.$color-white;
+  border-radius: tokens.$border-radius-md;
+  border: 2px solid rgba(tokens.$color-purple-70, 0.4);
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: center;
-  padding: $spacing-lg;
+  padding: tokens.$spacing-lg;
 
-  @media screen and (min-width: $screen-lg) {
-    min-width: $content-sm;
+  @media screen and (min-width: tokens.$screen-lg) {
+    min-width: tokens.$content-sm;
   }
 
   .header {
     display: flex;
     align-items: center;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
     justify-content: center;
-    font: $text-title-3xs;
+    font: tokens.$text-title-3xs;
     font-weight: 600;
 
     button {
-      @include question-mark-circle-btn;
+      @include tokens.question-mark-circle-btn;
     }
   }
 
   .progressBarContainer {
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
     align-items: center;
     display: flex;
 
@@ -38,30 +38,30 @@
     }
 
     .fullProgressBar {
-      border-radius: $border-radius-lg;
+      border-radius: tokens.$border-radius-lg;
       height: 15px;
       background: repeating-linear-gradient(
         -45deg,
-        $color-grey-20,
-        $color-grey-20 5px,
-        $color-grey-10 5px,
-        $color-grey-10 10px
+        tokens.$color-grey-20,
+        tokens.$color-grey-20 5px,
+        tokens.$color-grey-10 5px,
+        tokens.$color-grey-10 10px
       );
       position: relative;
       width: 100%;
 
       .activeProgressBar {
         height: inherit;
-        border-radius: $border-radius-lg;
+        border-radius: tokens.$border-radius-lg;
         position: absolute;
-        background: $gradient-blue;
+        background: tokens.$gradient-blue;
       }
 
       .percentageBreakdown {
-        font: $text-body-sm;
-        color: $color-grey-60;
+        font: tokens.$text-body-sm;
+        color: tokens.$color-grey-60;
         margin-top: 15px; // offset height of progress bar
-        padding-top: $spacing-xs;
+        padding-top: tokens.$spacing-xs;
         display: flex;
         justify-content: space-between;
       }
@@ -69,12 +69,12 @@
   }
 
   .progressStatsWrapper {
-    font: $text-body-sm;
+    font: tokens.$text-body-sm;
     font-weight: 500;
     display: flex;
     flex-direction: row;
-    gap: $layout-md;
-    padding: $spacing-md 0;
+    gap: tokens.$layout-md;
+    padding: tokens.$spacing-md 0;
     justify-content: center;
 
     .progressItem {
@@ -86,14 +86,14 @@
 
       &:not(:first-child)::before {
         // Lines in between the different items in the progress cardå
-        @media screen and (min-width: $screen-sm) {
+        @media screen and (min-width: tokens.$screen-sm) {
           content: "";
           position: absolute;
-          left: -($layout-xs);
+          left: -(tokens.$layout-xs);
           top: 0;
           bottom: 0;
           width: 1px;
-          background-color: $color-grey-20;
+          background-color: tokens.$color-grey-20;
         }
       }
 
@@ -101,12 +101,12 @@
         align-items: center;
         justify-content: center;
         display: flex;
-        gap: $spacing-sm;
+        gap: tokens.$spacing-sm;
 
         img {
           display: none;
 
-          @media screen and (min-width: $screen-sm) {
+          @media screen and (min-width: tokens.$screen-sm) {
             display: block;
             width: 50px;
             height: auto;
@@ -115,15 +115,15 @@
       }
 
       span {
-        font: $text-title-sm;
-        color: $color-purple-70;
+        font: tokens.$text-title-sm;
+        color: tokens.$color-purple-70;
 
-        @media screen and (min-width: $screen-sm) {
-          font: $text-title-md;
+        @media screen and (min-width: tokens.$screen-sm) {
+          font: tokens.$text-title-md;
         }
 
-        @media screen and (min-width: $screen-xl) {
-          font: $text-title-lg;
+        @media screen and (min-width: tokens.$screen-xl) {
+          font: tokens.$text-title-lg;
           font-weight: 600;
         }
       }
@@ -134,13 +134,13 @@
         }
 
         span {
-          color: $color-grey-40;
+          color: tokens.$color-grey-40;
         }
         p {
-          color: $color-grey-40;
+          color: tokens.$color-grey-40;
           display: flex;
           align-items: center;
-          gap: $spacing-xs;
+          gap: tokens.$spacing-xs;
         }
       }
     }
@@ -150,13 +150,13 @@
 .modalBodyContent {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .confirmButtonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 }
diff --git a/src/app/components/client/RadioInput.module.scss b/src/app/components/client/RadioInput.module.scss
index 9108fd5b36d..9bf42a332a5 100644
--- a/src/app/components/client/RadioInput.module.scss
+++ b/src/app/components/client/RadioInput.module.scss
@@ -1,18 +1,18 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .radioButton {
-  stroke: $color-purple-50;
+  stroke: tokens.$color-purple-50;
 
   svg {
-    fill: $color-purple-50;
+    fill: tokens.$color-purple-50;
     stroke: none;
   }
 
   &.isSelected {
-    stroke: $color-grey-20;
+    stroke: tokens.$color-grey-20;
   }
 
   .focusRing {
-    stroke: $color-blue-50;
+    stroke: tokens.$color-blue-50;
   }
 }
diff --git a/src/app/components/client/SubscriberWaitlistDialog.module.scss b/src/app/components/client/SubscriberWaitlistDialog.module.scss
index 3ea29827f01..48bbc6a682f 100644
--- a/src/app/components/client/SubscriberWaitlistDialog.module.scss
+++ b/src/app/components/client/SubscriberWaitlistDialog.module.scss
@@ -1,17 +1,17 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .dialogContent {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  color: $color-grey-50;
+  gap: tokens.$spacing-lg;
+  color: tokens.$color-grey-50;
 
   .buttonWrapper {
     align-self: center;
     display: flex;
     flex-direction: column;
-    gap: $spacing-sm;
-    min-width: $content-xs;
-    padding-block-start: $spacing-md;
+    gap: tokens.$spacing-sm;
+    min-width: tokens.$content-xs;
+    padding-block-start: tokens.$spacing-md;
   }
 }
diff --git a/src/app/components/client/SwitchInput.module.scss b/src/app/components/client/SwitchInput.module.scss
index 554fc6a59c1..590846f2b11 100644
--- a/src/app/components/client/SwitchInput.module.scss
+++ b/src/app/components/client/SwitchInput.module.scss
@@ -1,20 +1,20 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .switchInput {
   svg {
-    fill: $color-grey-40;
+    fill: tokens.$color-grey-40;
     stroke: none;
 
     circle {
-      fill: $color-white;
+      fill: tokens.$color-white;
     }
   }
 
   &.isSelected svg {
-    fill: $color-green-50;
+    fill: tokens.$color-green-50;
   }
 
   .focusRing {
-    stroke: $color-blue-50;
+    stroke: tokens.$color-blue-50;
   }
 }
diff --git a/src/app/components/client/TabList.module.scss b/src/app/components/client/TabList.module.scss
index a2321418027..04b040030de 100644
--- a/src/app/components/client/TabList.module.scss
+++ b/src/app/components/client/TabList.module.scss
@@ -1,4 +1,4 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .container {
   display: flex;
@@ -6,7 +6,7 @@
 
 .tabs {
   display: flex;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   &[aria-orientation="vertical"] {
     flex-direction: column;
@@ -15,16 +15,16 @@
 
 .tab {
   cursor: pointer;
-  border-radius: $border-radius-sm;
+  border-radius: tokens.$border-radius-sm;
   display: flex;
-  gap: $spacing-xs;
-  padding: $spacing-sm;
+  gap: tokens.$spacing-xs;
+  padding: tokens.$spacing-sm;
   position: relative;
 
   &::after {
     bottom: 0;
     content: "";
-    height: $border-focus-width;
+    height: tokens.$border-focus-width;
     position: absolute;
     right: 0;
     width: 100%;
@@ -32,20 +32,20 @@
 
   &:hover,
   &:focus {
-    outline: 2px solid $color-blue-50;
+    outline: 2px solid tokens.$color-blue-50;
     &::after {
       background: none;
     }
   }
 
   &[aria-selected="true"] {
-    color: $color-purple-70;
+    color: tokens.$color-purple-70;
 
     // Only show the tab underline when the item
     // is selected and not hovered or focussed.
     &:not(:hover, :focus) {
       &::after {
-        background: $color-purple-70;
+        background: tokens.$color-purple-70;
       }
     }
   }
@@ -54,21 +54,21 @@
 .secondary {
   .tabs {
     align-items: flex-start;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
   }
 
   .tab {
-    color: $color-grey-40;
-    padding: $spacing-xs $spacing-xs $spacing-xs 0;
+    color: tokens.$color-grey-40;
+    padding: tokens.$spacing-xs tokens.$spacing-xs tokens.$spacing-xs 0;
 
     &[aria-selected="true"] {
-      color: $color-purple-50;
+      color: tokens.$color-purple-50;
 
       // Only show the tab underline when the item
       // is selected and not hovered or focussed.
       &:not(:hover, :focus) {
         &::after {
-          background: $color-purple-50;
+          background: tokens.$color-purple-50;
           height: 2px;
         }
       }
diff --git a/src/app/components/client/TelemetryLink.module.scss b/src/app/components/client/TelemetryLink.module.scss
index c804067d1ed..776949f134b 100644
--- a/src/app/components/client/TelemetryLink.module.scss
+++ b/src/app/components/client/TelemetryLink.module.scss
@@ -1,8 +1,8 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .link {
   align-items: center;
-  color: $color-blue-50;
+  color: tokens.$color-blue-50;
   display: inline-flex;
   gap: 0.25em;
 }
diff --git a/src/app/components/client/csat_survey/CsatSurveyBanner.module.scss b/src/app/components/client/csat_survey/CsatSurveyBanner.module.scss
index 6cf99679788..fe3340ae058 100644
--- a/src/app/components/client/csat_survey/CsatSurveyBanner.module.scss
+++ b/src/app/components/client/csat_survey/CsatSurveyBanner.module.scss
@@ -1,22 +1,26 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .wrapper {
   align-items: center;
-  background: linear-gradient(90deg, $color-purple-90 50%, $color-purple-60);
-  color: $color-white;
+  background: linear-gradient(
+    90deg,
+    tokens.$color-purple-90 50%,
+    tokens.$color-purple-60
+  );
+  color: tokens.$color-white;
   display: flex;
-  padding: $layout-xs $layout-sm;
+  padding: tokens.$layout-xs tokens.$layout-sm;
   position: relative;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 }
 
 .prompt,
 .prompt a {
   align-items: center;
-  color: $color-white;
+  color: tokens.$color-white;
   display: flex;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 }
 
 .answers {
@@ -24,24 +28,24 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .answer {
-    background-color: $color-purple-40;
+    background-color: tokens.$color-purple-40;
 
     &:hover {
-      background-color: $color-purple-50;
+      background-color: tokens.$color-purple-50;
     }
   }
 }
 
 .closeButton {
   background-color: transparent;
-  border-radius: $border-radius-sm;
+  border-radius: tokens.$border-radius-sm;
   border-style: none;
-  color: $color-white;
+  color: tokens.$color-white;
   cursor: pointer;
-  padding: $spacing-md;
+  padding: tokens.$spacing-md;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/src/app/components/client/dialog/Dialog.module.scss b/src/app/components/client/dialog/Dialog.module.scss
index 97a87ae0aa4..61b3c60b5ff 100644
--- a/src/app/components/client/dialog/Dialog.module.scss
+++ b/src/app/components/client/dialog/Dialog.module.scss
@@ -1,16 +1,16 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .dialog {
-  background-color: $color-white;
-  border-radius: $border-radius-md;
+  background-color: tokens.$color-white;
+  border-radius: tokens.$border-radius-md;
   display: flex;
   flex-direction: column;
-  max-height: calc(100% - (2 * $spacing-md));
-  max-width: $content-lg;
+  max-height: calc(100% - (2 * tokens.$spacing-md));
+  max-width: tokens.$content-lg;
   outline: none;
   overflow-y: auto;
   position: relative;
-  width: calc(100% - (2 * $spacing-md));
+  width: calc(100% - (2 * tokens.$spacing-md));
 
   .header,
   .content {
@@ -18,51 +18,53 @@
   }
 
   .header {
-    @include no-focus-outline;
+    @include tokens.no-focus-outline;
     display: flex;
     flex-direction: column;
-    gap: $spacing-md;
-    padding: $layout-sm $layout-sm $spacing-sm;
+    gap: tokens.$spacing-md;
+    padding: tokens.$layout-sm tokens.$layout-sm tokens.$spacing-sm;
 
-    @media screen and (min-width: $screen-lg) {
-      padding: $layout-md $layout-xl $spacing-sm;
+    @media screen and (min-width: tokens.$screen-lg) {
+      padding: tokens.$layout-md tokens.$layout-xl tokens.$spacing-sm;
     }
   }
 
   .content {
-    padding: $spacing-sm $layout-sm $layout-sm;
+    padding: tokens.$spacing-sm tokens.$layout-sm tokens.$layout-sm;
 
-    @media screen and (min-width: $screen-lg) {
-      padding: $spacing-sm $layout-xl $layout-md;
+    @media screen and (min-width: tokens.$screen-lg) {
+      padding: tokens.$spacing-sm tokens.$layout-xl tokens.$layout-md;
     }
   }
 
   .title {
-    color: $color-grey-50;
-    font: $text-title-2xs;
+    color: tokens.$color-grey-50;
+    font: tokens.$text-title-2xs;
     text-align: center;
   }
 
   &.horizontal {
-    @media screen and (min-width: $screen-lg) {
+    @media screen and (min-width: tokens.$screen-lg) {
       flex-direction: row;
     }
 
     .header {
-      background-color: $color-grey-05;
+      background-color: tokens.$color-grey-05;
       flex-direction: column-reverse;
-      gap: $spacing-xl;
+      gap: tokens.$spacing-xl;
       justify-content: center;
       text-align: left;
 
-      @media screen and (min-width: $screen-lg) {
-        padding: $layout-md $layout-sm $layout-md $layout-xl;
+      @media screen and (min-width: tokens.$screen-lg) {
+        padding: tokens.$layout-md tokens.$layout-sm tokens.$layout-md
+          tokens.$layout-xl;
       }
     }
 
     .content {
-      @media screen and (min-width: $screen-lg) {
-        padding: $layout-md $layout-xl $layout-md $layout-sm;
+      @media screen and (min-width: tokens.$screen-lg) {
+        padding: tokens.$layout-md tokens.$layout-xl tokens.$layout-md
+          tokens.$layout-sm;
       }
     }
 
@@ -74,15 +76,15 @@
   .dismissButton {
     background: none;
     border: none;
-    color: $color-grey-40;
+    color: tokens.$color-grey-40;
     cursor: pointer;
-    padding: $spacing-md;
+    padding: tokens.$spacing-md;
     position: absolute;
     right: 0;
     top: 0;
 
     &:hover {
-      color: $color-grey-30;
+      color: tokens.$color-grey-30;
     }
   }
 
@@ -97,6 +99,6 @@
   ol {
     display: flex;
     flex-direction: column;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
   }
 }
diff --git a/src/app/components/client/dialog/ModalOverlay.module.scss b/src/app/components/client/dialog/ModalOverlay.module.scss
index 77f9deee203..343ab2912df 100644
--- a/src/app/components/client/dialog/ModalOverlay.module.scss
+++ b/src/app/components/client/dialog/ModalOverlay.module.scss
@@ -1,9 +1,9 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .underlay {
   position: fixed;
   inset: 0;
-  background-color: rgba($color-black, 0.5);
+  background-color: rgba(tokens.$color-black, 0.5);
   // Overlap all regular content on the site with a z-index,
   // the highest of which (at the time of writing) are the <Steps> in the
   // onboarding flow, whose images have a z-index of 1:
diff --git a/src/app/components/client/exposure_card/ExposureCard.module.scss b/src/app/components/client/exposure_card/ExposureCard.module.scss
index 34a7f60f76c..722b80415b9 100644
--- a/src/app/components/client/exposure_card/ExposureCard.module.scss
+++ b/src/app/components/client/exposure_card/ExposureCard.module.scss
@@ -1,18 +1,18 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .exposureCard {
-  font: $text-body-sm;
-  background-color: $color-white;
-  border: 2px solid rgba($color-purple-70, 0.2);
-  border-radius: $border-radius-md;
+  font: tokens.$text-body-sm;
+  background-color: tokens.$color-white;
+  border: 2px solid rgba(tokens.$color-purple-70, 0.2);
+  border-radius: tokens.$border-radius-md;
 
   .exposureHeader {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: calc($spacing-md * 1.25) $spacing-md;
-    gap: $layout-xs;
+    padding: calc(tokens.$spacing-md * 1.25) tokens.$spacing-md;
+    gap: tokens.$layout-xs;
 
     .chevron {
       flex-shrink: 0;
@@ -20,11 +20,11 @@
       border-style: none;
       padding: 0;
       cursor: pointer;
-      color: rgba($color-purple-70, 0.7);
+      color: rgba(tokens.$color-purple-70, 0.7);
       width: 15px; // size of the chevron on mobile
       height: 20px; // height of down chevron
 
-      @media screen and (min-width: $screen-md) {
+      @media screen and (min-width: tokens.$screen-md) {
         width: 20px; // size of the chevron on larger devices
       }
 
@@ -47,13 +47,13 @@
     .hideOnMobile {
       display: none;
 
-      @media screen and (min-width: $screen-lg) {
+      @media screen and (min-width: tokens.$screen-lg) {
         display: block;
       }
     }
 
-    @media screen and (min-width: $screen-lg) {
-      gap: $layout-sm;
+    @media screen and (min-width: tokens.$screen-lg) {
+      gap: tokens.$layout-sm;
     }
 
     .dataBrokerLogo {
@@ -68,7 +68,7 @@
       height: 35px;
       border-radius: 50px;
       color: black;
-      font: $text-title-3xs;
+      font: tokens.$text-title-3xs;
     }
 
     dd {
@@ -76,14 +76,14 @@
       align-items: center;
 
       .exposureCompanyTitle {
-        font: $text-body-sm;
+        font: tokens.$text-body-sm;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
 
-        @media screen and (max-width: $screen-sm) {
+        @media screen and (max-width: tokens.$screen-sm) {
           &.makeFontSmaller {
-            font: $text-body-2xs;
+            font: tokens.$text-body-2xs;
           }
         }
       }
@@ -94,13 +94,13 @@
         }
       }
 
-      @media screen and (min-width: $screen-lg) {
+      @media screen and (min-width: tokens.$screen-lg) {
         &.exposureImageWrapper {
-          flex: 0.2 0 $width-first-column-filter-bar;
+          flex: 0.2 0 tokens.$width-first-column-filter-bar;
         }
       }
 
-      @media screen and (min-width: $screen-xl) {
+      @media screen and (min-width: tokens.$screen-xl) {
         flex: 1 1 0%;
 
         &.hideOnMobile {
@@ -112,7 +112,7 @@
 
   .exposureBreachLink {
     align-items: center;
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
     display: inline-flex;
     gap: 0.25em;
   }
@@ -120,7 +120,7 @@
   .exposureDetailsSection {
     margin: 0;
     overflow: hidden;
-    padding: 0 $layout-md;
+    padding: 0 tokens.$layout-md;
     height: 0;
     display: none;
 
@@ -128,15 +128,15 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: $layout-xs;
+      gap: tokens.$layout-xs;
 
-      @media screen and (min-width: $screen-sm) {
+      @media screen and (min-width: tokens.$screen-sm) {
         flex-direction: row;
         justify-content: space-between;
       }
 
-      @media screen and (min-width: $screen-md) {
-        gap: $layout-xl;
+      @media screen and (min-width: tokens.$screen-md) {
+        gap: tokens.$layout-xl;
       }
 
       span {
@@ -145,54 +145,54 @@
     }
 
     .exposureDetailsContent {
-      margin-top: $layout-xs;
-      background: $color-grey-05;
-      padding: $spacing-md $spacing-lg;
-      border-radius: $border-radius-md;
+      margin-top: tokens.$layout-xs;
+      background: tokens.$color-grey-05;
+      padding: tokens.$spacing-md tokens.$spacing-lg;
+      border-radius: tokens.$border-radius-md;
 
       .exposedDataTypes {
-        margin-top: $spacing-md;
+        margin-top: tokens.$spacing-md;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: $spacing-lg;
+        gap: tokens.$spacing-lg;
       }
     }
 
     .openInNewTab {
-      color: $color-blue-50;
+      color: tokens.$color-blue-50;
 
       svg {
         display: inline;
-        margin: 0 $spacing-xs;
+        margin: 0 tokens.$spacing-xs;
       }
     }
 
     &.isOpen {
-      border-top: 2px solid rgba($color-purple-70, 0.2);
+      border-top: 2px solid rgba(tokens.$color-purple-70, 0.2);
       overflow: auto;
       height: auto;
       display: block;
-      padding: $spacing-lg;
+      padding: tokens.$spacing-lg;
 
-      @media screen and (min-width: $screen-lg) {
-        padding: $spacing-xl $layout-xl;
+      @media screen and (min-width: tokens.$screen-lg) {
+        padding: tokens.$spacing-xl tokens.$layout-xl;
       }
     }
   }
 }
 
 .visuallyHidden {
-  @include visually-hidden;
+  @include tokens.visually-hidden;
 }
 
 .companyNameArea {
-  @include company-name-area;
+  @include tokens.company-name-area;
 }
 
 .resolveExposuresCtaDesktop {
   display: none;
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     display: block;
   }
 }
@@ -200,14 +200,14 @@
 .resolveExposuresCtaMobile {
   display: flex;
   justify-content: center;
-  margin-top: $spacing-lg;
+  margin-top: tokens.$spacing-lg;
 
-  @media screen and (min-width: $screen-md) {
+  @media screen and (min-width: tokens.$screen-md) {
     display: none;
   }
 }
 
 .manualResolutionPraise {
   display: flex;
-  gap: $spacing-xs;
+  gap: tokens.$spacing-xs;
 }
diff --git a/src/app/components/client/exposure_card/ExposureCardDataClass.module.scss b/src/app/components/client/exposure_card/ExposureCardDataClass.module.scss
index 71bf20d0c1d..092a8c85e85 100644
--- a/src/app/components/client/exposure_card/ExposureCardDataClass.module.scss
+++ b/src/app/components/client/exposure_card/ExposureCardDataClass.module.scss
@@ -1,10 +1,10 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .detailsFoundItem {
   .label {
     display: flex;
     align-items: center;
-    gap: $spacing-xs;
+    gap: tokens.$spacing-xs;
     font-weight: 700;
   }
 
@@ -14,8 +14,8 @@
     .dataClassListDetails {
       list-style: none;
       margin: 0;
-      padding: $spacing-sm 0 0 0;
-      gap: $spacing-xs;
+      padding: tokens.$spacing-sm 0 0 0;
+      gap: tokens.$spacing-xs;
       display: flex;
       flex-direction: column;
 
diff --git a/src/app/components/client/toolbar/AppPicker.module.scss b/src/app/components/client/toolbar/AppPicker.module.scss
index 4acccbd8e97..18dfc76d170 100644
--- a/src/app/components/client/toolbar/AppPicker.module.scss
+++ b/src/app/components/client/toolbar/AppPicker.module.scss
@@ -1,4 +1,4 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .wrapper {
   align-items: center;
@@ -14,23 +14,23 @@
   width: 24px;
   height: 24px;
   padding: 0;
-  border-radius: $border-radius-sm;
+  border-radius: tokens.$border-radius-sm;
 
   svg {
-    color: $color-violet-70;
+    color: tokens.$color-violet-70;
 
     &:hover {
-      color: $color-violet-90;
+      color: tokens.$color-violet-90;
     }
   }
 }
 
 .popup {
-  width: $content-xs;
+  width: tokens.$content-xs;
   list-style-type: none;
-  box-shadow: $box-shadow-sm;
-  border-radius: $border-radius-sm;
-  background-color: $color-white;
+  box-shadow: tokens.$box-shadow-sm;
+  border-radius: tokens.$border-radius-sm;
+  background-color: tokens.$color-white;
   position: relative;
 
   &::before {
@@ -46,38 +46,38 @@
   }
 
   .appPickerHeading {
-    color: $color-black;
-    padding: $spacing-lg;
+    color: tokens.$color-black;
+    padding: tokens.$spacing-lg;
     text-align: center;
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
     // The first gradient is all white, except for the bottom 3 pixels which
     // are transparent. That way, they leave a gap for the coloured background
     // that flows to the right, rendering it as a coloured bottom border.
     background-image: linear-gradient(
         to bottom,
-        $color-white calc(100% - 3px),
+        tokens.$color-white calc(100% - 3px),
         rgba(0, 0, 0, 0)
       ),
       linear-gradient(to right, #f73940 1.25%, #a83db5 96.87%);
-    border-radius: $border-radius-sm $border-radius-sm 0 0;
+    border-radius: tokens.$border-radius-sm tokens.$border-radius-sm 0 0;
 
     img {
-      height: $layout-sm;
+      height: tokens.$layout-sm;
     }
 
     h2 {
-      font: $text-body-md;
+      font: tokens.$text-body-md;
     }
   }
 
   ul {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: $spacing-md;
-    padding: $spacing-lg;
+    gap: tokens.$spacing-md;
+    padding: tokens.$spacing-lg;
     list-style-type: none;
   }
 
@@ -89,27 +89,27 @@
     .menuLink {
       display: flex;
       flex-direction: column;
-      color: $color-black;
+      color: tokens.$color-black;
       align-items: center;
       text-align: center;
       text-decoration: none;
 
-      font: $text-body-sm;
+      font: tokens.$text-body-sm;
 
       img {
-        height: $layout-sm;
-        padding: $spacing-lg;
+        height: tokens.$layout-sm;
+        padding: tokens.$spacing-lg;
         width: -moz-fit-content;
         width: fit-content;
         box-sizing: content-box;
-        border-radius: $border-radius-md;
+        border-radius: tokens.$border-radius-md;
       }
 
       &.mozillaLink {
-        color: $color-blue-50;
+        color: tokens.$color-blue-50;
         justify-content: center;
         width: 100%;
-        margin-top: $spacing-lg;
+        margin-top: tokens.$spacing-lg;
       }
     }
 
@@ -118,10 +118,10 @@
       cursor: pointer;
 
       .menuLink {
-        color: $color-violet-90;
+        color: tokens.$color-violet-90;
 
         img {
-          background-color: $color-violet-10;
+          background-color: tokens.$color-violet-10;
         }
       }
     }
diff --git a/src/app/components/client/toolbar/Toolbar.module.scss b/src/app/components/client/toolbar/Toolbar.module.scss
index c898e253664..2d47a546d48 100644
--- a/src/app/components/client/toolbar/Toolbar.module.scss
+++ b/src/app/components/client/toolbar/Toolbar.module.scss
@@ -1,8 +1,8 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .toolbar {
-  height: $tab-bar-height;
-  border-bottom: 1px solid $color-grey-20;
+  height: tokens.$tab-bar-height;
+  border-bottom: 1px solid tokens.$color-grey-20;
   display: flex;
   align-items: center;
 
@@ -10,17 +10,17 @@
     flex: 1 0 auto;
     display: flex;
     align-items: center;
-    padding-inline: $spacing-xl;
+    padding-inline: tokens.$spacing-xl;
   }
 
   .end {
-    padding-inline: $spacing-xl;
+    padding-inline: tokens.$spacing-xl;
     display: flex;
     align-items: center;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media screen and (max-width: tokens.$screen-md) {
     .start {
       justify-content: center;
     }
diff --git a/src/app/components/client/toolbar/UpsellBadge.module.scss b/src/app/components/client/toolbar/UpsellBadge.module.scss
index 2ceec6380d2..c1797e0ce4e 100644
--- a/src/app/components/client/toolbar/UpsellBadge.module.scss
+++ b/src/app/components/client/toolbar/UpsellBadge.module.scss
@@ -1,31 +1,31 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .upsellBadge {
   align-items: center;
   background: none;
-  border-radius: $border-radius-xl;
-  border: 1px solid $color-grey-40;
-  color: $color-black;
+  border-radius: tokens.$border-radius-xl;
+  border: 1px solid tokens.$color-grey-40;
+  color: tokens.$color-black;
   cursor: pointer;
   display: flex;
-  font: $text-body-md;
+  font: tokens.$text-body-md;
   font-weight: 600;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
   justify-content: center;
-  padding: $spacing-sm $spacing-md;
+  padding: tokens.$spacing-sm tokens.$spacing-md;
   user-select: none;
 
   .toggleIndicator {
-    background: $color-grey-40;
-    border-radius: $border-radius-md;
+    background: tokens.$color-grey-40;
+    border-radius: tokens.$border-radius-md;
     display: block;
     position: relative;
-    outline: $border-focus-width solid $color-grey-40;
+    outline: tokens.$border-focus-width solid tokens.$color-grey-40;
     height: 16px;
     width: 32px;
 
     &::after {
-      background-color: $color-white;
+      background-color: tokens.$color-white;
       border-radius: 50%;
       content: "";
       display: block;
@@ -49,7 +49,7 @@
       width: 16px;
 
       &::after {
-        background-color: $color-green-50;
+        background-color: tokens.$color-green-50;
       }
     }
   }
@@ -58,7 +58,7 @@
 .lastScanIndicator {
   display: flex;
   align-items: center;
-  font: $text-body-xs;
-  padding-inline: $spacing-md;
+  font: tokens.$text-body-xs;
+  padding-inline: tokens.$spacing-md;
   position: absolute;
 }
diff --git a/src/app/components/client/toolbar/UpsellDialog.module.scss b/src/app/components/client/toolbar/UpsellDialog.module.scss
index 158ae916e25..69936c55747 100644
--- a/src/app/components/client/toolbar/UpsellDialog.module.scss
+++ b/src/app/components/client/toolbar/UpsellDialog.module.scss
@@ -1,19 +1,19 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 .modalContent {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  padding: $spacing-sm;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$spacing-sm;
 
   dl {
     display: flex;
     flex-direction: column;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
     padding: 0;
 
     dt {
-      margin-bottom: $spacing-sm;
+      margin-bottom: tokens.$spacing-sm;
     }
 
     dd {
@@ -21,7 +21,7 @@
         no-repeat left top;
       list-style: none;
       margin: 0;
-      padding-left: $spacing-lg;
+      padding-left: tokens.$spacing-lg;
     }
   }
 
@@ -29,7 +29,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: $spacing-sm;
+    gap: tokens.$spacing-sm;
 
     .pricingInfoWrapper {
       display: flex;
@@ -43,13 +43,13 @@
   }
 
   .pricingPill {
-    margin-top: $spacing-lg;
+    margin-top: tokens.$spacing-lg;
     align-items: center;
-    border-radius: $border-radius-xl;
-    border: 2px solid $color-purple-70;
+    border-radius: tokens.$border-radius-xl;
+    border: 2px solid tokens.$color-purple-70;
     display: flex;
-    gap: $spacing-md;
-    padding: $spacing-sm $spacing-lg;
+    gap: tokens.$spacing-md;
+    padding: tokens.$spacing-sm tokens.$spacing-lg;
 
     .pricingLabel {
       display: flex;
diff --git a/src/app/components/client/toolbar/UserMenu.module.scss b/src/app/components/client/toolbar/UserMenu.module.scss
index 6df63699f90..dc487b4860d 100644
--- a/src/app/components/client/toolbar/UserMenu.module.scss
+++ b/src/app/components/client/toolbar/UserMenu.module.scss
@@ -1,4 +1,4 @@
-@import "../../../tokens";
+@use "../../../tokens";
 
 $button-size: 42px;
 
@@ -12,24 +12,24 @@ $button-size: 42px;
   width: $button-size;
   overflow: hidden;
 
-  @media screen and (max-width: $screen-md) {
-    margin-right: $spacing-sm;
+  @media screen and (max-width: tokens.$screen-md) {
+    margin-right: tokens.$spacing-sm;
   }
 
   &:focus,
   &:hover {
-    outline: 2px solid $color-purple-70;
+    outline: 2px solid tokens.$color-purple-70;
   }
 }
 
 .menuList {
-  border-radius: $border-radius-md;
-  box-shadow: $box-shadow-md;
-  font: $text-body-md;
+  border-radius: tokens.$border-radius-md;
+  box-shadow: tokens.$box-shadow-md;
+  font: tokens.$text-body-md;
   list-style-type: none;
-  min-width: $content-xs;
+  min-width: tokens.$content-xs;
   outline: 0;
-  padding: $spacing-sm 0;
+  padding: tokens.$spacing-sm 0;
   position: relative;
   right: 0;
 
@@ -39,12 +39,12 @@ $button-size: 42px;
     content: "";
     height: $tooltip-size;
     position: absolute;
-    right: calc($spacing-md + $button-size * 0.5);
+    right: calc(tokens.$spacing-md + $button-size * 0.5);
     top: 0;
     transform: translateY(-50%) rotate(45deg);
     width: $tooltip-size;
 
-    @media screen and (max-width: $screen-md) {
+    @media screen and (max-width: tokens.$screen-md) {
       right: calc($button-size * 0.5);
     }
   }
@@ -52,27 +52,27 @@ $button-size: 42px;
 
 .menuItemWrapper {
   cursor: pointer;
-  padding: $spacing-sm $spacing-lg;
+  padding: tokens.$spacing-sm tokens.$spacing-lg;
   position: relative;
 
   &:focus {
     outline: none;
-    background: $color-grey-10;
+    background: tokens.$color-grey-10;
   }
 
   &:first-of-type {
     // Margin to create visual space between the pseudo element and
     // the first item after it.
-    margin-bottom: $spacing-sm;
-    padding: calc($spacing-sm * 1.5) calc($spacing-md * 1.5);
+    margin-bottom: tokens.$spacing-sm;
+    padding: calc(tokens.$spacing-sm * 1.5) calc(tokens.$spacing-md * 1.5);
 
     b {
-      color: $color-purple-90;
-      margin-bottom: $spacing-xs;
+      color: tokens.$color-purple-90;
+      margin-bottom: tokens.$spacing-xs;
     }
 
     &::after {
-      background: $monitor-gradient;
+      background: tokens.$monitor-gradient;
       content: "";
       height: 2px;
       left: 0;
@@ -87,10 +87,10 @@ $button-size: 42px;
   align-items: center;
   background: none;
   border: 0;
-  color: $color-black;
+  color: tokens.$color-black;
   cursor: pointer;
   display: flex;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
   margin: 0;
   padding: 0;
   text-decoration: none;
diff --git a/src/app/components/server/BreachLogo.module.scss b/src/app/components/server/BreachLogo.module.scss
index b5b076ac47a..385195e483d 100644
--- a/src/app/components/server/BreachLogo.module.scss
+++ b/src/app/components/server/BreachLogo.module.scss
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import "../../tokens";
+@use "../../tokens";
 
 .breachLogo {
   height: 1.75rem;
@@ -19,94 +19,94 @@ span.breachLogo {
   text-align: center;
 
   &.purple40 {
-    background-color: $color-purple-40;
+    background-color: tokens.$color-purple-40;
   }
 
   &.purple30 {
-    background-color: $color-purple-30;
+    background-color: tokens.$color-purple-30;
   }
 
   &.purple10 {
-    background-color: $color-purple-10;
+    background-color: tokens.$color-purple-10;
   }
 
   &.purple05 {
-    background-color: $color-purple-05;
+    background-color: tokens.$color-purple-05;
   }
 
   &.green50 {
-    background-color: $color-green-50;
+    background-color: tokens.$color-green-50;
   }
 
   &.green40 {
-    background-color: $color-green-40;
+    background-color: tokens.$color-green-40;
   }
 
   &.green30 {
-    background-color: $color-green-30;
+    background-color: tokens.$color-green-30;
   }
 
   &.green20 {
-    background-color: $color-green-20;
+    background-color: tokens.$color-green-20;
   }
 
   &.green10 {
-    background-color: $color-green-10;
+    background-color: tokens.$color-green-10;
   }
 
   &.violet30 {
-    background-color: $color-violet-30;
+    background-color: tokens.$color-violet-30;
   }
 
   &.violet20 {
-    background-color: $color-violet-20;
+    background-color: tokens.$color-violet-20;
   }
 
   &.violet10 {
-    background-color: $color-violet-10;
+    background-color: tokens.$color-violet-10;
   }
 
   &.blue30 {
-    background-color: $color-blue-30;
+    background-color: tokens.$color-blue-30;
   }
 
   &.blue20 {
-    background-color: $color-blue-20;
+    background-color: tokens.$color-blue-20;
   }
 
   &.blue10 {
-    background-color: $color-blue-10;
+    background-color: tokens.$color-blue-10;
   }
 
   &.red30 {
-    background-color: $color-red-30;
+    background-color: tokens.$color-red-30;
   }
 
   &.red20 {
-    background-color: $color-red-20;
+    background-color: tokens.$color-red-20;
   }
 
   &.red10 {
-    background-color: $color-red-10;
+    background-color: tokens.$color-red-10;
   }
 
   &.orange30 {
-    background-color: $color-orange-30;
+    background-color: tokens.$color-orange-30;
   }
 
   &.orange20 {
-    background-color: $color-orange-20;
+    background-color: tokens.$color-orange-20;
   }
 
   &.orange10 {
-    background-color: $color-orange-10;
+    background-color: tokens.$color-orange-10;
   }
 
   &.pink20 {
-    background-color: $color-pink-20;
+    background-color: tokens.$color-pink-20;
   }
 
   &.pink10 {
-    background-color: $color-pink-10;
+    background-color: tokens.$color-pink-10;
   }
 }
diff --git a/src/app/components/server/StatusPill.module.scss b/src/app/components/server/StatusPill.module.scss
index 974551d8b9a..718e9a09d82 100644
--- a/src/app/components/server/StatusPill.module.scss
+++ b/src/app/components/server/StatusPill.module.scss
@@ -1,40 +1,40 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .pillWrapper {
-  font: $text-body-2xs;
+  font: tokens.$text-body-2xs;
   display: inline-block;
   line-height: 1;
   text-align: center;
 
-  @media screen and (min-width: $screen-sm) {
-    font: $text-body-xs;
+  @media screen and (min-width: tokens.$screen-sm) {
+    font: tokens.$text-body-xs;
     min-width: 145px; // keep the width fixed
   }
 
   .pill {
-    padding: $spacing-xs $spacing-sm;
-    border-radius: $border-radius-sm;
+    padding: tokens.$spacing-xs tokens.$spacing-sm;
+    border-radius: tokens.$border-radius-sm;
     font-weight: 600;
 
-    @media screen and (min-width: $screen-sm) {
-      padding: $spacing-xs 0;
+    @media screen and (min-width: tokens.$screen-sm) {
+      padding: tokens.$spacing-xs 0;
     }
 
     &.actionNeeded {
-      background: $color-red-10;
+      background: tokens.$color-red-10;
     }
 
     &.requestedRemoval {
-      background: $color-violet-10;
+      background: tokens.$color-violet-10;
     }
 
     &.inProgress {
-      background: $color-blue-05;
+      background: tokens.$color-blue-05;
     }
 
     &.removed,
     &.fixed {
-      background: $color-green-20;
+      background: tokens.$color-green-20;
     }
   }
 }
diff --git a/src/app/components/server/VisuallyHidden.module.scss b/src/app/components/server/VisuallyHidden.module.scss
index 02087926655..c2cdac6b6c4 100644
--- a/src/app/components/server/VisuallyHidden.module.scss
+++ b/src/app/components/server/VisuallyHidden.module.scss
@@ -1,5 +1,5 @@
-@import "../../tokens";
+@use "../../tokens";
 
 .visuallyHidden {
-  @include visually-hidden;
+  @include tokens.visually-hidden;
 }
diff --git a/src/app/not-found.module.scss b/src/app/not-found.module.scss
index df7187381ac..c2a1be08ed2 100644
--- a/src/app/not-found.module.scss
+++ b/src/app/not-found.module.scss
@@ -1,4 +1,4 @@
-@import "./tokens";
+@use "tokens";
 
 .wrapper {
   background-image: url("./(proper_react)/images/error-bg.svg");
@@ -25,6 +25,6 @@
   font: var(--h3-font);
   font-weight: bold;
   font-size: 10rem;
-  color: $color-purple-60;
-  text-shadow: 0.75rem 0 0 $color-purple-20;
+  color: tokens.$color-purple-60;
+  text-shadow: 0.75rem 0 0 tokens.$color-purple-20;
 }
diff --git a/src/app/tokens.scss b/src/app/tokens.scss
index 3114e73bcbe..a6cc82d7ad7 100644
--- a/src/app/tokens.scss
+++ b/src/app/tokens.scss
@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "sass:math";
+
 // Nebula Colours //
 // Purple:
 $color-purple-90: #321c64;
@@ -228,40 +231,41 @@ $layout-2xl: 192px;
 // In most cases they'll snap to one of the clamped values though, so it
 // doesn't matter too much.
 $text-title-lg:
-  700 clamp(48px, 4.4svw, 56px) / clamp(48px, 4.4svw, 56px)
+  700 list.slash(clamp(48px, 4.4svw, 56px), clamp(48px, 4.4svw, 56px))
     var(--font-metropolis),
   sans-serif;
 $text-title-md:
-  700 clamp(38px, 3.8svw, 48px) / clamp(40px, 3.8svw, 48px)
+  700 list.slash(clamp(38px, 3.8svw, 48px), clamp(40px, 3.8svw, 48px))
     var(--font-metropolis),
   sans-serif;
 $text-title-sm:
-  700 clamp(28px, 3svw, 38px) / clamp(30px, 3.16svw, 40px)
+  700 list.slash(clamp(28px, 3svw, 38px), clamp(30px, 3.16svw, 40px))
     var(--font-metropolis),
   sans-serif;
 $text-title-xs:
-  700 clamp(24px, 2.2svw, 28px) / clamp(26px, 2.4svw, 30px)
+  700 list.slash(clamp(24px, 2.2svw, 28px), clamp(26px, 2.4svw, 30px))
     var(--font-metropolis),
   sans-serif;
 $text-title-2xs:
-  700 clamp(20px, 1.6svw, 24px) / clamp(20px, 2svw, 26px) var(--font-metropolis),
+  700 list.slash(clamp(20px, 1.6svw, 24px), clamp(20px, 2svw, 26px))
+    var(--font-metropolis),
   sans-serif;
 $text-title-3xs:
-  700 clamp(16px, 1.4svw, 18px) / 20px var(--font-metropolis),
+  700 list.slash(clamp(16px, 1.4svw, 18px), 20px) var(--font-metropolis),
   sans-serif;
 
 // Body copy
 $text-body-xl:
-  400 clamp(18px, 1.7svw, 21px) / 1.5 var(--font-inter),
+  400 list.slash(clamp(18px, 1.7svw, 21px), 1.5) var(--font-inter),
   sans-serif;
 $text-body-lg:
-  400 clamp(16px, 1.5svw, 18px) / 1.5 var(--font-inter),
+  400 list.slash(clamp(16px, 1.5svw, 18px), 1.5) var(--font-inter),
   sans-serif;
 $text-body-md:
-  400 clamp(14px, 1.3svw, 16px) / 1.5 var(--font-inter),
+  400 list.slash(clamp(14px, 1.3svw, 16px), 1.5) var(--font-inter),
   sans-serif;
 $text-body-sm:
-  400 clamp(12px, 1.14svw, 14px) / 1.5 var(--font-inter),
+  400 list.slash(clamp(12px, 1.14svw, 14px), 1.5) var(--font-inter),
   sans-serif;
 $text-body-xs:
   400 12px / 1.5 var(--font-inter),

From 300a9ec3c82112f0ca3f265a9bec528a60f479de Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 4 Jan 2025 02:19:34 +0000
Subject: [PATCH 9/9] chore(deps): bump next from 14.2.15 to 14.2.22

Bumps [next](https://github.com/vercel/next.js) from 14.2.15 to 14.2.22.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/compare/v14.2.15...v14.2.22)

---
updated-dependencies:
- dependency-name: next
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 88 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 17585b86417..7ab304a422a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "jwk-to-pem": "^2.0.7",
         "knex": "^3.1.0",
         "mjml": "^4.15.3",
-        "next": "^14.2.15",
+        "next": "^14.2.22",
         "next-auth": "^4.24.11",
         "nodemailer": "^6.9.16",
         "pg": "^8.13.1",
@@ -4766,9 +4766,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz",
-      "integrity": "sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ=="
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.22.tgz",
+      "integrity": "sha512-EQ6y1QeNQglNmNIXvwP/Bb+lf7n9WtgcWvtoFsHquVLCJUuxRs+6SfZ5EK0/EqkkLex4RrDySvKgKNN7PXip7Q=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.2.15",
@@ -4822,9 +4822,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.15.tgz",
-      "integrity": "sha512-Rvh7KU9hOUBnZ9TJ28n2Oa7dD9cvDBKua9IKx7cfQQ0GoYUwg9ig31O2oMwH3wm+pE3IkAQ67ZobPfEgurPZIA==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.22.tgz",
+      "integrity": "sha512-HUaLiehovgnqY4TMBZJ3pDaOsTE1spIXeR10pWgdQVPYqDGQmHJBj3h3V6yC0uuo/RoY2GC0YBFRkOX3dI9WVQ==",
       "cpu": [
         "arm64"
       ],
@@ -4837,9 +4837,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.15.tgz",
-      "integrity": "sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.22.tgz",
+      "integrity": "sha512-ApVDANousaAGrosWvxoGdLT0uvLBUC+srqOcpXuyfglA40cP2LBFaGmBjhgpxYk5z4xmunzqQvcIgXawTzo2uQ==",
       "cpu": [
         "x64"
       ],
@@ -4852,9 +4852,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.15.tgz",
-      "integrity": "sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.22.tgz",
+      "integrity": "sha512-3O2J99Bk9aM+d4CGn9eEayJXHuH9QLx0BctvWyuUGtJ3/mH6lkfAPRI4FidmHMBQBB4UcvLMfNf8vF0NZT7iKw==",
       "cpu": [
         "arm64"
       ],
@@ -4867,9 +4867,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.15.tgz",
-      "integrity": "sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.22.tgz",
+      "integrity": "sha512-H/hqfRz75yy60y5Eg7DxYfbmHMjv60Dsa6IWHzpJSz4MRkZNy5eDnEW9wyts9bkxwbOVZNPHeb3NkqanP+nGPg==",
       "cpu": [
         "arm64"
       ],
@@ -4882,9 +4882,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.15.tgz",
-      "integrity": "sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.22.tgz",
+      "integrity": "sha512-LckLwlCLcGR1hlI5eiJymR8zSHPsuruuwaZ3H2uudr25+Dpzo6cRFjp/3OR5UYJt8LSwlXv9mmY4oI2QynwpqQ==",
       "cpu": [
         "x64"
       ],
@@ -4897,9 +4897,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.15.tgz",
-      "integrity": "sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.22.tgz",
+      "integrity": "sha512-qGUutzmh0PoFU0fCSu0XYpOfT7ydBZgDfcETIeft46abPqP+dmePhwRGLhFKwZWxNWQCPprH26TjaTxM0Nv8mw==",
       "cpu": [
         "x64"
       ],
@@ -4912,9 +4912,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.15.tgz",
-      "integrity": "sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.22.tgz",
+      "integrity": "sha512-K6MwucMWmIvMb9GlvT0haYsfIPxfQD8yXqxwFy4uLFMeXIb2TcVYQimxkaFZv86I7sn1NOZnpOaVk5eaxThGIw==",
       "cpu": [
         "arm64"
       ],
@@ -4927,9 +4927,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.15.tgz",
-      "integrity": "sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.22.tgz",
+      "integrity": "sha512-5IhDDTPEbzPR31ZzqHe90LnNe7BlJUZvC4sA1thPJV6oN5WmtWjZ0bOYfNsyZx00FJt7gggNs6SrsX0UEIcIpA==",
       "cpu": [
         "ia32"
       ],
@@ -4942,9 +4942,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.15.tgz",
-      "integrity": "sha512-SzqGbsLsP9OwKNUG9nekShTwhj6JSB9ZLMWQ8g1gG6hdE5gQLncbnbymrwy2yVmH9nikSLYRYxYMFu78Ggp7/g==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.22.tgz",
+      "integrity": "sha512-nvRaB1PyG4scn9/qNzlkwEwLzuoPH3Gjp7Q/pLuwUgOTt1oPMlnCI3A3rgkt+eZnU71emOiEv/mR201HoURPGg==",
       "cpu": [
         "x64"
       ],
@@ -20436,11 +20436,11 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/next": {
-      "version": "14.2.15",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.15.tgz",
-      "integrity": "sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==",
+      "version": "14.2.22",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.22.tgz",
+      "integrity": "sha512-Ps2caobQ9hlEhscLPiPm3J3SYhfwfpMqzsoCMZGWxt9jBRK9hoBZj2A37i8joKhsyth2EuVKDVJCTF5/H4iEDw==",
       "dependencies": {
-        "@next/env": "14.2.15",
+        "@next/env": "14.2.22",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -20455,15 +20455,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.15",
-        "@next/swc-darwin-x64": "14.2.15",
-        "@next/swc-linux-arm64-gnu": "14.2.15",
-        "@next/swc-linux-arm64-musl": "14.2.15",
-        "@next/swc-linux-x64-gnu": "14.2.15",
-        "@next/swc-linux-x64-musl": "14.2.15",
-        "@next/swc-win32-arm64-msvc": "14.2.15",
-        "@next/swc-win32-ia32-msvc": "14.2.15",
-        "@next/swc-win32-x64-msvc": "14.2.15"
+        "@next/swc-darwin-arm64": "14.2.22",
+        "@next/swc-darwin-x64": "14.2.22",
+        "@next/swc-linux-arm64-gnu": "14.2.22",
+        "@next/swc-linux-arm64-musl": "14.2.22",
+        "@next/swc-linux-x64-gnu": "14.2.22",
+        "@next/swc-linux-x64-musl": "14.2.22",
+        "@next/swc-win32-arm64-msvc": "14.2.22",
+        "@next/swc-win32-ia32-msvc": "14.2.22",
+        "@next/swc-win32-x64-msvc": "14.2.22"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
diff --git a/package.json b/package.json
index e220e46efbe..21da4ab46b1 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "jwk-to-pem": "^2.0.7",
     "knex": "^3.1.0",
     "mjml": "^4.15.3",
-    "next": "^14.2.15",
+    "next": "^14.2.22",
     "next-auth": "^4.24.11",
     "nodemailer": "^6.9.16",
     "pg": "^8.13.1",