From 7a498b02cfe3ab1ec0c3ef0f12984d98e3acb74b Mon Sep 17 00:00:00 2001
From: ap-justin <89639563+ap-justin@users.noreply.github.com>
Date: Sun, 26 Jan 2025 22:56:04 +0800
Subject: [PATCH] tailwind v4

---
 biome.json                                    |    7 +-
 package.json                                  |   11 +-
 postcss.config.js                             |    6 -
 src/components/BankDetails/BankDetails.tsx    |    2 +-
 .../RecipientDetailsForm.tsx                  |    2 +-
 src/components/ContentLoader.tsx              |    4 +-
 src/components/CountrySelector/Options.tsx    |    4 +-
 .../CurrencySelector/CurrencyOptions.tsx      |    6 +-
 .../DonateMethods/DonateMethods.tsx           |    2 +-
 src/components/FileDropzone/FileDropzone.tsx  |    2 +-
 src/components/Group.tsx                      |    2 +-
 src/components/Header/NavDropdown.tsx         |    8 +-
 .../Header/UserMenu/EndowmentLink.tsx         |    2 +-
 src/components/ImgEditor/ImgCropper.tsx       |    4 +-
 src/components/ImgEditor/ImgEditor.tsx        |    2 +-
 src/components/KYCForm/KYCForm.tsx            |    2 +-
 src/components/LoaderRing.tsx                 |    2 +-
 src/components/Modal.tsx                      |    2 +-
 src/components/Prompt/PromptV2.tsx            |    2 +-
 src/components/RichText/RichText.tsx          |    2 +-
 src/components/RichText/richtext.css          |   30 +-
 src/components/Selector/MultiSelector.tsx     |    8 +-
 src/components/Selector/NativeSelect.tsx      |    2 +-
 src/components/Selector/Selector.tsx          |    2 +-
 src/components/Selector/constants.ts          |    4 +-
 .../TokenField/TokenSelector/TokenOptions.tsx |    8 +-
 .../TokenSelector/TokenSelector.tsx           |    2 +-
 src/components/VerifiedIcon.tsx               |    2 +-
 src/components/admin/TemplateContainer.tsx    |    2 +-
 .../Steps/DonateMethods/DonateMethods.tsx     |    8 +-
 .../Steps/DonateMethods/Stocks/Form.tsx       |    2 +-
 .../Steps/DonateMethods/Stripe/Frequency.tsx  |    2 +-
 src/components/donation/Steps/Share.tsx       |    6 +-
 .../Steps/Submit/Crypto/DirectMode.tsx        |    2 +-
 .../donation/Steps/Submit/Loader.tsx          |    2 +-
 .../donation/Steps/Submit/Stocks.tsx          |    6 +-
 .../Steps/Submit/StripeCheckout/Checkout.tsx  |    2 +-
 .../Submit/StripeCheckout/Paypal/Checkout.tsx |    2 +-
 src/components/donation/Steps/Tip/Tip.tsx     |    6 +-
 .../donation/Steps/common/ContinueBtn.tsx     |    2 +-
 .../donation/Steps/common/Incrementers.tsx    |    2 +-
 .../donation/Steps/common/ProgramSelector.tsx |    2 +-
 src/components/donation/index.ts              |    8 +-
 src/components/error/ErrorModal.tsx           |    2 +-
 src/components/form/Input.tsx                 |    2 +-
 src/components/form/PasswordInput.tsx         |    4 +-
 src/components/form/constants.ts              |    2 +-
 .../goal-selector/goal-selector.tsx           |    4 +-
 src/components/target.tsx                     |    2 +-
 src/cookie-consent.css                        |   21 +-
 src/index.css                                 |  153 +-
 src/pages/@sections/HeroBottom/Card.tsx       |    2 +-
 src/pages/@sections/HeroBottom/HeroBottom.tsx |    2 +-
 .../@sections/HeroBottom/styles.module.css    |    6 +-
 .../Banking/PayoutMethod/DeletePrompt.tsx     |    4 +-
 .../Banking/PayoutMethod/PayoutMethod.tsx     |    4 +-
 .../Charity/Banking/PayoutMethods/Table.tsx   |    4 +-
 .../Admin/Charity/Dashboard/Dashboard.tsx     |    2 +-
 src/pages/Admin/Charity/Dashboard/Figure.tsx  |    2 +-
 .../Admin/Charity/Dashboard/LiqActions.tsx    |    4 +-
 src/pages/Admin/Charity/Dashboard/Loaded.tsx  |    2 +-
 .../Admin/Charity/Dashboard/LockActions.tsx   |    4 +-
 .../Admin/Charity/Dashboard/MoveFundForm.tsx  |    2 +-
 .../Admin/Charity/Dashboard/Movements.tsx     |    2 +-
 .../Dashboard/PayoutHistory/LoadMoreBtn.tsx   |    2 +-
 .../Charity/Dashboard/PayoutHistory/Table.tsx |    2 +-
 .../Dashboard/Schedule/AllocationOptions.tsx  |    2 +-
 .../Admin/Charity/Dashboard/Schedule/Edit.tsx |    6 +-
 .../Charity/Dashboard/Schedule/Schedule.tsx   |    2 +-
 src/pages/Admin/Charity/Dashboard/Summary.tsx |    4 +-
 .../Charity/Donations/DonationsTable.tsx      |    2 +-
 src/pages/Admin/Charity/Donations/Table.tsx   |    4 +-
 src/pages/Admin/Charity/EditProfile/Form.tsx  |    6 +-
 src/pages/Admin/Charity/Funds/Funds.tsx       |    2 +-
 src/pages/Admin/Charity/Media/Media.tsx       |    4 +-
 src/pages/Admin/Charity/Media/VideoEditor.tsx |    2 +-
 .../Admin/Charity/Media/VideoPreview.tsx      |    2 +-
 src/pages/Admin/Charity/Media/Videos/List.tsx |    2 +-
 src/pages/Admin/Charity/Members/AddForm.tsx   |    2 +-
 src/pages/Admin/Charity/Members/List.tsx      |    2 +-
 .../ProgramEditor/Milestone/Milestone.tsx     |    6 +-
 .../Charity/ProgramEditor/Milestones.tsx      |    2 +-
 .../ProgramEditor/ProgramInfo/ProgramInfo.tsx |    4 +-
 src/pages/Admin/Charity/Programs/List.tsx     |    2 +-
 src/pages/Admin/Charity/Settings/Form.tsx     |    6 +-
 src/pages/Application/Container.tsx           |    4 +-
 src/pages/Application/Loaded.tsx              |    2 +-
 src/pages/Application/Prompt.tsx              |    6 +-
 src/pages/Applications/Applications.tsx       |    4 +-
 src/pages/Applications/Filter/Form.tsx        |    4 +-
 src/pages/Applications/Filter/index.tsx       |    2 +-
 src/pages/Applications/LoadMoreBtn.tsx        |    2 +-
 src/pages/Applications/Table.tsx              |    4 +-
 src/pages/BankingApplication/Loaded.tsx       |    2 +-
 src/pages/BankingApplication/Prompt.tsx       |    6 +-
 src/pages/BankingApplications/Filter/Form.tsx |    4 +-
 .../BankingApplications/Filter/index.tsx      |    2 +-
 src/pages/BankingApplications/LoadMoreBtn.tsx |    2 +-
 src/pages/BankingApplications/Table.tsx       |    4 +-
 src/pages/Blog/Post.tsx                       |    2 +-
 src/pages/Donate/OrgCard.tsx                  |    2 +-
 src/pages/Funds/Cards/Card.tsx                |    2 +-
 src/pages/Funds/CreateFund/CreateFund.tsx     |    6 +-
 .../EndowmentSelector/EndowmentSelector.tsx   |    6 +-
 .../CreateFund/EndowmentSelector/Options.tsx  |    2 +-
 src/pages/Funds/EditFund/Form.tsx             |    6 +-
 src/pages/Funds/Fund/index.tsx                |    2 +-
 src/pages/Funds/Fund/share.tsx                |    6 +-
 src/pages/Funds/Fund/video.tsx                |    2 +-
 src/pages/Funds/common/videos/video-modal.tsx |    4 +-
 .../Funds/common/videos/video-preview.tsx     |    2 +-
 src/pages/Home/Blogs/Blogs.tsx                |    2 +-
 src/pages/Home/BottomCta.tsx                  |    2 +-
 src/pages/Home/Feature1.tsx                   |    2 +-
 src/pages/Home/Header/SearchField.tsx         |    2 +-
 src/pages/Home/Testimonials/Testimonials.tsx  |    2 +-
 src/pages/Home/Video.tsx                      |    2 +-
 src/pages/Marketplace/Filter/Countries.tsx    |   12 +-
 src/pages/Marketplace/Filter/Filter.tsx       |    4 +-
 .../GeneralInfo/DetailsColumn/Balances.tsx    |    2 +-
 .../DetailsColumn/DetailsColumn.tsx           |    4 +-
 .../GeneralInfo/DetailsColumn/Fundraisers.tsx |    2 +-
 src/pages/Profile/Body/GeneralInfo/Media.tsx  |    2 +-
 .../Profile/Body/GeneralInfo/Programs.tsx     |    2 +-
 src/pages/Profile/Body/Program/Milestones.tsx |    2 +-
 src/pages/Profile/Body/common/Container.tsx   |    6 +-
 .../Registration/Steps/Banking/Banking.tsx    |    4 +-
 .../Form/ReferralMethodSelector.tsx           |    8 +-
 .../ContactDetails/Form/RoleSelector.tsx      |    8 +-
 .../Steps/ContactDetails/Form/index.tsx       |   18 +-
 .../Steps/Documentation/FSA/Form/useSubmit.ts |    2 +-
 src/pages/Registration/Steps/Reference.tsx    |    2 +-
 src/pages/Registration/Steps/steps-layout.tsx |    2 +-
 .../UserDashboard/Donations/Filter/Form.tsx   |    4 +-
 .../UserDashboard/Donations/Filter/index.tsx  |    2 +-
 .../UserDashboard/Donations/MobileTable.tsx   |    2 +-
 .../Donations/PaymentResumer.tsx              |    2 +-
 .../UserDashboard/Donations/StatusTabs.tsx    |   12 +-
 src/pages/UserDashboard/Donations/Table.tsx   |    2 +-
 src/pages/UserDashboard/Donations/index.tsx   |    6 +-
 src/pages/UserDashboard/EditProfile/Form.tsx  |    2 +-
 src/pages/Widget/Configurer/Configurer.tsx    |    4 +-
 .../Configurer/EndowmentSelector/Options.tsx  |    4 +-
 src/pages/Widget/Preview.tsx                  |    2 +-
 src/pages/Widget/Snippet/Snippet.tsx          |    2 +-
 src/pages/donate-fund/fund-card.tsx           |    2 +-
 src/pages/informational/DonorInfo/Hero.tsx    |    2 +-
 .../informational/NonprofitInfo/BottomCta.tsx |    2 +-
 .../NonprofitInfo/FiscalSponsorship.tsx       |    2 +-
 .../informational/NonprofitInfo/Hero.tsx      |    2 +-
 .../NonprofitInfo/NonprofitInfo.tsx           |   22 +-
 .../NonprofitInfo/Testimonials.tsx            |    4 +-
 src/pages/informational/NonprofitInfo/faq.tsx |    6 +-
 src/pages/informational/WpPlugin.tsx          |    4 +-
 src/pages/informational/about/bottom-cta.tsx  |    2 +-
 src/pages/informational/about/index.tsx       |   12 +-
 src/styles/components.css                     |  290 ++--
 src/styles/utilities.css                      |   50 +-
 src/types/components.ts                       |    2 +-
 tailwind.config.js                            |  145 --
 vite.config.js                                |    7 +-
 yarn.lock                                     | 1247 +++++++++++------
 162 files changed, 1470 insertions(+), 1039 deletions(-)
 delete mode 100644 postcss.config.js
 delete mode 100644 tailwind.config.js

diff --git a/biome.json b/biome.json
index b9de57c17c..e63c69ecd1 100644
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -47,7 +47,7 @@
         "noSwitchDeclarations": "off",
         "noChildrenProp": "off",
         "noUnusedVariables": "warn",
-        "noUnusedImports":"warn",
+        "noUnusedImports": "warn",
         "useJsxKeyInIterable": "off"
       },
       "a11y": {
@@ -55,7 +55,8 @@
         "useAltText": "off",
         "useKeyWithMouseEvents": "off",
         "useKeyWithClickEvents": "off",
-        "noSvgWithoutTitle": "off"
+        "noSvgWithoutTitle": "off",
+        "noLabelWithoutControl": "off"
       }
     }
   },
diff --git a/package.json b/package.json
index c5520dde7b..6b92fc1876 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@sentry/react": "8.47.0",
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.3.0",
+    "@tailwindcss/vite": "^4.0.0",
     "@vercel/blob": "0.27.1",
     "@vercel/kv": "3.0.0",
     "@vercel/remix": "2.15.2",
@@ -95,10 +96,9 @@
   },
   "devDependencies": {
     "@aws-lite/dynamodb-types": "0.3.11",
-    "@biomejs/biome": "1.8.1",
+    "@biomejs/biome": "1.9.4",
     "@remix-run/dev": "2.15.2",
     "@remix-run/testing": "2.15.2",
-    "@tailwindcss/container-queries": "0.1.1",
     "@tailwindcss/typography": "0.5.15",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.6",
@@ -110,15 +110,12 @@
     "@types/react": "18.2.62",
     "@types/react-csv": "1.1.10",
     "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.20",
     "jsdom": "24.1.0",
     "lefthook": "1.6.15",
     "msw": "2.3.1",
-    "postcss": "8.4.49",
-    "postcss-import": "16.1.0",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.5",
-    "vite": "5.1.0",
+    "vite": "5.2.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "2.1.8"
   }
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 2aa7205d4b..0000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/src/components/BankDetails/BankDetails.tsx b/src/components/BankDetails/BankDetails.tsx
index 29480dc62c..3df6f232ff 100644
--- a/src/components/BankDetails/BankDetails.tsx
+++ b/src/components/BankDetails/BankDetails.tsx
@@ -71,7 +71,7 @@ export default function BankDetails({
         disabled={isSubmitting}
       />
 
-      <Separator classes="before:bg-gray-l3 after:bg-gray-l3 before:dark:bg-navy after:dark:bg-navy" />
+      <Separator classes="before:bg-gray-l3 after:bg-gray-l3 dark:before:bg-navy dark:after:bg-navy" />
 
       <RecipientDetails
         amount={amnt}
diff --git a/src/components/BankDetails/RecipientDetails/RecipientDetailsForm/RecipientDetailsForm.tsx b/src/components/BankDetails/RecipientDetails/RecipientDetailsForm/RecipientDetailsForm.tsx
index c25f5b735b..bdcdaa5e5c 100644
--- a/src/components/BankDetails/RecipientDetails/RecipientDetailsForm/RecipientDetailsForm.tsx
+++ b/src/components/BankDetails/RecipientDetails/RecipientDetailsForm/RecipientDetailsForm.tsx
@@ -204,7 +204,7 @@ export default function RecipientDetailsForm({
                       !!getFieldState(f.key).error
                         ? "border-red"
                         : "border-gray-l4"
-                    } rounded px-4 py-3.5 text-sm has-[:checked]:border-blue-d1 has-[:disabled]:bg-gray-l5 w-32 h-10 focus-within:ring-1 focus-within:ring-blue-l2`}
+                    } rounded px-4 py-3.5 text-sm has-checked:border-blue-d1 has-disabled:bg-gray-l5 w-32 h-10 focus-within:ring-1 focus-within:ring-blue-l2`}
                   >
                     <input
                       className="appearance none w-0 h-0"
diff --git a/src/components/ContentLoader.tsx b/src/components/ContentLoader.tsx
index f784d398e5..180297bb1b 100644
--- a/src/components/ContentLoader.tsx
+++ b/src/components/ContentLoader.tsx
@@ -7,7 +7,9 @@ export default function ContentLoader({
   return (
     <div
       {...props}
-      className={className + " bg-gray-l4 dark:bg-navy animate-pulse rounded"}
+      className={
+        className + " bg-gray-l4 dark:bg-navy animate-pulse rounded-sm"
+      }
     />
   );
 }
diff --git a/src/components/CountrySelector/Options.tsx b/src/components/CountrySelector/Options.tsx
index a4dba40b96..113ea3a377 100644
--- a/src/components/CountrySelector/Options.tsx
+++ b/src/components/CountrySelector/Options.tsx
@@ -3,7 +3,7 @@ import { isEmpty } from "helpers";
 import type { Country } from "types/components";
 
 const containerStyle =
-  "absolute top-full mt-2 z-10 w-full bg-white dark:bg-blue-d6 shadow-lg rounded overflow-y-scroll scroller";
+  "absolute top-full mt-2 z-10 w-full bg-white dark:bg-blue-d6 shadow-lg rounded-sm overflow-y-scroll scroller";
 
 type Props = {
   query: string;
@@ -22,7 +22,7 @@ export default function Options({ query, options }: Props) {
       {(!isEmpty(options) &&
         filtered.map((country) => (
           <ComboboxOption
-            className="data-[selected]:bg-blue-l2 hover:bg-blue-l2 flex items-center gap-2 p-2 text-sm font-heading"
+            className="data-selected:bg-blue-l2 hover:bg-blue-l2 flex items-center gap-2 p-2 text-sm font-heading"
             key={country.name}
             value={country}
           >
diff --git a/src/components/CurrencySelector/CurrencyOptions.tsx b/src/components/CurrencySelector/CurrencyOptions.tsx
index e347823175..6840b14c20 100644
--- a/src/components/CurrencySelector/CurrencyOptions.tsx
+++ b/src/components/CurrencySelector/CurrencyOptions.tsx
@@ -43,19 +43,19 @@ export default function CurrencyOptions({
       classes={{
         container:
           classes +
-          " font-heading bg-white w-full rounded border border-gray-l4 p-2 text-sm text-navy-l1 shadow-lg",
+          " font-heading bg-white w-full rounded-sm border border-gray-l4 p-2 text-sm text-navy-l1 shadow-lg",
       }}
     >
       {(currencies) => (
         <ComboboxOptions
           anchor="bottom"
-          className={`${classes} w-[var(--input-width)] bg-white dark:bg-blue-d6 shadow-lg rounded [--anchor-max-height:13rem] overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-none`}
+          className={`${classes} w-[var(--input-width)] bg-white dark:bg-blue-d6 shadow-lg rounded-sm [--anchor-max-height:13rem] overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-hidden`}
         >
           {currencies.map(({ code, name, min, rate }) => (
             <ComboboxOption
               key={code}
               value={{ code, name, min, rate }}
-              className="flex items-center gap-2 p-2 cursor-pointer truncate data-[selected]:bg-[--accent-secondary] hover:bg-[--accent-secondary]"
+              className="flex items-center gap-2 p-2 cursor-pointer truncate data-selected:bg-(--accent-secondary) hover:bg-(--accent-secondary)"
             >
               {!!name ? `${code.toUpperCase()} - ${name}` : code.toUpperCase()}
             </ComboboxOption>
diff --git a/src/components/DonateMethods/DonateMethods.tsx b/src/components/DonateMethods/DonateMethods.tsx
index 6d890fc418..6c936e7475 100644
--- a/src/components/DonateMethods/DonateMethods.tsx
+++ b/src/components/DonateMethods/DonateMethods.tsx
@@ -91,7 +91,7 @@ function Method({
       dragControls={controls}
       id={value.id}
       style={{ y }}
-      className="flex items-center gap-2 border border-gray-l4 p-3 aria-disabled:bg-gray-l4 aria-disabled:text-gray rounded bg-white select-none"
+      className="flex items-center gap-2 border border-gray-l4 p-3 aria-disabled:bg-gray-l4 aria-disabled:text-gray rounded-sm bg-white select-none"
     >
       <input
         type="checkbox"
diff --git a/src/components/FileDropzone/FileDropzone.tsx b/src/components/FileDropzone/FileDropzone.tsx
index 292ed5afa2..0bf8069b60 100644
--- a/src/components/FileDropzone/FileDropzone.tsx
+++ b/src/components/FileDropzone/FileDropzone.tsx
@@ -55,7 +55,7 @@ export const FileDropzone = forwardRef<El, Props>((props, ref) => {
         data-disabled={props.disabled || props.value === "loading"}
         {...getRootProps({
           className: `relative grid place-items-center rounded border border-gray-l2 border-dashed w-full h-[11.375rem]
-          focus:outline-none focus:ring-2 data-[drag="true"]:ring-2 has-[:active]:ring-2 ring-blue-d1 ring-offset-2 
+          focus:outline-hidden focus:ring-2 data-[drag="true"]:ring-2 has-active:ring-2 ring-blue-d1 ring-offset-2 
           hover:bg-blue-l5
           data-[disabled="true"]:bg-gray-l5 data-[disabled="true"]:pointer-events-none data-[disabled="true"]:ring-0
           data-[invalid="true"]:border-red
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index e4bf231e14..7209d71e8d 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -12,7 +12,7 @@ export default function Group({
 }>) {
   return (
     <div
-      className={`grid w-full gap-6 p-6 border border-gray-l4 rounded bg-white dark:bg-blue-d6 ${className}`}
+      className={`grid w-full gap-6 p-6 border border-gray-l4 rounded-sm bg-white dark:bg-blue-d6 ${className}`}
     >
       {title && <h3 className="text-2xl">{title}</h3>}
       {description && (
diff --git a/src/components/Header/NavDropdown.tsx b/src/components/Header/NavDropdown.tsx
index 79ef56cf8e..ee258c8ea2 100644
--- a/src/components/Header/NavDropdown.tsx
+++ b/src/components/Header/NavDropdown.tsx
@@ -24,17 +24,17 @@ export default function NavDropdown({ user, isInAuth }: Props) {
     <HuiMenu>
       <MenuButton
         data-testid="nav_dropdown"
-        className="text-white data-[open]:text-white/90 group flex justify-center items-center hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
+        className="text-white data-open:text-white/90 group flex justify-center items-center hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"
         aria-label="Navigation Menu"
       >
         <MenuIcon
           size={24}
-          className="text-navy-l2 data-[open]:text-navy-l2/70 sm:hidden transition duration-150 ease-in-out group-hover:text-navy-l2/80"
+          className="text-navy-l2 data-open:text-navy-l2/70 sm:hidden transition duration-150 ease-in-out group-hover:text-navy-l2/80"
           aria-hidden="true"
         />
         <ChevronDown
           size={20}
-          className="text-blue-d7 data-[open]:text-blue-d7/70 max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80"
+          className="text-blue-d7 data-open:text-blue-d7/70 max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80"
           aria-hidden="true"
         />
       </MenuButton>
@@ -43,7 +43,7 @@ export default function NavDropdown({ user, isInAuth }: Props) {
         transition
         anchor={{ to: "bottom end", gap: 10 }}
         as="nav"
-        className="grid isolate z-40 rounded-lg bg-gray-l6 drop-shadow-2xl scroller origin-top transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
+        className="grid isolate z-40 rounded-lg bg-gray-l6 drop-shadow-2xl scroller origin-top transition duration-100 ease-out data-closed:scale-95 data-closed:opacity-0"
       >
         <div className="p-5 grid gap-y-2 w-80">
           <MenuItem>
diff --git a/src/components/Header/UserMenu/EndowmentLink.tsx b/src/components/Header/UserMenu/EndowmentLink.tsx
index ad78d49bf8..c536eecc95 100644
--- a/src/components/Header/UserMenu/EndowmentLink.tsx
+++ b/src/components/Header/UserMenu/EndowmentLink.tsx
@@ -46,7 +46,7 @@ export function Skeleton() {
       aria-disabled={true}
     >
       <ContentLoader className="w-[20px] h-[20px] rounded-full" />
-      <ContentLoader className="h-[20px] w-40 rounded" />
+      <ContentLoader className="h-[20px] w-40 rounded-sm" />
     </a>
   );
 }
diff --git a/src/components/ImgEditor/ImgCropper.tsx b/src/components/ImgEditor/ImgCropper.tsx
index 74f889d4c7..915fa4d87b 100644
--- a/src/components/ImgEditor/ImgCropper.tsx
+++ b/src/components/ImgEditor/ImgCropper.tsx
@@ -39,9 +39,9 @@ export function ImgCropper({
 
   return (
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <DialogPanel
-        className={`${classes} grid grid-rows-[auto_1fr] fixed-center z-20 max-w-[90vmax] max-h-[90vmin] border-2 rounded-sm`}
+        className={`${classes} grid grid-rows-[auto_1fr] fixed-center z-20 max-w-[90vmax] max-h-[90vmin] border-2 rounded-xs`}
       >
         <div className="bg-white flex items-center justify-end gap-2 p-1">
           <button
diff --git a/src/components/ImgEditor/ImgEditor.tsx b/src/components/ImgEditor/ImgEditor.tsx
index 8aba7758ee..5e31c2bc53 100644
--- a/src/components/ImgEditor/ImgEditor.tsx
+++ b/src/components/ImgEditor/ImgEditor.tsx
@@ -97,7 +97,7 @@ function _ImgEditor(props: ControlledProps, ref: React.Ref<HTMLInputElement>) {
         data-disabled={props.disabled || props.value === "loading"}
         {...getRootProps({
           className: `relative ${overlay} ${styles.dropzone} group rounded border border-gray-l2 border-dashed 
-          focus:outline-none focus:ring-2 data-[drag="true"]:ring-2 has-[:active]:ring-2 ring-blue-d1 ring-offset-2 
+          focus:outline-hidden focus:ring-2 data-[drag="true"]:ring-2 has-active:ring-2 ring-blue-d1 ring-offset-2 
           hover:bg-blue-l5
           data-[disabled="true"]:bg-gray-l5 data-[disabled="true"]:pointer-events-none
           data-[invalid="true"]:border-red
diff --git a/src/components/KYCForm/KYCForm.tsx b/src/components/KYCForm/KYCForm.tsx
index d2ee8ea9c6..6d165b358e 100644
--- a/src/components/KYCForm/KYCForm.tsx
+++ b/src/components/KYCForm/KYCForm.tsx
@@ -26,7 +26,7 @@ export default function KycForm() {
           { replace: true, preventScrollReset: true }
         )
       }
-      classes="fixed-center grid z-50 isolate w-full max-w-[95vw] max-h-[95vh] sm:max-w-md overflow-y-auto scroller border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 dark:text-white rounded"
+      classes="fixed-center grid z-50 isolate w-full max-w-[95vw] max-h-[95vh] sm:max-w-md overflow-y-auto scroller border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 dark:text-white rounded-sm"
     >
       <Form {...init} />
     </Modal>
diff --git a/src/components/LoaderRing.tsx b/src/components/LoaderRing.tsx
index b54a0ca976..606cb66dcb 100644
--- a/src/components/LoaderRing.tsx
+++ b/src/components/LoaderRing.tsx
@@ -2,7 +2,7 @@ type Classes =
   | string
   | {
       container?: string;
-      ringToColor?: "to-blue-d1" | "to-white" | "to-[--accent-primary]";
+      ringToColor?: "to-blue-d1" | "to-white" | "to-(--accent-primary)";
     };
 
 export default function LoaderRing({
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index d81526bab4..c55a4b10a1 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -9,7 +9,7 @@ interface Props extends PropsWithChildren {
 export function Modal(props: Props) {
   return (
     <Dialog open={props.open} onClose={props.onClose} className="relative z-50">
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <DialogPanel className={props.classes}>{props.children}</DialogPanel>
     </Dialog>
   );
diff --git a/src/components/Prompt/PromptV2.tsx b/src/components/Prompt/PromptV2.tsx
index 9158507032..dfba52c41a 100644
--- a/src/components/Prompt/PromptV2.tsx
+++ b/src/components/Prompt/PromptV2.tsx
@@ -27,7 +27,7 @@ export function PromptV2({
     <Modal
       open={open ?? true}
       onClose={close}
-      classes="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      classes="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <div className="flex justify-end p-4 border-b border-gray-l4">
         <button
diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx
index 5af6f06a79..c4477ec833 100644
--- a/src/components/RichText/RichText.tsx
+++ b/src/components/RichText/RichText.tsx
@@ -13,7 +13,7 @@ export const RichText = forwardRef<El, Props>(({ classes, ...props }, ref) => {
       <div
         aria-invalid={!!props.error}
         aria-disabled={props.disabled}
-        className={`relative has-[:focus-within]:ring-2 ring-blue-d1 ring-offset-1 ${style.field} ${props.readOnly ? "toolbar-hidden" : ""}`}
+        className={`relative has-focus-within:ring-2 ring-blue-d1 ring-offset-1 ${style.field} ${props.readOnly ? "toolbar-hidden" : ""}`}
       >
         <Suspense
           fallback={
diff --git a/src/components/RichText/richtext.css b/src/components/RichText/richtext.css
index f9e6114879..0902ebf926 100644
--- a/src/components/RichText/richtext.css
+++ b/src/components/RichText/richtext.css
@@ -18,20 +18,19 @@
   border-bottom: 1px solid rgba(200, 200, 200, 0.5);
 }
 
-
 .ql-toolbar button.ql-active .ql-stroke {
   fill: none;
-  @apply !stroke-blue-d1
+  stroke: var(--color-blue-d1) !important;
 }
 
 .ql-toolbar button:hover .ql-stroke {
   fill: none;
-  @apply !stroke-blue-d1
+  stroke: var(--color-blue-d1) !important;
 }
 
 .ql-toolbar .ql-stroke {
   fill: none;
-  stroke: #fff;
+  stroke: white;
 }
 
 .ql-editor {
@@ -46,3 +45,26 @@
   opacity: 0.5;
   left: 0;
 }
+
+.rich-text-toolbar {
+  & .ql-toolbar .ql-stroke {
+    fill: none;
+    stroke: var(--color-gray-d2);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--color-red);
+  }
+}
+.ql-toolbar {
+  &.rich-text-toolbar & .ql-stroke {
+    fill: none;
+    stroke: var(--color-gray-d2);
+  }
+}
+.ql-stroke {
+  &.rich-text-toolbar .ql-toolbar & {
+    fill: none;
+    stroke: var(--color-gray-d2);
+  }
+}
diff --git a/src/components/Selector/MultiSelector.tsx b/src/components/Selector/MultiSelector.tsx
index 92dbf6561f..208493fca5 100644
--- a/src/components/Selector/MultiSelector.tsx
+++ b/src/components/Selector/MultiSelector.tsx
@@ -70,10 +70,10 @@ function _MultiList<T extends ValKey>(
               />
             ))}
             {props.searchable ? (
-              <div className="bg-blue-l5 inline-flex items-center gap-2 text-navy-l1 dark:text-navy-l2 pl-3 rounded">
+              <div className="bg-blue-l5 inline-flex items-center gap-2 text-navy-l1 dark:text-navy-l2 pl-3 rounded-sm">
                 <Search size={20} />
                 <ComboboxInput
-                  className="appearance-none bg-transparent first:pl-3 focus:outline-none h-10"
+                  className="appearance-none bg-transparent first:pl-3 focus:outline-hidden h-10"
                   value={searchText}
                   onChange={(e) => setSearchText(e.target.value)}
                 />
@@ -87,7 +87,7 @@ function _MultiList<T extends ValKey>(
             className={`${
               props.value.length > 0
                 ? "justify-self-end dark:text-navy-l2 shrink-0"
-                : "absolute inset-0 flex justify-end items-center pr-2 rounded active:ring-2 ring-blue-d1 ring-offset-1"
+                : "absolute inset-0 flex justify-end items-center pr-2 rounded-sm active:ring-2 ring-blue-d1 ring-offset-1"
             }`}
           >
             {({ open }) => <DrawerIcon isOpen={open} size={20} className="" />}
@@ -162,7 +162,7 @@ function SelectedOption<T extends ValKey>({
   ...option
 }: SelectedProps<T>) {
   return (
-    <div className="flex items-center px-3 gap-2 h-10 bg-blue-l4 dark:bg-blue-d4 border border-gray-l4 rounded font-semibold text-navy-l1 dark:text-navy-l2 uppercase">
+    <div className="flex items-center px-3 gap-2 h-10 bg-blue-l4 dark:bg-blue-d4 border border-gray-l4 rounded-sm font-semibold text-navy-l1 dark:text-navy-l2 uppercase">
       <span className="max-w-[200px] truncate">{option.label}</span>
       <button
         type="button"
diff --git a/src/components/Selector/NativeSelect.tsx b/src/components/Selector/NativeSelect.tsx
index ba1b2e9f89..e9110500cf 100644
--- a/src/components/Selector/NativeSelect.tsx
+++ b/src/components/Selector/NativeSelect.tsx
@@ -41,7 +41,7 @@ export const NativeSelect = forwardRef(function Select<V extends ValKey>(
         aria-disabled={props.disabled}
         id={props.id}
         as="button"
-        className={`${styles.selectorButton} peer-focus:shadow peer-focus:shadow-red`}
+        className={`${styles.selectorButton} peer-focus:shadow-sm peer-focus:shadow-red`}
       >
         {({ open, value }) => (
           <>
diff --git a/src/components/Selector/Selector.tsx b/src/components/Selector/Selector.tsx
index df23c9a9be..00ef49a073 100644
--- a/src/components/Selector/Selector.tsx
+++ b/src/components/Selector/Selector.tsx
@@ -40,7 +40,7 @@ function _List<T extends ValKey>(
           aria-invalid={!!props.error}
           aria-disabled={props.disabled}
           as="button"
-          className={`${cls.button} ${styles.selectorButton} peer-focus:shadow peer-focus:shadow-red`}
+          className={`${cls.button} ${styles.selectorButton} peer-focus:shadow-sm peer-focus:shadow-red`}
         >
           {({ open }) => (
             <>
diff --git a/src/components/Selector/constants.ts b/src/components/Selector/constants.ts
index f137d3aa06..9c94752db7 100644
--- a/src/components/Selector/constants.ts
+++ b/src/components/Selector/constants.ts
@@ -7,7 +7,7 @@ export const styles = {
   error:
     "absolute -bottom-5 right-0 text-right text-xs text-red dark:text-red-l2",
   option:
-    "px-4 py-2 data-[selected]:bg-[--accent-secondary] hover:cursor-pointer hover:bg-[--accent-secondary]",
+    "px-4 py-2 data-selected:bg-(--accent-secondary) hover:cursor-pointer hover:bg-(--accent-secondary)",
   options:
-    "font-heading rounded-sm border border-gray-l4 absolute top-full mt-2 z-10 bg-gray-l6 dark:bg-blue-d6 w-full max-h-[10rem] overflow-y-auto scroller",
+    "font-heading rounded-xs border border-gray-l4 absolute top-full mt-2 z-10 bg-gray-l6 dark:bg-blue-d6 w-full max-h-[10rem] overflow-y-auto scroller",
 };
diff --git a/src/components/TokenField/TokenSelector/TokenOptions.tsx b/src/components/TokenField/TokenSelector/TokenOptions.tsx
index 718818fbc3..9823958a43 100644
--- a/src/components/TokenField/TokenSelector/TokenOptions.tsx
+++ b/src/components/TokenField/TokenSelector/TokenOptions.tsx
@@ -29,7 +29,7 @@ type Props = {
   classes?: string;
 };
 const container =
-  "w-56 border border-gray-l4 p-1 [--anchor-max-height:15rem] overflow-y-auto rounded-md bg-gray-l5 dark:bg-blue-d7 shadow-lg focus:outline-none";
+  "w-56 border border-gray-l4 p-1 [--anchor-max-height:15rem] overflow-y-auto rounded-md bg-gray-l5 dark:bg-blue-d7 shadow-lg focus:outline-hidden";
 export default function TokenOptions({ onChange, token }: Props) {
   return (
     <PopoverPanel
@@ -103,11 +103,11 @@ function TokenCombobox({ token, onChange }: ITokenCombobox) {
         }
       }}
     >
-      <div className="grid grid-cols-[1fr_auto] p-2 gap-2 rounded mb-1 border border-gray-l4">
+      <div className="grid grid-cols-[1fr_auto] p-2 gap-2 rounded-sm mb-1 border border-gray-l4">
         <ComboboxInput
           value={searchText}
           placeholder="Search..."
-          className="text-left text-sm focus:outline-none bg-transparent"
+          className="text-left text-sm focus:outline-hidden bg-transparent"
           onChange={(event) => setSearchText(event.target.value)}
         />
         <SearchIcon size={20} />
@@ -126,7 +126,7 @@ function TokenCombobox({ token, onChange }: ITokenCombobox) {
                 as={CloseButton}
                 key={token.id}
                 className={
-                  "w-full grid grid-cols-[auto_1fr] justify-items-start items-center gap-x-2 p-2 hover:bg-[--accent-secondary] data-[selected]:bg-[--accent-secondary] cursor-pointer"
+                  "w-full grid grid-cols-[auto_1fr] justify-items-start items-center gap-x-2 p-2 hover:bg-(--accent-secondary) data-selected:bg-(--accent-secondary) cursor-pointer"
                 }
                 value={{ ...token, amount: "" }}
               >
diff --git a/src/components/TokenField/TokenSelector/TokenSelector.tsx b/src/components/TokenField/TokenSelector/TokenSelector.tsx
index bf49a613fb..ef62072e3a 100644
--- a/src/components/TokenField/TokenSelector/TokenSelector.tsx
+++ b/src/components/TokenField/TokenSelector/TokenSelector.tsx
@@ -16,7 +16,7 @@ export default function TokenSelector({
     <Popover className="relative gap-1 flex justify-end dark:text-navy-l2 h-full">
       <PopoverButton
         disabled={tokenState === "loading"}
-        className="flex items-center gap-1 focus:outline-none"
+        className="flex items-center gap-1 focus:outline-hidden"
       >
         {({ open }) => (
           <>
diff --git a/src/components/VerifiedIcon.tsx b/src/components/VerifiedIcon.tsx
index eead247486..1773282d3b 100644
--- a/src/components/VerifiedIcon.tsx
+++ b/src/components/VerifiedIcon.tsx
@@ -6,7 +6,7 @@ export default function VerifiedIcon({ size, classes = "" }: Props) {
   return (
     <Tooltip
       tip={
-        <Content className="bg-navy-d4 text-white px-4 py-2 rounded text-sm shadow-md z-10">
+        <Content className="bg-navy-d4 text-white px-4 py-2 rounded-sm text-sm shadow-md z-10">
           Verified
           <Arrow className="fill-navy-d4" />
         </Content>
diff --git a/src/components/admin/TemplateContainer.tsx b/src/components/admin/TemplateContainer.tsx
index 24db1d572f..c312b8e6f4 100644
--- a/src/components/admin/TemplateContainer.tsx
+++ b/src/components/admin/TemplateContainer.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from "react";
 
 const containerClass =
-  "w-full p-6 rounded-md grid content-start gap-6 rounded bg-white dark:bg-blue-d6 border border-gray-l4 group";
+  "w-full p-6 rounded-md grid content-start gap-6 rounded-sm bg-white dark:bg-blue-d6 border border-gray-l4 group";
 
 export function DivContainer({
   disabled,
diff --git a/src/components/donation/Steps/DonateMethods/DonateMethods.tsx b/src/components/donation/Steps/DonateMethods/DonateMethods.tsx
index 512fc4397f..e33278731f 100644
--- a/src/components/donation/Steps/DonateMethods/DonateMethods.tsx
+++ b/src/components/donation/Steps/DonateMethods/DonateMethods.tsx
@@ -44,9 +44,9 @@ const allMethodIds: DonateMethodId[] = ["stripe", "daf", "stocks", "crypto"];
 const tabClasses = (selected: boolean) =>
   `${
     selected
-      ? "font-medium bg-[--accent-secondary] text-navy-d4"
+      ? "font-medium bg-(--accent-secondary) text-navy-d4"
       : "border border-gray-l4 @xl/steps:border-none text-navy-l1"
-  }  flex items-center gap-2 p-2 @xl/steps:px-3 @xl/steps:py-[1.15rem] @xl/steps:grid @xl/steps:grid-cols-subgrid @xl/steps:col-span-2 focus:outline-none @xl/steps:w-full rounded @xl/steps:rounded-none`;
+  }  flex items-center gap-2 p-2 @xl/steps:px-3 @xl/steps:py-[1.15rem] @xl/steps:grid @xl/steps:grid-cols-subgrid @xl/steps:col-span-2 focus:outline-hidden @xl/steps:w-full rounded @xl/steps:rounded-none`;
 
 export default function DonateMethods(props: FormStep) {
   const { details, step, init } = props;
@@ -66,13 +66,13 @@ export default function DonateMethods(props: FormStep) {
       data-testid="donate-methods"
       manual
       as="div"
-      className="grid @xl/steps:grid-cols-[auto_1fr]"
+      className="grid @-xl/steps:grid-cols-[auto_1fr]"
       defaultIndex={tabIdxFound === -1 ? 0 : tabIdxFound}
     >
       <Label className="p-4 pb-0 col-span-full @xl/steps:hidden font-bold">
         Payment method
       </Label>
-      <TabList className="grid @md/steps:grid-cols-2 gap-2 @xl/steps:gap-0 p-4 @xl/steps:p-0 @xl/steps:grid-cols-[auto_1fr] @[42rem]/steps:min-w-48 content-start @xl/steps:divide-y @xl/steps:divide-white @xl/steps:border-r border-gray-l4">
+      <TabList className="grid @md/steps:grid-cols-2 gap-2 @xl/steps:gap-0 p-4 @xl/steps:p-0 @-xl/steps:grid-cols-[auto_1fr] @[42rem]/steps:min-w-48 content-start @xl/steps:divide-y @xl/steps:divide-white @xl/steps:border-r border-gray-l4">
         {tabs.map((tab) => (
           <Tab key={tab} className={({ selected }) => tabClasses(selected)}>
             {methods[tab].icon}
diff --git a/src/components/donation/Steps/DonateMethods/Stocks/Form.tsx b/src/components/donation/Steps/DonateMethods/Stocks/Form.tsx
index 20af20631e..424e7ee892 100644
--- a/src/components/donation/Steps/DonateMethods/Stocks/Form.tsx
+++ b/src/components/donation/Steps/DonateMethods/Stocks/Form.tsx
@@ -98,7 +98,7 @@ export default function Form(props: StockFormStep) {
         You can enjoy significant tax advantages and maximize the size of your
         contributions when you transfer securities through Better Giving:
       </p>
-      <div className="grid rounded bg-gray-l5 dark:bg-navy-d3 p-2 my-4">
+      <div className="grid rounded-sm bg-gray-l5 dark:bg-navy-d3 p-2 my-4">
         <span className="text-sm text-navy-l2">
           NOTE: This is not financial advice! Please speak to your tax advisor
           or broker about your specific situation and country's tax laws.
diff --git a/src/components/donation/Steps/DonateMethods/Stripe/Frequency.tsx b/src/components/donation/Steps/DonateMethods/Stripe/Frequency.tsx
index 5ec5120f67..0564141e82 100644
--- a/src/components/donation/Steps/DonateMethods/Stripe/Frequency.tsx
+++ b/src/components/donation/Steps/DonateMethods/Stripe/Frequency.tsx
@@ -7,7 +7,7 @@ type Freq = FormValues["frequency"];
 const styles = {
   icon: "hidden @[21rem]/frequency:block ml-1 group-aria-checked:text-white text-transparent relative bottom-px",
   option:
-    "group border-gray-l3 rounded-lg px-2 @[21rem]/frequency:px-6 border h-[2.625rem] flex items-center justify-center @[21rem]/frequency:justify-start aria-checked:bg-[--accent-primary] aria-checked:text-white aria-checked:border-none select-none",
+    "group border-gray-l3 rounded-lg px-2 @[21rem]/frequency:px-6 border h-[2.625rem] flex items-center justify-center @[21rem]/frequency:justify-start aria-checked:bg-(--accent-primary) aria-checked:text-white aria-checked:border-none select-none",
 };
 
 interface Props {
diff --git a/src/components/donation/Steps/Share.tsx b/src/components/donation/Steps/Share.tsx
index 035f5acb80..fe7ffbb880 100644
--- a/src/components/donation/Steps/Share.tsx
+++ b/src/components/donation/Steps/Share.tsx
@@ -96,20 +96,20 @@ function Prompt({ recipientName, open, setOpen, ...social }: IPrompt) {
     <Modal
       open={open}
       onClose={() => setOpen(false)}
-      classes="grid content-start fixed-center z-20 border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 text-navy-d4 dark:text-white w-[91%] sm:w-full max-w-[39rem] rounded overflow-hidden"
+      classes="grid content-start fixed-center z-20 border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 text-navy-d4 dark:text-white w-[91%] sm:w-full max-w-[39rem] rounded-sm overflow-hidden"
     >
       <div className="grid place-items-center relative h-16 font-heading font-bold bg-blue-l5 dark:bg-blue-d7 border-b border-gray-l4">
         Share on {social.title}
         <button
           onClick={() => setOpen(false)}
-          className="absolute top-1/2 transform -translate-y-1/2 right-4 w-10 h-10 border border-gray-l4 rounded "
+          className="absolute top-1/2 transform -translate-y-1/2 right-4 w-10 h-10 border border-gray-l4 rounded-sm "
         >
           <X size={20} className="absolute-center" />
         </button>
       </div>
       <p
         ref={msgRef}
-        className="my-6 sm:my-10 mx-4 sm:mx-12 text-sm leading-normal p-3 border dark:bg-blue-d6 border-gray-l4 rounded"
+        className="my-6 sm:my-10 mx-4 sm:mx-12 text-sm leading-normal p-3 border dark:bg-blue-d6 border-gray-l4 rounded-sm"
       >
         I just donated to The Better Giving 501(c)(3) on{" "}
         <span className="font-bold">@BetterDotGiving</span>! They can choose to
diff --git a/src/components/donation/Steps/Submit/Crypto/DirectMode.tsx b/src/components/donation/Steps/Submit/Crypto/DirectMode.tsx
index 13991e7556..2f4fbd881c 100644
--- a/src/components/donation/Steps/Submit/Crypto/DirectMode.tsx
+++ b/src/components/donation/Steps/Submit/Crypto/DirectMode.tsx
@@ -89,7 +89,7 @@ export default function DirectMode({ donation, classes = "" }: Props) {
           isError: !!error,
         }}
         messages={{
-          loading: <ContentLoader className="size-48 rounded" />,
+          loading: <ContentLoader className="size-48 rounded-sm" />,
           error: "Failed to load donation address",
         }}
       >
diff --git a/src/components/donation/Steps/Submit/Loader.tsx b/src/components/donation/Steps/Submit/Loader.tsx
index dc2469657c..50180c16d9 100644
--- a/src/components/donation/Steps/Submit/Loader.tsx
+++ b/src/components/donation/Steps/Submit/Loader.tsx
@@ -11,7 +11,7 @@ export default function Loader({ msg }: Props) {
     >
       <LoaderRing
         thickness={10}
-        classes={{ container: "w-32", ringToColor: "to-[--accent-primary]" }}
+        classes={{ container: "w-32", ringToColor: "to-(--accent-primary)" }}
       />
       {msg && <p className="text-center">{msg}</p>}
     </div>
diff --git a/src/components/donation/Steps/Submit/Stocks.tsx b/src/components/donation/Steps/Submit/Stocks.tsx
index bbede0d2ab..2086b888d6 100644
--- a/src/components/donation/Steps/Submit/Stocks.tsx
+++ b/src/components/donation/Steps/Submit/Stocks.tsx
@@ -21,7 +21,7 @@ export default function Stocks(props: StockCheckoutStep) {
         To complete this donation, please email or provide your broker with the
         following information:
       </p>
-      <div className="grid rounded bg-gray-l4 dark:bg-navy-d3 p-3 text-sm leading-relaxed mt-6">
+      <div className="grid rounded-sm bg-gray-l4 dark:bg-navy-d3 p-3 text-sm leading-relaxed mt-6">
         <p>
           Please transfer [&nbsp;
           {props.details.numShares + (props.tip?.value ?? 0)}
@@ -39,7 +39,7 @@ export default function Stocks(props: StockCheckoutStep) {
       <p className="text-sm mt-3 mb-1">
         You may also need the following information:
       </p>
-      <span className="rounded bg-gray-l4 dark:bg-navy-d3 p-3 text-sm leading-relaxed ">
+      <span className="rounded-sm bg-gray-l4 dark:bg-navy-d3 p-3 text-sm leading-relaxed ">
         Better Giving is a nonprofit with 501(c)(3) tax-exempt status, Federal
         ID #: 87-3758939.
       </span>
@@ -62,7 +62,7 @@ export default function Stocks(props: StockCheckoutStep) {
           +props.details.numShares,
           props.details.symbol
         )}
-        className="btn btn-blue bg-[--accent-primary] enabled:hover:bg-[--accent-primary] rounded-full px-4 py-2 justify-self-end mt-2 text-xs font-normal"
+        className="btn btn-blue bg-(--accent-primary) enabled:hover:bg-(--accent-primary) rounded-full px-4 py-2 justify-self-end mt-2 text-xs font-normal"
       >
         Generate email
       </a>
diff --git a/src/components/donation/Steps/Submit/StripeCheckout/Checkout.tsx b/src/components/donation/Steps/Submit/StripeCheckout/Checkout.tsx
index dba89a22fc..beef2598b5 100644
--- a/src/components/donation/Steps/Submit/StripeCheckout/Checkout.tsx
+++ b/src/components/donation/Steps/Submit/StripeCheckout/Checkout.tsx
@@ -106,7 +106,7 @@ export default function Checkout(props: StripeCheckoutStep) {
         <Loader />
       ) : (
         <button
-          className="btn-blue btn-donate bg-[--accent-primary] hover:enabled:bg-[--accent-primary] w-full mt-6"
+          className="btn-blue btn-donate bg-(--accent-primary) hover:enabled:bg-(--accent-primary) w-full mt-6"
           disabled={!stripe || !elements || status !== "ready"}
           type="submit"
         >
diff --git a/src/components/donation/Steps/Submit/StripeCheckout/Paypal/Checkout.tsx b/src/components/donation/Steps/Submit/StripeCheckout/Paypal/Checkout.tsx
index ec35202cec..c169fa27ce 100644
--- a/src/components/donation/Steps/Submit/StripeCheckout/Paypal/Checkout.tsx
+++ b/src/components/donation/Steps/Submit/StripeCheckout/Paypal/Checkout.tsx
@@ -23,7 +23,7 @@ export default function Checkout(props: StripeCheckoutStep) {
   const [{ isPending }] = usePayPalScriptReducer();
   const [state, setState] = useState<"loading" | "error">();
 
-  if (isPending) return <ContentLoader className="rounded h-10 w-40" />;
+  if (isPending) return <ContentLoader className="rounded-sm h-10 w-40" />;
 
   return (
     <PayPalButtons
diff --git a/src/components/donation/Steps/Tip/Tip.tsx b/src/components/donation/Steps/Tip/Tip.tsx
index afc95f278f..684c9aa8cf 100644
--- a/src/components/donation/Steps/Tip/Tip.tsx
+++ b/src/components/donation/Steps/Tip/Tip.tsx
@@ -142,13 +142,13 @@ export default function Tip(props: TipStep) {
           className="relative flex items-center select-none touch-none mt-16"
         >
           <Slider.Track className="relative grow rounded-full h-1.5 bg-[#EAECEB]">
-            <Slider.Range className="absolute bg-[--accent-primary] rounded-full h-full" />
+            <Slider.Range className="absolute bg-(--accent-primary) rounded-full h-full" />
           </Slider.Track>
           <Slider.Thumb className="flex gap-[2.5px] justify-center items-center w-9 h-5 bg-white border border-[#EAECEB] shadow-lg shadow-black/15 rounded-[6px] relative">
             <span className="w-px h-2.5 bg-[#D9D9D9]" />
             <span className="w-px h-2.5 bg-[#D9D9D9]" />
             <span className="w-px h-2.5 bg-[#D9D9D9]" />
-            <div className="absolute -top-9 px-2 py-0.5 rounded text-sm">
+            <div className="absolute -top-9 px-2 py-0.5 rounded-sm text-sm">
               <span className="text-xs uppercase mr-0.5">{symbol}</span>
               <span className="mr-0.5">
                 {humanize(tip.amount || "0", centsDecimals(rate, decimals))}
@@ -204,7 +204,7 @@ export default function Tip(props: TipStep) {
         </>
       )}
 
-      <div className="rounded bg-[--accent-secondary] mt-16 relative px-4 py-2 grid grid-cols-[auto_1fr] gap-x-4 items-center">
+      <div className="rounded-sm bg-(--accent-secondary) mt-16 relative px-4 py-2 grid grid-cols-[auto_1fr] gap-x-4 items-center">
         <Image
           src={withTip ? laira.gift : laira.standingFront}
           width={withTip ? 50 : 40}
diff --git a/src/components/donation/Steps/common/ContinueBtn.tsx b/src/components/donation/Steps/common/ContinueBtn.tsx
index c666312055..4869814967 100644
--- a/src/components/donation/Steps/common/ContinueBtn.tsx
+++ b/src/components/donation/Steps/common/ContinueBtn.tsx
@@ -13,7 +13,7 @@ export default function ContinueBtn({
     <button
       {...props}
       type={type}
-      className={`btn-blue bg-[--accent-primary] hover:enabled:bg-[--accent-primary] btn-donate ${className}`}
+      className={`btn-blue bg-(--accent-primary) hover:enabled:bg-(--accent-primary) btn-donate ${className}`}
     >
       <span className="mr-4">{text}</span>
       <ArrowRight size={18} />
diff --git a/src/components/donation/Steps/common/Incrementers.tsx b/src/components/donation/Steps/common/Incrementers.tsx
index 97706ed818..b33ae7dec0 100644
--- a/src/components/donation/Steps/common/Incrementers.tsx
+++ b/src/components/donation/Steps/common/Incrementers.tsx
@@ -45,7 +45,7 @@ function Incrementer({
     <button
       data-testid="incrementer"
       type="button"
-      className="grid group/incrementer has-[[data-label]]:grid-rows-subgrid gap-y-1 row-span-2 rounded-lg p-2 bg-[--accent-primary]"
+      className="grid group/incrementer has-data-label:grid-rows-subgrid gap-y-1 row-span-2 rounded-lg p-2 bg-(--accent-primary)"
       onClick={() => onIncrement(value)}
     >
       <span className="text-left text-sm font-medium text-white group-active/incrementer:translate-x-1">
diff --git a/src/components/donation/Steps/common/ProgramSelector.tsx b/src/components/donation/Steps/common/ProgramSelector.tsx
index 82370e2691..3c21d66d65 100644
--- a/src/components/donation/Steps/common/ProgramSelector.tsx
+++ b/src/components/donation/Steps/common/ProgramSelector.tsx
@@ -32,7 +32,7 @@ export function ProgramSelector({
       by="value"
       onChange={onChange}
       as="div"
-      className={`relative grid ${styles.container} group has-[[data-error]]:hidden has-[[data-empty]]:hidden has-[[data-loading]]:hidden`}
+      className={`relative grid ${styles.container} group has-data-error:hidden has-data-empty:hidden has-data-loading:hidden`}
     >
       {program.value && (
         <div className="">
diff --git a/src/components/donation/index.ts b/src/components/donation/index.ts
index 8fc0ccfa4f..3e1e2fe84e 100644
--- a/src/components/donation/index.ts
+++ b/src/components/donation/index.ts
@@ -1,8 +1,8 @@
 export * from "./Steps";
-export {
-  type DonationState,
-  type DonationRecipient,
-  type DetailedCurrency,
+export type {
+  DonationState,
+  DonationRecipient,
+  DetailedCurrency,
 } from "./Steps/types";
 export { Steps } from "./Steps";
 export { default as Share } from "./Steps/Share";
diff --git a/src/components/error/ErrorModal.tsx b/src/components/error/ErrorModal.tsx
index 16bb56c590..3a8324922f 100644
--- a/src/components/error/ErrorModal.tsx
+++ b/src/components/error/ErrorModal.tsx
@@ -16,7 +16,7 @@ export function ErrorModal() {
     <Modal
       open={true}
       onClose={() => window.location.reload()}
-      classes="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      classes="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <div className="px-6 pb-4 text-center text-navy-l1 mt-4">
         <DefaultFallback />
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
index 5cf6e9f799..8c013cd9e5 100644
--- a/src/components/form/Input.tsx
+++ b/src/components/form/Input.tsx
@@ -28,7 +28,7 @@ export const Input = forwardRef<El, Props>((props, ref) => {
           {...rest}
           ref={ref}
           type="text"
-          className={`w-full h-full placeholder:font-medium placeholder:font-heading placeholder:text-navy-l3 max-sm:placeholder:text-sm focus:outline-none bg-transparent ${
+          className={`w-full h-full placeholder:font-medium placeholder:font-heading placeholder:text-navy-l3 max-sm:placeholder:text-sm focus:outline-hidden bg-transparent ${
             props.icon ? "pr-5" : "px-5"
           } ${style.input}`}
           aria-invalid={!!error}
diff --git a/src/components/form/PasswordInput.tsx b/src/components/form/PasswordInput.tsx
index e2658a122b..7b0a105136 100644
--- a/src/components/form/PasswordInput.tsx
+++ b/src/components/form/PasswordInput.tsx
@@ -21,12 +21,12 @@ export const PasswordInput = forwardRef<El, Props>((props, ref) => {
           {...rest}
           type={isPasswordShown ? "text" : "password"}
           autoComplete="current-password"
-          className="w-full h-full placeholder:font-medium placeholder:font-heading placeholder:text-navy-l3 max-sm:placeholder:text-sm focus:outline-none bg-transparent"
+          className="w-full h-full placeholder:font-medium placeholder:font-heading placeholder:text-navy-l3 max-sm:placeholder:text-sm focus:outline-hidden bg-transparent"
           aria-invalid={!!error}
         />
         <button
           type="button"
-          className="text-navy-l3 hover:text-navy-l2 active:text-navy rounded focus-visible:outline focus-visible:outline-2"
+          className="text-navy-l3 hover:text-navy-l2 active:text-navy rounded-sm focus-visible:outline focus-visible:outline-2"
           onClick={() => setIsPasswordShown((prev) => !prev)}
         >
           {isPasswordShown ? <EyeOff size={20} /> : <Eye size={20} />}
diff --git a/src/components/form/constants.ts b/src/components/form/constants.ts
index 1522e4e919..1f98b1fea7 100644
--- a/src/components/form/constants.ts
+++ b/src/components/form/constants.ts
@@ -1,2 +1,2 @@
 export const fieldClasses =
-  'items-center gap-3 h-12 sm:h-[52px] bg-gray-l5 border border-[0.8px] border-gray-l4 rounded-lg has-[:focus]:ring-2 ring-blue-d1 ring-offset-1 has-[input[aria-invalid="true"]]:border-red has-[:disabled]:bg-gray-l3';
+  'items-center gap-3 h-12 sm:h-[52px] bg-gray-l5 border border-[0.8px] border-gray-l4 rounded-lg has-focus:ring-2 ring-blue-d1 ring-offset-1 has-[input[aria-invalid="true"]]:border-red has-disabled:bg-gray-l3';
diff --git a/src/components/goal-selector/goal-selector.tsx b/src/components/goal-selector/goal-selector.tsx
index b5a188209e..fbddb13591 100644
--- a/src/components/goal-selector/goal-selector.tsx
+++ b/src/components/goal-selector/goal-selector.tsx
@@ -26,9 +26,9 @@ export function GoalSelector(props: Props) {
         <Field key={value} className="flex items-center gap-2">
           <Radio
             value={value}
-            className="group flex size-5 items-center justify-center rounded-full border bg-white data-[checked]:bg-blue-d1"
+            className="group flex size-5 items-center justify-center rounded-full border bg-white data-checked:bg-blue-d1"
           >
-            <span className="invisible size-2 rounded-full bg-white group-data-[checked]:visible" />
+            <span className="invisible size-2 rounded-full bg-white group-data-checked:visible" />
           </Radio>
           <Label className="text-sm">
             {label}{" "}
diff --git a/src/components/target.tsx b/src/components/target.tsx
index 99978a5f93..9226a2f44a 100644
--- a/src/components/target.tsx
+++ b/src/components/target.tsx
@@ -26,7 +26,7 @@ export function Target({ text, target, classes = "", progress }: ITarget) {
       <div className="h-1.5 w-full rounded-full bg-green-l4 shadow-inner">
         <div
           style={{ width: `${pct * 100}%` }}
-          className="h-full rounded-full bg-green shadow-sm"
+          className="h-full rounded-full bg-green shadow-xs"
         />
       </div>
       <div className="flex items-center justify-between mt-1">
diff --git a/src/cookie-consent.css b/src/cookie-consent.css
index fae7cccaee..6ae80093bd 100644
--- a/src/cookie-consent.css
+++ b/src/cookie-consent.css
@@ -1,15 +1,14 @@
 #cc-main {
+  --cc-font-family: "DM Sans Variable";
 
-    --cc-font-family: "DM Sans Variable";
+  --cc-btn-primary-bg: var(--color-blue-d1);
+  --cc-btn-primary-border-color: var(--color-blue-d1);
+  --cc-btn-primary-hover-bg: var(--color-blue);
+  --cc-btn-primary-hover-border-color: var(--color-blue);
 
-    --cc-btn-primary-bg: #2D89C8;
-    --cc-btn-primary-border-color: #2D89C8;
-    --cc-btn-primary-hover-bg: #54a5dc;
-    --cc-btn-primary-hover-border-color: #54a5dc;
+  /** Also make toggles the same color as the button **/
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
 
-    /** Also make toggles the same color as the button **/
-    --cc-toggle-on-bg: var(--cc-btn-primary-bg);
-
-    /** Make the buttons a bit rounder **/
-    --cc-btn-border-radius: 8px;
-  }
\ No newline at end of file
+  /** Make the buttons a bit rounder **/
+  --cc-btn-border-radius: 8px;
+}
diff --git a/src/index.css b/src/index.css
index 2ed77c14eb..2f1f010251 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,15 +1,148 @@
-@import "tailwindcss/base";
-@import "./styles/base";
-
-@import "tailwindcss/components";
+@import "tailwindcss";
+@import "./styles/base.css";
 @import "./styles/components.css";
-
-@import "tailwindcss/utilities";
 @import "./styles/utilities.css";
 
-:root {
-    --accent-primary: theme(colors.blue.d1);
-    --accent-secondary:theme(colors.blue.l4);
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-\*: initial;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-inherit: inherit;
+
+  --color-blue-d7: #0b1a2a;
+  --color-blue-d6: #112840;
+  --color-blue-d5: #1a3f60;
+  --color-blue-d4: #194b73;
+  --color-blue-d3: #1a578a;
+  --color-blue-d2: #1e6dab;
+  --color-blue-d1: #2d89c8;
+  --color-blue: #54a5dc;
+  --color-blue-l1: #8fc4ea;
+  --color-blue-l2: #c4def3;
+  --color-blue-l3: #b8d9ef;
+  --color-blue-l4: #e6f1f9;
+  --color-blue-l5: #f7fafd;
+
+  --color-green-d4: #092a17;
+  --color-green-d3: #1d5e35;
+  --color-green-d2: #1f763e;
+  --color-green-d1: #23964c;
+  --color-green: #31b861;
+  --color-green-l1: #57d182;
+  --color-green-l2: #8fe6ae;
+  --color-green-l3: #c0f2d1;
+  --color-green-l4: #dff9e8;
+  --color-green-l5: #f1fcf4;
+
+  --color-navy-d4: #183244;
+  --color-navy-d3: #1f3648;
+  --color-navy-d2: #273f52;
+  --color-navy-d1: #314c5d;
+  --color-navy: #3c5667;
+  --color-navy-l1: #496273;
+  --color-navy-l2: #5b6f7f;
+  --color-navy-l3: #72828d;
+  --color-navy-l4: #9dabb5;
+  --color-navy-l5: #d4dee6;
+
+  --color-red-d4: #9d1717;
+  --color-red-d3: #c81818;
+  --color-red-d2: #e22020;
+  --color-red-d1: #e22020;
+  --color-red: #f53e3e;
+  --color-red-l1: #fc6d6d;
+  --color-red-l2: #ffa2a2;
+  --color-red-l3: #ffc8c8;
+  --color-red-l4: #ffe1e1;
+  --color-red-l5: #fef2f2;
+
+  --color-black: #000101;
+
+  --color-gray-d3: #363636;
+  --color-gray-d2: #545454;
+  --color-gray-d1: #676767;
+  --color-gray: #999999;
+  --color-gray-l1: #adadad;
+  --color-gray-l2: #c8c8c8;
+  --color-gray-l3: #d7d7d7;
+  --color-gray-l4: #e7e7e7;
+  --color-gray-l5: #f9fbfa;
+  --color-gray-l6: #ffffff;
+
+  --color-amber-d2: #b45309;
+  --color-amber-d1: #d97706;
+  --color-amber: #f59e0b;
+  --color-amber-l3: #fcd34d;
+  --color-amber-l4: #fef3c7;
+  --color-amber-l5: #fffbeb;
+
+  --color-white: #ffffff;
+  --color-sdg1: #e5233d;
+  --color-sdg2: #dda73a;
+  --color-sdg3: #4ca146;
+  --color-sdg4: #c5192d;
+  --color-sdg5: #ef402c;
+  --color-sdg6: #27bfe6;
+  --color-sdg7: #fbc412;
+  --color-sdg8: #a31c44;
+  --color-sdg9: #f26a2d;
+  --color-sdg10: #e01483;
+  --color-sdg11: #f89d2a;
+  --color-sdg12: #bf8d2c;
+  --color-sdg13: #407f46;
+  --color-sdg14: #1f97d4;
+  --color-sdg15: #59ba48;
+  --color-sdg16: #126a9f;
+  --color-sdg17: #13496b;
+  --color-peach: #fde3d8;
+  --color-lilac: #eae2fc;
+
+  --text-2xs: 0.625rem;
+  --text-3xs: 0.56rem, 0.7rem;
+  --text-4_5xl: 2.625rem;
+
+  --font-heading: Quicksand Variable, serif;
+  --font-body: DM Sans Variable, sans-serif;
+  --font-gochi: Gochi Hand, cursive;
+
+  --width-3\/4: 75%;
+
+  --radius-4xl: 2rem;
+  --radius-5xl: 3.5rem;
+
+  @keyframes translate-rtl {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
   }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-  
\ No newline at end of file
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+:root {
+  --accent-primary: var(--color-blue-d1);
+  --accent-secondary: var(--color-blue-l4);
+}
diff --git a/src/pages/@sections/HeroBottom/Card.tsx b/src/pages/@sections/HeroBottom/Card.tsx
index cfc6e0c6fa..d71d7b9834 100644
--- a/src/pages/@sections/HeroBottom/Card.tsx
+++ b/src/pages/@sections/HeroBottom/Card.tsx
@@ -7,7 +7,7 @@ import type { EndowmentCard } from "types/aws";
 
 const Card = (props: EndowmentCard) => {
   return (
-    <div className="grid rounded-4xl bg-white h-[27rem] border border-gray-l4/30 shadow-sm shadow-black/5">
+    <div className="grid rounded-4xl bg-white h-[27rem] border border-gray-l4/30 shadow-xs shadow-black/5">
       <Image
         src={props.card_img || flying_character}
         alt="card image"
diff --git a/src/pages/@sections/HeroBottom/HeroBottom.tsx b/src/pages/@sections/HeroBottom/HeroBottom.tsx
index cd23391091..15b9aa2227 100644
--- a/src/pages/@sections/HeroBottom/HeroBottom.tsx
+++ b/src/pages/@sections/HeroBottom/HeroBottom.tsx
@@ -98,7 +98,7 @@ const HeroBottom = ({ className = "", endowments }: Props) => {
         <span className="ml-1">Explore All Causes</span>
         <ArrowRight size={20} />
       </Link>
-      <p className="bg-[#FFEECC] font-gochi text-2xl z-[22] px-4 justify-self-center mt-4">
+      <p className="bg-[#FFEECC] font-gochi text-2xl z-22 px-4 justify-self-center mt-4">
         from all around the globe
       </p>
 
diff --git a/src/pages/@sections/HeroBottom/styles.module.css b/src/pages/@sections/HeroBottom/styles.module.css
index c65f23b7b6..1a3b0509a9 100644
--- a/src/pages/@sections/HeroBottom/styles.module.css
+++ b/src/pages/@sections/HeroBottom/styles.module.css
@@ -55,11 +55,7 @@
   position: absolute;
   height: 100rem;
   width: 100%;
-  background: radial-gradient(
-    ellipse at center,
-    #fdefd195 1px,
-    transparent 70%
-  );
+  background: radial-gradient(ellipse at center, #fdefd195 1px, transparent 70%);
   right: 0;
   bottom: 0;
   transform: translate(50%, 50%);
diff --git a/src/pages/Admin/Charity/Banking/PayoutMethod/DeletePrompt.tsx b/src/pages/Admin/Charity/Banking/PayoutMethod/DeletePrompt.tsx
index 5a7e0bc46c..9a20f7048b 100644
--- a/src/pages/Admin/Charity/Banking/PayoutMethod/DeletePrompt.tsx
+++ b/src/pages/Admin/Charity/Banking/PayoutMethod/DeletePrompt.tsx
@@ -27,7 +27,7 @@ export default function DeletePrompt() {
       }
       className="relative z-50"
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <Content isDefault={isDefault} isWithHeir={isWithHeir} />
     </Dialog>
   );
@@ -47,7 +47,7 @@ function Content({ isDefault, isWithHeir }: Props) {
         : [true, "Are you sure you want to delete this payment method?"];
 
   return (
-    <DialogPanel className="fixed-center z-10 grid content-start justify-items-center text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden">
+    <DialogPanel className="fixed-center z-10 grid content-start justify-items-center text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden">
       <div className="relative w-full">
         <p className="sm:text-xl font-bold text-center border-b bg-blue-l5 dark:bg-blue-d7 border-gray-l4 p-5">
           Delete payout method
diff --git a/src/pages/Admin/Charity/Banking/PayoutMethod/PayoutMethod.tsx b/src/pages/Admin/Charity/Banking/PayoutMethod/PayoutMethod.tsx
index 8bb42aa705..3246975dde 100644
--- a/src/pages/Admin/Charity/Banking/PayoutMethod/PayoutMethod.tsx
+++ b/src/pages/Admin/Charity/Banking/PayoutMethod/PayoutMethod.tsx
@@ -39,7 +39,7 @@ export default function PayoutMethod() {
           </div>
         )}
         {isDefault && (
-          <div className="bg-blue text-white px-2 py-1 text-xs uppercase rounded inline-block">
+          <div className="bg-blue text-white px-2 py-1 text-xs uppercase rounded-sm inline-block">
             Default
           </div>
         )}
@@ -52,7 +52,7 @@ export default function PayoutMethod() {
         </p>
       )}
 
-      <dl className="grid sm:grid-cols-[auto_auto_1fr] border border-gray-l4 rounded mt-2">
+      <dl className="grid sm:grid-cols-[auto_auto_1fr] border border-gray-l4 rounded-sm mt-2">
         <Row label="Currency">{bank.currency}</Row>
         <Row label="Country">{bank.country}</Row>
         <Row label="Recipient name">{bank.name.fullName}</Row>
diff --git a/src/pages/Admin/Charity/Banking/PayoutMethods/Table.tsx b/src/pages/Admin/Charity/Banking/PayoutMethods/Table.tsx
index af07456e71..2c842a4748 100644
--- a/src/pages/Admin/Charity/Banking/PayoutMethods/Table.tsx
+++ b/src/pages/Admin/Charity/Banking/PayoutMethods/Table.tsx
@@ -11,7 +11,7 @@ type Props = {
 export default function Table({ methods, classes = "" }: Props) {
   return (
     <table
-      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2`}
+      className={`${classes} w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2`}
     >
       <TableSection
         type="thead"
@@ -81,7 +81,7 @@ const text: { [key in BankingApplicationStatus]: string } = {
 function Status({ status }: { status: BankingApplicationStatus }) {
   return (
     <p
-      className={`${bg[status]} rounded px-3 py-1 inline-block uppercase text-xs text-white`}
+      className={`${bg[status]} rounded-sm px-3 py-1 inline-block uppercase text-xs text-white`}
     >
       {text[status]}
     </p>
diff --git a/src/pages/Admin/Charity/Dashboard/Dashboard.tsx b/src/pages/Admin/Charity/Dashboard/Dashboard.tsx
index 6d2f22da66..cbf11ffd1b 100644
--- a/src/pages/Admin/Charity/Dashboard/Dashboard.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Dashboard.tsx
@@ -20,7 +20,7 @@ export default function Dashboard() {
     <div className="@container w-full max-w-4xl grid content-start">
       <h3 className="font-bold text-2xl mb-4">Dashboard</h3>
       {period.isPre && (
-        <div className="bg-gray-l4 text-navy-l1 text-sm p-2 rounded">
+        <div className="bg-gray-l4 text-navy-l1 text-sm p-2 rounded-sm">
           <CircleAlert size={16} className="relative inline bottom-px mr-1" />
           Pending transactions are now locked for processing
         </div>
diff --git a/src/pages/Admin/Charity/Dashboard/Figure.tsx b/src/pages/Admin/Charity/Dashboard/Figure.tsx
index e9ee28b412..1c16b1c0c0 100644
--- a/src/pages/Admin/Charity/Dashboard/Figure.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Figure.tsx
@@ -14,7 +14,7 @@ type Props = {
 
 export default function Figure(props: Props) {
   return (
-    <div className="@container rounded border border-gray-l4 p-4">
+    <div className="@container rounded-sm border border-gray-l4 p-4">
       <div className="flex items-center mb-4">
         <h4 className="text-sm">{props.title}</h4>
 
diff --git a/src/pages/Admin/Charity/Dashboard/LiqActions.tsx b/src/pages/Admin/Charity/Dashboard/LiqActions.tsx
index fa6086b7fd..06cbc3d4fd 100644
--- a/src/pages/Admin/Charity/Dashboard/LiqActions.tsx
+++ b/src/pages/Admin/Charity/Dashboard/LiqActions.tsx
@@ -23,7 +23,7 @@ export function LiqActions({ classes = "", ...props }: Props) {
         }}
         type="button"
         aria-disabled={props.disabled}
-        className="text-xs [&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none px-4 py-1.5 rounded-md bg-gray-d2 aria-disabled:bg-gray-l3 outline-blue-d1 text-white font-heading font-bold drop-shadow-sm shadow-inner shadow-white/30"
+        className="text-xs [&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none px-4 py-1.5 rounded-md bg-gray-d2 aria-disabled:bg-gray-l3 outline-blue-d1 text-white font-heading font-bold drop-shadow-xs shadow-inner shadow-white/30"
       >
         Withdraw
       </NavLink>
@@ -40,7 +40,7 @@ export function LiqActions({ classes = "", ...props }: Props) {
         }}
         type="button"
         aria-disabled={props.disabled}
-        className="text-xs [&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-sm py-1 bg-green aria-disabled:bg-gray-l3 text-white font-heading outline-blue-d1"
+        className="text-xs [&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-xs py-1 bg-green aria-disabled:bg-gray-l3 text-white font-heading outline-blue-d1"
       >
         Invest
       </NavLink>
diff --git a/src/pages/Admin/Charity/Dashboard/Loaded.tsx b/src/pages/Admin/Charity/Dashboard/Loaded.tsx
index 43c0419884..83a0d2d56d 100644
--- a/src/pages/Admin/Charity/Dashboard/Loaded.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Loaded.tsx
@@ -104,7 +104,7 @@ export function Loaded({ classes = "", ...props }: Props) {
           </div>
           <p className="text-sm text-navy-l3">
             <span>Ends in </span>
-            <span className="p-1 px-2 bg-navy-d4 text-gray-l4 text-xs rounded ml-1">
+            <span className="p-1 px-2 bg-navy-d4 text-gray-l4 text-xs rounded-sm ml-1">
               in {period.distance}
             </span>
           </p>
diff --git a/src/pages/Admin/Charity/Dashboard/LockActions.tsx b/src/pages/Admin/Charity/Dashboard/LockActions.tsx
index 994d231461..13fa4bd142 100644
--- a/src/pages/Admin/Charity/Dashboard/LockActions.tsx
+++ b/src/pages/Admin/Charity/Dashboard/LockActions.tsx
@@ -23,7 +23,7 @@ export function LockActions({ classes = "", ...props }: Props) {
             min: "50",
           }).toString(),
         }}
-        className="[&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none text-xs font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-sm py-1 bg-amber aria-disabled:bg-gray-l3 text-white font-heading outline-blue-d1"
+        className="[&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none text-xs font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-xs py-1 bg-amber aria-disabled:bg-gray-l3 text-white font-heading outline-blue-d1"
       >
         Save
       </NavLink>
@@ -39,7 +39,7 @@ export function LockActions({ classes = "", ...props }: Props) {
           }).toString(),
         }}
         aria-disabled={props.disabled}
-        className="[&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none text-xs px-4 py-1.5 rounded-md bg-gray-d2 aria-disabled:bg-gray-l3 outline-blue-d1 text-white font-heading font-bold drop-shadow-sm shadow-inner shadow-white/30"
+        className="[&:is(.pending)]:bg-gray-l3 [&:is(.pending)]:pointer-events-none text-xs px-4 py-1.5 rounded-md bg-gray-d2 aria-disabled:bg-gray-l3 outline-blue-d1 text-white font-heading font-bold drop-shadow-xs shadow-inner shadow-white/30"
       >
         Withdraw
       </NavLink>
diff --git a/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx b/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx
index ef5c7c67e2..adfad2f98e 100644
--- a/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx
+++ b/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx
@@ -73,7 +73,7 @@ export default function MoveFundForm() {
       }
       className="relative z-50"
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <Content
         type={flow}
         balance={bals[flow]}
diff --git a/src/pages/Admin/Charity/Dashboard/Movements.tsx b/src/pages/Admin/Charity/Dashboard/Movements.tsx
index b9777e1b40..231460ee95 100644
--- a/src/pages/Admin/Charity/Dashboard/Movements.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Movements.tsx
@@ -48,7 +48,7 @@ export function Movements({ classes = "", ...props }: Props) {
   if (movs.length === 0) return null;
 
   return (
-    <div className={`p-4 grid rounded border border-gray-l4 ${classes}`}>
+    <div className={`p-4 grid rounded-sm border border-gray-l4 ${classes}`}>
       <h4 className="grid border-b border-gray-l4 w-full pb-2">
         Pending Transactions
       </h4>
diff --git a/src/pages/Admin/Charity/Dashboard/PayoutHistory/LoadMoreBtn.tsx b/src/pages/Admin/Charity/Dashboard/PayoutHistory/LoadMoreBtn.tsx
index 21180b1cad..e03839b83a 100644
--- a/src/pages/Admin/Charity/Dashboard/PayoutHistory/LoadMoreBtn.tsx
+++ b/src/pages/Admin/Charity/Dashboard/PayoutHistory/LoadMoreBtn.tsx
@@ -11,7 +11,7 @@ export default function LoadMoreBtn(props: Props) {
       type="button"
       onClick={props.onLoadMore}
       disabled={props.disabled}
-      className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 hover:bg-blue-l5 dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 aria-disabled:dark:bg-navy disabled:dark:bg-navy"
+      className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 hover:bg-blue-l5 dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 dark:aria-disabled:bg-navy dark:disabled:bg-navy"
     >
       {props.isLoading ? (
         <>
diff --git a/src/pages/Admin/Charity/Dashboard/PayoutHistory/Table.tsx b/src/pages/Admin/Charity/Dashboard/PayoutHistory/Table.tsx
index 889af0d96d..3626168cc3 100644
--- a/src/pages/Admin/Charity/Dashboard/PayoutHistory/Table.tsx
+++ b/src/pages/Admin/Charity/Dashboard/PayoutHistory/Table.tsx
@@ -111,7 +111,7 @@ export default function Table({
 }: TableProps) {
   return (
     <table
-      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-gray-l4`}
+      className={`${classes} w-full text-sm rounded-sm border border-separate border-spacing-0 border-gray-l4`}
     >
       <TableSection type="thead" rowClass="divide-x divide-gray-l4">
         <Cells
diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/AllocationOptions.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/AllocationOptions.tsx
index b1babaa7dd..26adbf404f 100644
--- a/src/pages/Admin/Charity/Dashboard/Schedule/AllocationOptions.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Schedule/AllocationOptions.tsx
@@ -19,7 +19,7 @@ export function AllocationOptions(props: Props) {
           className="grid grid-cols-subgrid col-span-full items-center group"
         >
           <Radio value={option.value} />
-          <Label className="flex flex-1 gap-x-3 items-center group-has-[[data-checked]]:bg-blue-l4 border border-gray-l4 group-has-[[data-checked]]:border-blue-l4 group-hover:ring-1 group-hover:border-blue-l3 px-2 py-4 rounded-lg">
+          <Label className="flex flex-1 gap-x-3 items-center group-has-data-checked:bg-blue-l4 border border-gray-l4 group-has-data-checked:border-blue-l4 group-hover:ring-1 group-hover:border-blue-l3 px-2 py-4 rounded-lg">
             {option.icon}
             <div className="grid gap-y-2">
               <p className="text-sm font-medium leading-none">{option.label}</p>
diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/Edit.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/Edit.tsx
index fe840be2fb..d5147c1538 100644
--- a/src/pages/Admin/Charity/Dashboard/Schedule/Edit.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Schedule/Edit.tsx
@@ -20,7 +20,7 @@ export default function Edit() {
       }
       className="relative z-50"
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <Content amount={bal.payoutsPending} {...alloc} />
     </Dialog>
   );
@@ -51,11 +51,11 @@ function Content({ amount, ...props }: Allocation & { amount: number }) {
         <Switch
           checked={isCustom}
           onChange={setIsCustom}
-          className="group relative flex h-6 w-10 cursor-pointer rounded-full bg-gray-l4 p-1 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-blue-d1 shadow-inner"
+          className="group relative flex h-6 w-10 cursor-pointer rounded-full bg-gray-l4 p-1 transition-colors duration-200 ease-in-out focus:outline-hidden data-focus:outline-1 data-focus:outline-white data-checked:bg-blue-d1 shadow-inner"
         >
           <span
             aria-hidden="true"
-            className="pointer-events-none inline-block size-4 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-4"
+            className="pointer-events-none inline-block size-4 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-checked:translate-x-4"
           />
         </Switch>
         <Label>Set custom allocation</Label>
diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx
index 21c839a328..a6a4a8d994 100644
--- a/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx
@@ -20,7 +20,7 @@ export function Schedule(props: Props) {
   );
 
   return (
-    <div className="p-4 grid rounded border border-gray-l4 mt-4">
+    <div className="p-4 grid rounded-sm border border-gray-l4 mt-4">
       <div className="grid border-b border-gray-l4 w-full pb-2">
         <h4 className="mb-1">Current Month Donations</h4>
         <p className="font-heading font-medium">$ {humanize(props.amount)}</p>
diff --git a/src/pages/Admin/Charity/Dashboard/Summary.tsx b/src/pages/Admin/Charity/Dashboard/Summary.tsx
index def4a38728..38244e22db 100644
--- a/src/pages/Admin/Charity/Dashboard/Summary.tsx
+++ b/src/pages/Admin/Charity/Dashboard/Summary.tsx
@@ -57,12 +57,12 @@ export function Summary({ classes = "", ...props }: Props) {
     return null;
 
   return (
-    <div className={`${classes} p-4 rounded border border-gray-l4`}>
+    <div className={`${classes} p-4 rounded-sm border border-gray-l4`}>
       <h4 className="mb-6 flex items-center gap-2">
         <span>Projected Month End Balances</span>
         <Tooltip
           tip={
-            <Content className="bg-navy-d4 text-gray-l2 text-xs p-2 rounded">
+            <Content className="bg-navy-d4 text-gray-l2 text-xs p-2 rounded-sm">
               This value does not reflect any potential growth from savings and
               investments
               <Arrow />
diff --git a/src/pages/Admin/Charity/Donations/DonationsTable.tsx b/src/pages/Admin/Charity/Donations/DonationsTable.tsx
index e0f39fe1aa..fc85872c87 100644
--- a/src/pages/Admin/Charity/Donations/DonationsTable.tsx
+++ b/src/pages/Admin/Charity/Donations/DonationsTable.tsx
@@ -40,7 +40,7 @@ export default function DonationsTable({ classes = "", firstPage }: Props) {
     <div className={classes}>
       <div className="grid w-full sm:flex items-center sm:justify-end mb-2 gap-2">
         <CsvExporter
-          classes="border border-blue text-blue-d1 hover:border-blue-l2 hover:text-blue rounded px-4 py-2 text-sm"
+          classes="border border-blue text-blue-d1 hover:border-blue-l2 hover:text-blue rounded-sm px-4 py-2 text-sm"
           headers={csvHeaders}
           data={items
             .filter(
diff --git a/src/pages/Admin/Charity/Donations/Table.tsx b/src/pages/Admin/Charity/Donations/Table.tsx
index 90446b3a57..ecbfa4370e 100644
--- a/src/pages/Admin/Charity/Donations/Table.tsx
+++ b/src/pages/Admin/Charity/Donations/Table.tsx
@@ -26,7 +26,7 @@ export default function Table({
   );
 
   return (
-    <table className="w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2">
+    <table className="w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2">
       <TableSection
         type="thead"
         rowClass="bg-blue-l4 dark:bg-blue-d7 divide-x divide-blue-l2"
@@ -121,7 +121,7 @@ export default function Table({
                   type="button"
                   onClick={onLoadMore}
                   disabled={disabled}
-                  className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 enabled:hover:bg-blue-l4 enabled:dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 aria-disabled:dark:bg-navy disabled:dark:bg-navy"
+                  className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 enabled:hover:bg-blue-l4 dark:enabled:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 dark:aria-disabled:bg-navy dark:disabled:bg-navy"
                 >
                   {isLoading ? "Loading..." : "Load More"}
                 </button>
diff --git a/src/pages/Admin/Charity/EditProfile/Form.tsx b/src/pages/Admin/Charity/EditProfile/Form.tsx
index a54cbd3683..49edc236a9 100644
--- a/src/pages/Admin/Charity/EditProfile/Form.tsx
+++ b/src/pages/Admin/Charity/EditProfile/Form.tsx
@@ -101,7 +101,7 @@ export default function Form({ initSlug = "", init, id }: Props) {
             rhf.resetField("image");
           }}
           spec={bannerSpec}
-          classes={{ container: "mb-4", dropzone: "w-full aspect-[4/1]" }}
+          classes={{ container: "mb-4", dropzone: "w-full aspect-4/1" }}
           error={rhf.errors.image?.message}
         />
         <Label className="-mb-4">Logo of your organization</Label>
@@ -138,7 +138,7 @@ export default function Form({ initSlug = "", init, id }: Props) {
           spec={cardImgSpec}
           classes={{
             container: "mb-4",
-            dropzone: "w-full sm:w-96 aspect-[2/1]",
+            dropzone: "w-full sm:w-96 aspect-2/1",
           }}
           error={rhf.errors.card_img?.message}
         />
@@ -151,7 +151,7 @@ export default function Form({ initSlug = "", init, id }: Props) {
           charLimit={MAX_CHARS}
           classes={{
             field:
-              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
+              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded-sm bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
             counter: "text-navy-l1 dark:text-navy-l2",
             error: "text-right",
           }}
diff --git a/src/pages/Admin/Charity/Funds/Funds.tsx b/src/pages/Admin/Charity/Funds/Funds.tsx
index 59d7443878..fe7d3f36d1 100644
--- a/src/pages/Admin/Charity/Funds/Funds.tsx
+++ b/src/pages/Admin/Charity/Funds/Funds.tsx
@@ -29,7 +29,7 @@ export default function Funds() {
           {(["ours", "others"] satisfies CreatorType[]).map((opt) => (
             <Field key={opt} className="contents">
               <Radio value={opt} className="peer hidden" />
-              <Label className="text-sm bg-blue-l4 peer-data-[checked]:bg-blue-d1 peer-data-[checked]:text-white py-1 px-4 rounded-full hover:bg-blue-d1 hover:text-white">
+              <Label className="text-sm bg-blue-l4 peer-data-checked:bg-blue-d1 peer-data-checked:text-white py-1 px-4 rounded-full hover:bg-blue-d1 hover:text-white">
                 {opt === "ours" ? `By Nonprofit` : `By Supporters`}
               </Label>
             </Field>
diff --git a/src/pages/Admin/Charity/Media/Media.tsx b/src/pages/Admin/Charity/Media/Media.tsx
index c036cc503d..9ec6638dc7 100644
--- a/src/pages/Admin/Charity/Media/Media.tsx
+++ b/src/pages/Admin/Charity/Media/Media.tsx
@@ -18,7 +18,7 @@ export default function Media() {
   return (
     <div className="grid content-start gap-y-6 @lg:gap-y-8 @container">
       <h3 className="text-[2rem]">Media</h3>
-      <div className="border border-gray-l4 rounded p-8">
+      <div className="border border-gray-l4 rounded-sm p-8">
         <div className="flex justify-between items-center">
           <h4 className="text-2xl">Videos</h4>
           <NavLink
@@ -33,7 +33,7 @@ export default function Media() {
         <FeaturedVideos items={featuredPage.items} classes="mt-4" />
         <NavLink
           to="videos"
-          className="btn-outline-filled text-sm py-3 rounded mt-4"
+          className="btn-outline-filled text-sm py-3 rounded-sm mt-4"
         >
           View all videos
         </NavLink>
diff --git a/src/pages/Admin/Charity/Media/VideoEditor.tsx b/src/pages/Admin/Charity/Media/VideoEditor.tsx
index 479e663da8..6e57dfe721 100644
--- a/src/pages/Admin/Charity/Media/VideoEditor.tsx
+++ b/src/pages/Admin/Charity/Media/VideoEditor.tsx
@@ -30,7 +30,7 @@ export default function VideoEditor() {
       onClose={() =>
         navigate("..", { preventScrollReset: true, replace: true })
       }
-      classes="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      classes="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <Content
         edit={
diff --git a/src/pages/Admin/Charity/Media/VideoPreview.tsx b/src/pages/Admin/Charity/Media/VideoPreview.tsx
index e66628ad00..f53f35db6b 100644
--- a/src/pages/Admin/Charity/Media/VideoPreview.tsx
+++ b/src/pages/Admin/Charity/Media/VideoPreview.tsx
@@ -51,7 +51,7 @@ export default function VideoPreview(props: IMedia) {
       </div>
       {/** render only thumbnails on lists */}
       {/** @see https://github.com/CookPete/react-player/issues/145 */}
-      <div className="relative pt-[56.25%] aspect-[16/9] rounded-lg overflow-clip">
+      <div className="relative pt-[56.25%] aspect-16/9 rounded-lg overflow-clip">
         <ReactPlayer
           style={{
             pointerEvents: "none",
diff --git a/src/pages/Admin/Charity/Media/Videos/List.tsx b/src/pages/Admin/Charity/Media/Videos/List.tsx
index 1e7fbef8a8..f74493ca26 100644
--- a/src/pages/Admin/Charity/Media/Videos/List.tsx
+++ b/src/pages/Admin/Charity/Media/Videos/List.tsx
@@ -49,7 +49,7 @@ export function List({ classes = "", page1 }: Props) {
 function NoVideo({ classes = "" }) {
   return (
     <div
-      className={`bg-white ${classes} grid justify-items-center rounded border border-gray-l4 px-4 py-16`}
+      className={`bg-white ${classes} grid justify-items-center rounded-sm border border-gray-l4 px-4 py-16`}
     >
       <Image className="text-navy-l2 text-2xl mb-6" />
       <p className="font-bold mb-2">Start by adding your first video</p>
diff --git a/src/pages/Admin/Charity/Members/AddForm.tsx b/src/pages/Admin/Charity/Members/AddForm.tsx
index 89ec5cfce1..ef0daa08c2 100644
--- a/src/pages/Admin/Charity/Members/AddForm.tsx
+++ b/src/pages/Admin/Charity/Members/AddForm.tsx
@@ -17,7 +17,7 @@ export default function AddForm() {
       onClose={() =>
         navigate("..", { preventScrollReset: true, replace: true })
       }
-      classes="p-6 fixed-center z-10 text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      classes="p-6 fixed-center z-10 text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <Content />
     </Modal>
diff --git a/src/pages/Admin/Charity/Members/List.tsx b/src/pages/Admin/Charity/Members/List.tsx
index 801565ce51..a2dd59be41 100644
--- a/src/pages/Admin/Charity/Members/List.tsx
+++ b/src/pages/Admin/Charity/Members/List.tsx
@@ -28,7 +28,7 @@ interface LoadedProps extends LoaderData {
 function Loaded({ admins, classes = "", user }: LoadedProps) {
   return (
     <table
-      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2`}
+      className={`${classes} w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2`}
     >
       <TableSection
         type="thead"
diff --git a/src/pages/Admin/Charity/ProgramEditor/Milestone/Milestone.tsx b/src/pages/Admin/Charity/ProgramEditor/Milestone/Milestone.tsx
index d55e3e185b..cf9e00d005 100644
--- a/src/pages/Admin/Charity/ProgramEditor/Milestone/Milestone.tsx
+++ b/src/pages/Admin/Charity/ProgramEditor/Milestone/Milestone.tsx
@@ -49,7 +49,7 @@ export default function Milestone(props: Props) {
   return (
     <Disclosure
       as="div"
-      className="border border-gray-l4 rounded overflow-hidden"
+      className="border border-gray-l4 rounded-sm overflow-hidden"
     >
       <div className="relative py-3 px-4 text-center bg-blue-l5 dark:bg-blue-d7">
         <span className="text-xl font-bold font-heading">{props.title}</span>
@@ -97,7 +97,7 @@ export default function Milestone(props: Props) {
           spec={imgSpec([4, 1])}
           classes={{
             container: "mb-4",
-            dropzone: "w-full @md:aspect-[4/1] h-36 @md:h-auto",
+            dropzone: "w-full @-md:aspect-4/1 h-36 @md:h-auto",
           }}
           error={errors.media?.message}
         />
@@ -126,7 +126,7 @@ export default function Milestone(props: Props) {
           charLimit={MAX_CHARS}
           classes={{
             field:
-              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
+              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded-sm bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
             counter: "text-navy-l1 dark:text-navy-l2",
           }}
           error={
diff --git a/src/pages/Admin/Charity/ProgramEditor/Milestones.tsx b/src/pages/Admin/Charity/ProgramEditor/Milestones.tsx
index 4bdde3d05d..d266e2073b 100644
--- a/src/pages/Admin/Charity/ProgramEditor/Milestones.tsx
+++ b/src/pages/Admin/Charity/ProgramEditor/Milestones.tsx
@@ -14,7 +14,7 @@ export default function Milestones({ programId, milestones }: Props) {
   const fetcher = useFetcher();
 
   return (
-    <div className="@container grid gap-6 p-4 @lg:p-6 border border-gray-l4 rounded bg-white dark:bg-blue-d6">
+    <div className="@container grid gap-6 p-4 @lg:p-6 border border-gray-l4 rounded-sm bg-white dark:bg-blue-d6">
       <div className="flex flex-col @md:flex-row items-center gap-3 justify-between">
         <h4 className="text-2xl">Milestones</h4>
         <input
diff --git a/src/pages/Admin/Charity/ProgramEditor/ProgramInfo/ProgramInfo.tsx b/src/pages/Admin/Charity/ProgramEditor/ProgramInfo/ProgramInfo.tsx
index 8d330f6d81..958d8c61d4 100644
--- a/src/pages/Admin/Charity/ProgramEditor/ProgramInfo/ProgramInfo.tsx
+++ b/src/pages/Admin/Charity/ProgramEditor/ProgramInfo/ProgramInfo.tsx
@@ -60,7 +60,7 @@ export default function ProgramInfo(props: Program) {
             resetField("image");
           }}
           spec={imgSpec([4, 1])}
-          classes={{ container: "mb-4", dropzone: "w-full aspect-[4/1]" }}
+          classes={{ container: "mb-4", dropzone: "w-full aspect-4/1" }}
           error={errors.image?.message}
         />
 
@@ -74,7 +74,7 @@ export default function ProgramInfo(props: Program) {
           charLimit={MAX_CHARS}
           classes={{
             field:
-              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
+              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded-sm bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
             counter: "text-navy-l1 dark:text-navy-l2",
           }}
           error={
diff --git a/src/pages/Admin/Charity/Programs/List.tsx b/src/pages/Admin/Charity/Programs/List.tsx
index 74e3ed6c48..b17033ae59 100644
--- a/src/pages/Admin/Charity/Programs/List.tsx
+++ b/src/pages/Admin/Charity/Programs/List.tsx
@@ -4,7 +4,7 @@ import { Program } from "./Program";
 
 export default function List({ programs }: { programs: IProgram[] }) {
   return (
-    <div className="@container grid gap-3 p-4 @lg:p-8 border border-gray-l4 rounded bg-white dark:bg-blue-d6">
+    <div className="@container grid gap-3 p-4 @lg:p-8 border border-gray-l4 rounded-sm bg-white dark:bg-blue-d6">
       {programs.length === 0 ? (
         <Info>No programs</Info>
       ) : (
diff --git a/src/pages/Admin/Charity/Settings/Form.tsx b/src/pages/Admin/Charity/Settings/Form.tsx
index ea6d43d9a3..199a8f0798 100644
--- a/src/pages/Admin/Charity/Settings/Form.tsx
+++ b/src/pages/Admin/Charity/Settings/Form.tsx
@@ -118,7 +118,7 @@ export default function Form() {
           rows={5}
           type="textarea"
           classes={{
-            container: "field-admin [&_[data-error]]:-bottom-4",
+            container: "field-admin **:data-error:-bottom-4",
             label: "text-base font-medium",
           }}
           label="Tax Receipt message for donors"
@@ -221,7 +221,7 @@ export default function Form() {
                 <Input
                   type="number"
                   {...register(`increments.${idx}.value`)}
-                  className="w-full h-full font-heading outline-blue-d1 rounded text-sm font-medium bg-transparent pl-8 pr-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
+                  className="w-full h-full font-heading outline-blue-d1 rounded-sm text-sm font-medium bg-transparent pl-8 pr-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
                 />
               </div>
 
@@ -233,7 +233,7 @@ export default function Form() {
               <Textarea
                 {...register(`increments.${idx}.label`)}
                 rows={2}
-                className="w-full font-heading outline-blue-d1 rounded text-sm font-medium bg-transparent px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
+                className="w-full font-heading outline-blue-d1 rounded-sm text-sm font-medium bg-transparent px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
               />
               <p
                 data-error={!!errors.increments?.[idx]?.label?.message}
diff --git a/src/pages/Application/Container.tsx b/src/pages/Application/Container.tsx
index e30c4ff982..57c6f30ba2 100644
--- a/src/pages/Application/Container.tsx
+++ b/src/pages/Application/Container.tsx
@@ -11,12 +11,12 @@ export default function Container({ title, children, classes = "" }: Props) {
 
   return (
     <div
-      className={`w-full border border-gray-l4 rounded dark:bg-blue-d6 divide-y divide-gray-l4 ${classes}`}
+      className={`w-full border border-gray-l4 rounded-sm dark:bg-blue-d6 divide-y divide-gray-l4 ${classes}`}
     >
       <div className="flex items-center gap-x-3 p-3">
         <button
           onClick={() => setOpen((prev) => !prev)}
-          className="flex items-center justify-center p-px w-6 h-6 border border-gray-l4 rounded"
+          className="flex items-center justify-center p-px w-6 h-6 border border-gray-l4 rounded-sm"
           aria-label="toggle section content's visibility"
         >
           {isOpen ? <Minus size={18} /> : <Plus size={18} />}
diff --git a/src/pages/Application/Loaded.tsx b/src/pages/Application/Loaded.tsx
index 176679f43d..87d9f21147 100644
--- a/src/pages/Application/Loaded.tsx
+++ b/src/pages/Application/Loaded.tsx
@@ -22,7 +22,7 @@ export default function Loaded(props: Application) {
       <h3 className="text-lg">{props.contact.org_name}</h3>
       {claim && (
         <ExtLink
-          className="-mt-7 justify-self-start text-sm rounded text-blue-d1 hover:underline"
+          className="-mt-7 justify-self-start text-sm rounded-sm text-blue-d1 hover:underline"
           href={`${appRoutes.marketplace}/${claim.id}`}
         >
           Claim: {claim.name}, EIN: {claim.ein}
diff --git a/src/pages/Application/Prompt.tsx b/src/pages/Application/Prompt.tsx
index dc48bf09a5..c93e19ee3a 100644
--- a/src/pages/Application/Prompt.tsx
+++ b/src/pages/Application/Prompt.tsx
@@ -49,7 +49,7 @@ function Content() {
     <DialogPanel
       as="form"
       onSubmit={methods.handleSubmit(onSubmit)}
-      className="fixed-center z-10 grid content-start justify-items-center text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      className="fixed-center z-10 grid content-start justify-items-center text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <div className="relative w-full">
         <p className="sm:text-xl font-bold text-center border-b bg-blue-l5 dark:bg-blue-d7 border-gray-l4 p-5">
@@ -60,7 +60,7 @@ function Content() {
           preventScrollReset
           replace
           to=".."
-          className="border border-gray-l4 p-2 rounded-md absolute top-1/2 right-4 transform -translate-y-1/2 disabled:text-navy-l5 dark:disabled:text-navy-d3 disabled:dark:border-navy-d3"
+          className="border border-gray-l4 p-2 rounded-md absolute top-1/2 right-4 transform -translate-y-1/2 disabled:text-navy-l5 dark:disabled:text-navy-d3 dark:disabled:border-navy-d3"
         >
           <X className="text-lg sm:text-2xl" />
         </Link>
@@ -147,7 +147,7 @@ export default function Prompt() {
       }
       className="relative z-50"
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <Content />
     </Dialog>
   );
diff --git a/src/pages/Applications/Applications.tsx b/src/pages/Applications/Applications.tsx
index d0cc9722dc..257478ae28 100644
--- a/src/pages/Applications/Applications.tsx
+++ b/src/pages/Applications/Applications.tsx
@@ -36,7 +36,7 @@ export default function Applications() {
       <h1 className="text-center text-3xl col-span-full max-lg:mb-4">
         Applications Review - Dashboard
       </h1>
-      <div className="relative flex gap-x-3 items-center border border-gray-l4 w-full bg-white dark:bg-blue-d6 rounded">
+      <div className="relative flex gap-x-3 items-center border border-gray-l4 w-full bg-white dark:bg-blue-d6 rounded-sm">
         <Search
           size={22}
           className="text-navy-d4 dark:text-navy-l2 absolute top-1/2 -translate-y-1/2 left-3"
@@ -45,7 +45,7 @@ export default function Applications() {
           disabled={state === "loading"}
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          className="p-3 pl-10 placeholder:text-navy-l1 dark:placeholder:text-navy-l2 bg-transparent w-full outline-none disabled:bg-gray-l3 dark:disabled:bg-navy-d3"
+          className="p-3 pl-10 placeholder:text-navy-l1 dark:placeholder:text-navy-l2 bg-transparent w-full outline-hidden disabled:bg-gray-l3 dark:disabled:bg-navy-d3"
           type="text"
           placeholder="Search applications"
         />
diff --git a/src/pages/Applications/Filter/Form.tsx b/src/pages/Applications/Filter/Form.tsx
index 4807977ec0..1c8ee4b599 100644
--- a/src/pages/Applications/Filter/Form.tsx
+++ b/src/pages/Applications/Filter/Form.tsx
@@ -19,7 +19,7 @@ const Form: FC<Props> = ({ onReset, submit, classes = "" }) => {
       as="form"
       onSubmit={submit}
       onReset={onReset}
-      className={`${classes} grid content-start gap-4 w-full rounded border border-gray-l4 bg-white dark:bg-blue-d5`}
+      className={`${classes} grid content-start gap-4 w-full rounded-sm border border-gray-l4 bg-white dark:bg-blue-d5`}
     >
       <div className="lg:hidden relative text-[1.25rem] px-4 py-3 -mb-4 font-bold uppercase">
         <span className="text-blue-d1">Filters</span>
@@ -60,7 +60,7 @@ const Form: FC<Props> = ({ onReset, submit, classes = "" }) => {
         </button>
         <button
           type="submit"
-          className="btn btn-blue px-6 py-2 rounded-sm text-xs font-bold uppercase"
+          className="btn btn-blue px-6 py-2 rounded-xs text-xs font-bold uppercase"
         >
           Apply filters
         </button>
diff --git a/src/pages/Applications/Filter/index.tsx b/src/pages/Applications/Filter/index.tsx
index a46cec6969..3c8db8f5c8 100644
--- a/src/pages/Applications/Filter/index.tsx
+++ b/src/pages/Applications/Filter/index.tsx
@@ -78,7 +78,7 @@ export default function Filter({ classes = "", isDisabled }: Props) {
       <PopoverButton
         ref={buttonRef}
         disabled={isDisabled}
-        className="w-full lg:w-[22.3rem] flex justify-center items-center p-3 rounded bg-blue text-white lg:dark:text-navy-l2 lg:text-navy-l1 lg:bg-white lg:dark:bg-blue-d6 lg:justify-between disabled:bg-gray lg:disabled:bg-gray-l3 lg:dark:disabled:bg-navy-d3 lg:border lg:border-gray-l4"
+        className="w-full lg:w-[22.3rem] flex justify-center items-center p-3 rounded-sm bg-blue text-white lg:dark:text-navy-l2 lg:text-navy-l1 lg:bg-white lg:dark:bg-blue-d6 lg:justify-between disabled:bg-gray lg:disabled:bg-gray-l3 lg:dark:disabled:bg-navy-d3 lg:border lg:border-gray-l4"
       >
         {({ open }) => (
           <>
diff --git a/src/pages/Applications/LoadMoreBtn.tsx b/src/pages/Applications/LoadMoreBtn.tsx
index 1f715ba7de..59785c40b7 100644
--- a/src/pages/Applications/LoadMoreBtn.tsx
+++ b/src/pages/Applications/LoadMoreBtn.tsx
@@ -14,7 +14,7 @@ export default function LoadMoreBtn({
       type="button"
       onClick={onLoadMore}
       disabled={disabled}
-      className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 hover:bg-blue-l5 dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 aria-disabled:dark:bg-navy disabled:dark:bg-navy"
+      className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 hover:bg-blue-l5 dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 dark:aria-disabled:bg-navy dark:disabled:bg-navy"
     >
       {isLoading ? (
         <>
diff --git a/src/pages/Applications/Table.tsx b/src/pages/Applications/Table.tsx
index feafc24327..6079ea0ffe 100644
--- a/src/pages/Applications/Table.tsx
+++ b/src/pages/Applications/Table.tsx
@@ -30,7 +30,7 @@ export default function Table({
 
   return (
     <table
-      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2`}
+      className={`${classes} w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2`}
     >
       <TableSection
         type="thead"
@@ -152,7 +152,7 @@ const text: { [key in TStatus]: string } = {
 function Status({ status }: { status: TStatus }) {
   return (
     <p
-      className={`${bg[status]} rounded px-3 py-1 inline-block uppercase text-xs text-white`}
+      className={`${bg[status]} rounded-sm px-3 py-1 inline-block uppercase text-xs text-white`}
     >
       {text[status]}
     </p>
diff --git a/src/pages/BankingApplication/Loaded.tsx b/src/pages/BankingApplication/Loaded.tsx
index c048284bf4..1b3b138b74 100644
--- a/src/pages/BankingApplication/Loaded.tsx
+++ b/src/pages/BankingApplication/Loaded.tsx
@@ -35,7 +35,7 @@ export function Loaded(props: BankingApplicationDetails) {
         </span>
       </div>
 
-      <dl className="grid sm:grid-cols-[auto_auto_1fr] border border-gray-l4 rounded">
+      <dl className="grid sm:grid-cols-[auto_auto_1fr] border border-gray-l4 rounded-sm">
         <Row label="Currency">{props.currency}</Row>
         <Row label="Country">{props.country}</Row>
         <Row label="Recipient name">{props.name.fullName}</Row>
diff --git a/src/pages/BankingApplication/Prompt.tsx b/src/pages/BankingApplication/Prompt.tsx
index 596792adb9..272ba8b106 100644
--- a/src/pages/BankingApplication/Prompt.tsx
+++ b/src/pages/BankingApplication/Prompt.tsx
@@ -24,8 +24,8 @@ export function Prompt(props: Props) {
       }
       className="relative z-50"
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
-      <DialogPanel className="fixed-center z-10 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden">
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
+      <DialogPanel className="fixed-center z-10 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden">
         <Content {...props} />
       </DialogPanel>
     </Dialog>
@@ -59,7 +59,7 @@ function Content({ verdict }: Props) {
         <Link
           to=".."
           aria-disabled={fetcher.state !== "idle"}
-          className="border border-gray-l4 p-2 rounded-md absolute top-1/2 right-4 transform -translate-y-1/2 disabled:text-navy-l5 dark:disabled:text-navy-d3 disabled:dark:border-navy-d3"
+          className="border border-gray-l4 p-2 rounded-md absolute top-1/2 right-4 transform -translate-y-1/2 disabled:text-navy-l5 dark:disabled:text-navy-d3 dark:disabled:border-navy-d3"
         >
           <X className="text-lg sm:text-2xl" />
         </Link>
diff --git a/src/pages/BankingApplications/Filter/Form.tsx b/src/pages/BankingApplications/Filter/Form.tsx
index 54716b514b..3ae432efa2 100644
--- a/src/pages/BankingApplications/Filter/Form.tsx
+++ b/src/pages/BankingApplications/Filter/Form.tsx
@@ -17,7 +17,7 @@ const Form: FC<Props> = ({ onReset, submit, classes = "" }) => {
       as="form"
       onSubmit={submit}
       onReset={onReset}
-      className={`${classes} grid content-start gap-4 w-full rounded border border-gray-l4 bg-white dark:bg-blue-d5`}
+      className={`${classes} grid content-start gap-4 w-full rounded-sm border border-gray-l4 bg-white dark:bg-blue-d5`}
     >
       <div className="lg:hidden relative text-[1.25rem] px-4 py-3 -mb-4 font-bold uppercase">
         <span className="text-blue-d1">Filters</span>
@@ -42,7 +42,7 @@ const Form: FC<Props> = ({ onReset, submit, classes = "" }) => {
         </button>
         <button
           type="submit"
-          className="btn btn-blue px-6 py-2 rounded-sm text-xs font-bold uppercase"
+          className="btn btn-blue px-6 py-2 rounded-xs text-xs font-bold uppercase"
         >
           Apply filters
         </button>
diff --git a/src/pages/BankingApplications/Filter/index.tsx b/src/pages/BankingApplications/Filter/index.tsx
index 26cc84e02c..e3862e0b6a 100644
--- a/src/pages/BankingApplications/Filter/index.tsx
+++ b/src/pages/BankingApplications/Filter/index.tsx
@@ -67,7 +67,7 @@ export default function Filter({
       <PopoverButton
         ref={buttonRef}
         disabled={isDisabled}
-        className="w-full lg:w-[22.3rem] flex justify-center items-center p-3 rounded bg-blue-d1 text-white lg:dark:text-navy-l2 lg:text-navy-l1 lg:bg-white lg:dark:bg-blue-d6 lg:justify-between disabled:bg-gray lg:disabled:bg-gray-l3 lg:dark:disabled:bg-navy-d3 lg:border lg:border-gray-l4"
+        className="w-full lg:w-[22.3rem] flex justify-center items-center p-3 rounded-sm bg-blue-d1 text-white lg:dark:text-navy-l2 lg:text-navy-l1 lg:bg-white lg:dark:bg-blue-d6 lg:justify-between disabled:bg-gray lg:disabled:bg-gray-l3 lg:dark:disabled:bg-navy-d3 lg:border lg:border-gray-l4"
       >
         {({ open }) => (
           <>
diff --git a/src/pages/BankingApplications/LoadMoreBtn.tsx b/src/pages/BankingApplications/LoadMoreBtn.tsx
index 1f715ba7de..59785c40b7 100644
--- a/src/pages/BankingApplications/LoadMoreBtn.tsx
+++ b/src/pages/BankingApplications/LoadMoreBtn.tsx
@@ -14,7 +14,7 @@ export default function LoadMoreBtn({
       type="button"
       onClick={onLoadMore}
       disabled={disabled}
-      className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 hover:bg-blue-l5 dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 aria-disabled:dark:bg-navy disabled:dark:bg-navy"
+      className="flex items-center justify-center gap-3 uppercase text-sm font-bold rounded-b w-full h-12 hover:bg-blue-l5 dark:hover:bg-blue-d3 active:bg-blue-l4 dark:active:bg-blue-d2 disabled:bg-gray-l3 disabled:text-navy-l2 aria-disabled:bg-gray-l3 dark:aria-disabled:bg-navy dark:disabled:bg-navy"
     >
       {isLoading ? (
         <>
diff --git a/src/pages/BankingApplications/Table.tsx b/src/pages/BankingApplications/Table.tsx
index 901c92a56c..6742017903 100644
--- a/src/pages/BankingApplications/Table.tsx
+++ b/src/pages/BankingApplications/Table.tsx
@@ -16,7 +16,7 @@ export default function Table({
 }: TableProps) {
   return (
     <table
-      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2`}
+      className={`${classes} w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2`}
     >
       <TableSection
         type="thead"
@@ -102,7 +102,7 @@ const text: { [key in BankingApplicationStatus]: string } = {
 function Status({ status }: { status: BankingApplicationStatus }) {
   return (
     <p
-      className={`${bg[status]} rounded px-3 py-1 inline-block uppercase text-xs text-white`}
+      className={`${bg[status]} rounded-sm px-3 py-1 inline-block uppercase text-xs text-white`}
     >
       {text[status]}
     </p>
diff --git a/src/pages/Blog/Post.tsx b/src/pages/Blog/Post.tsx
index 6b9a0fb4ea..c6708cf747 100644
--- a/src/pages/Blog/Post.tsx
+++ b/src/pages/Blog/Post.tsx
@@ -75,7 +75,7 @@ function Loaded(post: IPost) {
       <div className="w-full h-px bg-gray-l4 my-4" />
 
       <div
-        className="prose lg:prose-lg prose-a:text-blue prose-a:hover:text-blue-d1"
+        className="prose lg:prose-lg prose-a:text-blue hover:prose-a:text-blue-d1"
         //biome-ignore lint: trusted html
         dangerouslySetInnerHTML={{ __html: post.content.rendered }}
       />
diff --git a/src/pages/Donate/OrgCard.tsx b/src/pages/Donate/OrgCard.tsx
index c0e492110a..95ee10ed39 100644
--- a/src/pages/Donate/OrgCard.tsx
+++ b/src/pages/Donate/OrgCard.tsx
@@ -16,7 +16,7 @@ export default function OrgCard({ classes = "", ...props }: Props) {
   const { balance } = useLoaderData() as DonateData;
   return (
     <div
-      className={`grid @xl/org-card:grid-cols-[3fr_2fr] gap-x-4 gap-y-6 p-4 md:bg-white rounded-lg md:border border-gray-l4 ${classes}`}
+      className={`grid @-xl/org-card:grid-cols-[3fr_2fr] gap-x-4 gap-y-6 p-4 md:bg-white rounded-lg md:border border-gray-l4 ${classes}`}
     >
       <div className="grid grid-cols-[auto-1fr] gap-x-4 justify-start order-2 @xl/org-card:order-1">
         <Image
diff --git a/src/pages/Funds/Cards/Card.tsx b/src/pages/Funds/Cards/Card.tsx
index a363972a7d..fc41cc08fb 100644
--- a/src/pages/Funds/Cards/Card.tsx
+++ b/src/pages/Funds/Cards/Card.tsx
@@ -23,7 +23,7 @@ export default function Card({
         to={`${appRoutes.funds}/${id}`}
         className="grid grid-rows-subgrid row-span-4 h-full overflow-clip rounded-lg border border-gray-l4 hover:border-blue-d1"
       >
-        <div className="aspect-[4/1] w-full relative">
+        <div className="aspect-4/1 w-full relative">
           <Image
             loading="lazy"
             src={banner}
diff --git a/src/pages/Funds/CreateFund/CreateFund.tsx b/src/pages/Funds/CreateFund/CreateFund.tsx
index 9971ab0941..22371d9e8e 100644
--- a/src/pages/Funds/CreateFund/CreateFund.tsx
+++ b/src/pages/Funds/CreateFund/CreateFund.tsx
@@ -112,7 +112,7 @@ export default function CreateFund() {
           charLimit={MAX_DESCRIPTION_CHAR}
           classes={{
             field:
-              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
+              "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded-sm bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
             counter: "text-navy-l1 dark:text-navy-l2",
             error: "text-right",
           }}
@@ -166,7 +166,7 @@ export default function CreateFund() {
           }}
           classes={{
             container: "mb-4",
-            dropzone: "aspect-[4/1]",
+            dropzone: "aspect-4/1",
           }}
           error={errors.banner?.message}
         />
@@ -187,7 +187,7 @@ export default function CreateFund() {
           spec={imgSpec([1, 1])}
           classes={{
             container: "mb-4",
-            dropzone: "aspect-[1/1] w-60",
+            dropzone: "aspect-1/1 w-60",
           }}
           error={errors.logo?.message}
         />
diff --git a/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx b/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx
index 58a987925d..cee30a82e6 100644
--- a/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx
+++ b/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx
@@ -58,10 +58,10 @@ export const EndowmentSelector = forwardRef<El, Props>((props, ref) => {
               />
             ))}
 
-            <div className="bg-blue-l5 inline-flex items-center gap-2 text-navy-l1 dark:text-navy-l2 pl-3 rounded">
+            <div className="bg-blue-l5 inline-flex items-center gap-2 text-navy-l1 dark:text-navy-l2 pl-3 rounded-sm">
               <Search size={20} />
               <ComboboxInput
-                className="appearance-none bg-transparent first:pl-3 focus:outline-none h-10"
+                className="appearance-none bg-transparent first:pl-3 focus:outline-hidden h-10"
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 ref={ref}
@@ -91,7 +91,7 @@ interface ISelectedOption extends EndowOption {
 
 function SelectedOption({ onDeselect, ...props }: ISelectedOption) {
   return (
-    <div className="flex items-center px-3 gap-2 h-10 border border-gray-l4 rounded font-semibold text-navy-l1 dark:text-navy-l2">
+    <div className="flex items-center px-3 gap-2 h-10 border border-gray-l4 rounded-sm font-semibold text-navy-l1 dark:text-navy-l2">
       <Image src={props.logo} className="w-8" />
       <span className="max-w-[200px] truncate">{props.name}</span>
       <button
diff --git a/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx b/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx
index 7076ac785a..fe1ddde151 100644
--- a/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx
+++ b/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx
@@ -72,7 +72,7 @@ export function Options({ classes = "", searchText }: Props) {
               id: o.id,
             } satisfies EndowOption
           }
-          className="flex gap-x-2 p-2 data-[selected]:text-blue-d1 data-[selected]:pointer-events-none hover:bg-blue-l4 select-none"
+          className="flex gap-x-2 p-2 data-selected:text-blue-d1 data-selected:pointer-events-none hover:bg-blue-l4 select-none"
         >
           <Image src={o.card_img} className="w-8" />
           <span>{o.name}</span>
diff --git a/src/pages/Funds/EditFund/Form.tsx b/src/pages/Funds/EditFund/Form.tsx
index ed39cb340e..d2470a885f 100644
--- a/src/pages/Funds/EditFund/Form.tsx
+++ b/src/pages/Funds/EditFund/Form.tsx
@@ -75,7 +75,7 @@ export function Form({
         charLimit={MAX_DESCRIPTION_CHARS}
         classes={{
           field:
-            "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
+            "rich-text-toolbar border border-gray-l4 text-sm grid grid-rows-[auto_1fr] rounded-sm bg-gray-l6 dark:bg-blue-d5 p-3 min-h-[15rem]",
           counter: "text-navy-l1 dark:text-navy-l2",
           error: "text-right",
         }}
@@ -98,7 +98,7 @@ export function Form({
           rhf.resetField("logo");
         }}
         spec={imgSpec([1, 1])}
-        classes={{ container: "w-80 aspect-[1/1]" }}
+        classes={{ container: "w-80 aspect-1/1" }}
         error={rhf.errors.logo?.message}
       />
 
@@ -115,7 +115,7 @@ export function Form({
           rhf.resetField("banner");
         }}
         spec={imgSpec([4, 1])}
-        classes={{ container: "w-full aspect-[4/1]" }}
+        classes={{ container: "w-full aspect-4/1" }}
         error={rhf.errors.banner?.message}
       />
 
diff --git a/src/pages/Funds/Fund/index.tsx b/src/pages/Funds/Fund/index.tsx
index 3b802b7f8d..0641035ec4 100644
--- a/src/pages/Funds/Fund/index.tsx
+++ b/src/pages/Funds/Fund/index.tsx
@@ -161,7 +161,7 @@ export default function Fund() {
               >
                 <Image
                   src={m.logo}
-                  className="aspect-[2/1] rounded-sm"
+                  className="aspect-2/1 rounded-xs"
                   width={50}
                 />
                 <Link
diff --git a/src/pages/Funds/Fund/share.tsx b/src/pages/Funds/Fund/share.tsx
index 20e8771036..f1e0162489 100644
--- a/src/pages/Funds/Fund/share.tsx
+++ b/src/pages/Funds/Fund/share.tsx
@@ -94,20 +94,20 @@ function Prompt({ recipientName, open, setOpen, ...social }: IPrompt) {
     <Modal
       open={open}
       onClose={() => setOpen(false)}
-      classes="grid content-start fixed-center z-20 border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 text-navy-d4 dark:text-white w-[91%] sm:w-full max-w-[39rem] rounded overflow-hidden"
+      classes="grid content-start fixed-center z-20 border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 text-navy-d4 dark:text-white w-[91%] sm:w-full max-w-[39rem] rounded-sm overflow-hidden"
     >
       <div className="grid place-items-center relative h-16 font-heading font-bold bg-blue-l5 dark:bg-blue-d7 border-b border-gray-l4">
         Share on {social.title}
         <button
           onClick={() => setOpen(false)}
-          className="absolute top-1/2 transform -translate-y-1/2 right-4 w-10 h-10 border border-gray-l4 rounded "
+          className="absolute top-1/2 transform -translate-y-1/2 right-4 w-10 h-10 border border-gray-l4 rounded-sm "
         >
           <X className="absolute-center" width={35} />
         </button>
       </div>
       <p
         ref={msgRef}
-        className="my-6 sm:my-10 mx-4 sm:mx-12 text-sm leading-normal p-3 border dark:bg-blue-d6 border-gray-l4 rounded"
+        className="my-6 sm:my-10 mx-4 sm:mx-12 text-sm leading-normal p-3 border dark:bg-blue-d6 border-gray-l4 rounded-sm"
       >
         Donate to <span className="font-bold">{recipientName}</span> fundraiser
         on <span className="font-bold">{social.handle}</span>!{" "}
diff --git a/src/pages/Funds/Fund/video.tsx b/src/pages/Funds/Fund/video.tsx
index e15fb7a153..533877a9b9 100644
--- a/src/pages/Funds/Fund/video.tsx
+++ b/src/pages/Funds/Fund/video.tsx
@@ -7,7 +7,7 @@ interface IVideo {
 export function Video(props: IVideo) {
   return (
     /** @see https://github.com/CookPete/react-player/issues/145 */
-    <div className="relative pt-[56.25%] aspect-[16/9] rounded-lg overflow-clip">
+    <div className="relative pt-[56.25%] aspect-16/9 rounded-lg overflow-clip">
       <ReactPlayer
         style={{
           position: "absolute",
diff --git a/src/pages/Funds/common/videos/video-modal.tsx b/src/pages/Funds/common/videos/video-modal.tsx
index 8a0440bcc6..a974378c71 100644
--- a/src/pages/Funds/common/videos/video-modal.tsx
+++ b/src/pages/Funds/common/videos/video-modal.tsx
@@ -27,7 +27,7 @@ export function VideoModal(props: IVideoModal) {
     <Modal
       open={props.open}
       onClose={() => props.setOpen(false)}
-      classes="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      classes="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <form
         className="contents"
@@ -41,7 +41,7 @@ export function VideoModal(props: IVideoModal) {
           </p>
           <button
             onClick={() => props.setOpen(false)}
-            className="border border-gray-l4 p-2 rounded-md absolute top-1/2 right-4 transform -translate-y-1/2 disabled:text-navy-l5 dark:disabled:text-navy-d3 disabled:dark:border-navy-d3"
+            className="border border-gray-l4 p-2 rounded-md absolute top-1/2 right-4 transform -translate-y-1/2 disabled:text-navy-l5 dark:disabled:text-navy-d3 dark:disabled:border-navy-d3"
           >
             <X size={24} />
           </button>
diff --git a/src/pages/Funds/common/videos/video-preview.tsx b/src/pages/Funds/common/videos/video-preview.tsx
index 13c424de7d..19b4745784 100644
--- a/src/pages/Funds/common/videos/video-preview.tsx
+++ b/src/pages/Funds/common/videos/video-preview.tsx
@@ -30,7 +30,7 @@ export function VideoPreview(props: IVideoPreview) {
       </div>
       {/** render only thumbnails on lists */}
       {/** @see https://github.com/CookPete/react-player/issues/145 */}
-      <div className="relative pt-[56.25%] aspect-[16/9] rounded-lg overflow-clip">
+      <div className="relative pt-[56.25%] aspect-16/9 rounded-lg overflow-clip">
         <ReactPlayer
           style={{
             pointerEvents: "none",
diff --git a/src/pages/Home/Blogs/Blogs.tsx b/src/pages/Home/Blogs/Blogs.tsx
index 81317aabb3..378a0fa1d2 100644
--- a/src/pages/Home/Blogs/Blogs.tsx
+++ b/src/pages/Home/Blogs/Blogs.tsx
@@ -29,7 +29,7 @@ const Blogs = () => {
   });
 
   return (
-    <section className="grid content-start py-40 bg-gradient-to-b from-transparent via-peach/40 to-transparent overflow-x-clip">
+    <section className="grid content-start py-40 bg-linear-to-b from-transparent via-peach/40 to-transparent overflow-x-clip">
       <h2 className="text-navy-d4 text-3xl md:text-4.5xl text-center mb-14 px-4">
         Gain Knowledge to Empower Your Nonprofit
       </h2>
diff --git a/src/pages/Home/BottomCta.tsx b/src/pages/Home/BottomCta.tsx
index d9ce593319..228d66ced8 100644
--- a/src/pages/Home/BottomCta.tsx
+++ b/src/pages/Home/BottomCta.tsx
@@ -7,7 +7,7 @@ import { appRoutes } from "constants/routes";
 export function BottomCta({ className = "" }) {
   return (
     <div
-      className={`${className} grid md:grid-cols-[3fr_1fr] bg-gradient-to-br from-blue-d1 to-white rounded-3xl md:rounded-4xl px-10 py-12 md:px-16 md:py-[4.5rem]`}
+      className={`${className} grid md:grid-cols-[3fr_1fr] bg-linear-to-br from-blue-d1 to-white rounded-3xl md:rounded-4xl px-10 py-12 md:px-16 md:py-[4.5rem]`}
     >
       <div className="order-2 md:order-1">
         <h4 className="text-center md:text-left uppercase [28rem]:text-lg text-white leading-normal mb-6">
diff --git a/src/pages/Home/Feature1.tsx b/src/pages/Home/Feature1.tsx
index 8c8369512d..e1fc3e47f9 100644
--- a/src/pages/Home/Feature1.tsx
+++ b/src/pages/Home/Feature1.tsx
@@ -38,7 +38,7 @@ const items: TListItem[] = [
 export function Feature1({ className = "" }) {
   return (
     <section
-      className={`${className} pt-56 pb-20 lg:pb-0 grid content-start bg-gradient-to-b from-transparent to-peach/20`}
+      className={`${className} pt-56 pb-20 lg:pb-0 grid content-start bg-linear-to-b from-transparent to-peach/20`}
     >
       <h2 className="text-sm md:text-lg text-blue-d1 text-center mb-4">
         Easy as 1-2-3
diff --git a/src/pages/Home/Header/SearchField.tsx b/src/pages/Home/Header/SearchField.tsx
index 96299e4784..e86be901f6 100644
--- a/src/pages/Home/Header/SearchField.tsx
+++ b/src/pages/Home/Header/SearchField.tsx
@@ -31,7 +31,7 @@ export default function SearchField({ classes = "", onChange }: Props) {
         id="__endow-search"
         type="text"
         placeholder="Search causes..."
-        className="focus:outline-none text-lg placeholder:text-gray text-navy-l1 autofill:bg-white"
+        className="focus:outline-hidden text-lg placeholder:text-gray text-navy-l1 autofill:bg-white"
       />
     </div>
   );
diff --git a/src/pages/Home/Testimonials/Testimonials.tsx b/src/pages/Home/Testimonials/Testimonials.tsx
index 4c74b8518c..bf76de5373 100644
--- a/src/pages/Home/Testimonials/Testimonials.tsx
+++ b/src/pages/Home/Testimonials/Testimonials.tsx
@@ -18,7 +18,7 @@ const Testimonials = () => {
   });
 
   return (
-    <div className="grid relative pt-48 bg-gradient-to-b from-peach/20 to-transparent overflow-x-clip">
+    <div className="grid relative pt-48 bg-linear-to-b from-peach/20 to-transparent overflow-x-clip">
       <img
         src={quotation}
         alt="quotation mark"
diff --git a/src/pages/Home/Video.tsx b/src/pages/Home/Video.tsx
index 558768b31d..15f1ee67dc 100644
--- a/src/pages/Home/Video.tsx
+++ b/src/pages/Home/Video.tsx
@@ -45,7 +45,7 @@ const Video = () => {
   return (
     <section
       id={triggerId}
-      className="grid relative px-6 pt-40 lg:pt-80 bg-gradient-to-b from-peach/20 to-transparent overflow-x-clip"
+      className="grid relative px-6 pt-40 lg:pt-80 bg-linear-to-b from-peach/20 to-transparent overflow-x-clip"
     >
       <div className="flex justify-self-center relative">
         <img
diff --git a/src/pages/Marketplace/Filter/Countries.tsx b/src/pages/Marketplace/Filter/Countries.tsx
index 535247edea..dde834c3f8 100644
--- a/src/pages/Marketplace/Filter/Countries.tsx
+++ b/src/pages/Marketplace/Filter/Countries.tsx
@@ -36,7 +36,7 @@ export default function Countries() {
       className="relative"
       multiple
     >
-      <div className="flex items-center field-input justify-between cursor-pointer p-1 focus-within:border-gray-d1 focus-within:dark:border-blue-l2">
+      <div className="flex items-center field-input justify-between cursor-pointer p-1 focus-within:border-gray-d1 dark:focus-within:border-blue-l2">
         <div className="flex flex-wrap gap-2 h-full">
           {pcountries.map((opt) => (
             <SelectedOption
@@ -47,17 +47,17 @@ export default function Countries() {
             />
           ))}
 
-          <div className="inline-flex p-1 items-center gap-2 bg-blue-l5 text-navy-l1 dark:text-navy-l2 rounded">
+          <div className="inline-flex p-1 items-center gap-2 bg-blue-l5 text-navy-l1 dark:text-navy-l2 rounded-sm">
             <SearchIcon size={18} />
             <ComboboxInput
-              className="appearance-none bg-transparent focus:outline-none"
+              className="appearance-none bg-transparent focus:outline-hidden"
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
             />
           </div>
         </div>
       </div>
-      <ComboboxOptions className="rounded-sm text-sm border border-gray-l4 absolute top-full mt-2 z-10 bg-gray-l6 dark:bg-blue-d6 w-full max-h-[10rem] overflow-y-auto scroller">
+      <ComboboxOptions className="rounded-xs text-sm border border-gray-l4 absolute top-full mt-2 z-10 bg-gray-l6 dark:bg-blue-d6 w-full max-h-[10rem] overflow-y-auto scroller">
         {!isEmpty(filteredOptions) &&
           filteredOptions.map((name) => (
             <ComboboxOption key={name} value={name} className={optionStyle}>
@@ -81,14 +81,14 @@ type SelectedProps = {
 };
 
 const optionStyle =
-  "px-4 py-2 cursor-pointer text-sm data-[selected]:bg-blue-l4 hover:cursor-pointer hover:bg-blue-l5";
+  "px-4 py-2 cursor-pointer text-sm data-selected:bg-blue-l4 hover:cursor-pointer hover:bg-blue-l5";
 
 function SelectedOption({ selected, onChange, option }: SelectedProps) {
   const handleRemove = (value: string) =>
     onChange(selected.filter((s) => s !== value));
 
   return (
-    <div className="flex gap-2 items-center text-xs pt-1 pb-[.3rem] px-2 bg-blue-l5 border border-gray-l4 rounded-sm">
+    <div className="flex gap-2 items-center text-xs pt-1 pb-[.3rem] px-2 bg-blue-l5 border border-gray-l4 rounded-xs">
       <span className="max-w-[200px] truncate">{option}</span>
       <button
         type="button"
diff --git a/src/pages/Marketplace/Filter/Filter.tsx b/src/pages/Marketplace/Filter/Filter.tsx
index 7fc71a777e..5b4d76ceaf 100644
--- a/src/pages/Marketplace/Filter/Filter.tsx
+++ b/src/pages/Marketplace/Filter/Filter.tsx
@@ -21,9 +21,9 @@ export default function Filter({ classes = "" }: { classes?: string }) {
         )
       }
     >
-      <DialogBackdrop className="fixed z-40 inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed z-40 inset-0 bg-black/30 data-closed:opacity-0" />
       <DialogPanel
-        className={`${classes} fixed-center z-50 isolate w-full max-w-[95vw] max-h-[95vh] sm:max-w-md overflow-y-auto scroller border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 dark:text-white rounded`}
+        className={`${classes} fixed-center z-50 isolate w-full max-w-[95vw] max-h-[95vh] sm:max-w-md overflow-y-auto scroller border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 dark:text-white rounded-sm`}
       >
         <div className="bg-blue-l5 dark:bg-blue-d7 flex items-center p-4 border-b border-gray-l4">
           <p className="font-bold font-heading uppercase mr-auto">Filters</p>
diff --git a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Balances.tsx b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Balances.tsx
index cea026e9da..5933b29b20 100644
--- a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Balances.tsx
+++ b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Balances.tsx
@@ -14,7 +14,7 @@ export default function Balances() {
 
 function Balance(props: { title: string; amount: number }) {
   return (
-    <div className="flex flex-col justify-center items-center gap-2 h-20 w-full py-4 rounded border border-gray-l4 dark:bg-blue-d6 md:items-start md:h-28 md:px-6 md:py-04">
+    <div className="flex flex-col justify-center items-center gap-2 h-20 w-full py-4 rounded-sm border border-gray-l4 dark:bg-blue-d6 md:items-start md:h-28 md:px-6 md:py-04">
       <p className="font-heading font-bold text-xs tracking-wider uppercase">
         {props.title}
       </p>
diff --git a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/DetailsColumn.tsx b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/DetailsColumn.tsx
index 75c60b47f6..b43969afb2 100644
--- a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/DetailsColumn.tsx
+++ b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/DetailsColumn.tsx
@@ -16,7 +16,7 @@ export default function DetailsColumn({ className = "" }) {
   return (
     <div className="flex flex-col gap-6 w-full">
       <div className={`${className} w-full lg:w-96`}>
-        <div className="flex flex-col gap-8 w-full p-8 border border-gray-l4 rounded">
+        <div className="flex flex-col gap-8 w-full p-8 border border-gray-l4 rounded-sm">
           {p.registration_number && (
             <Detail title="registration no.">{p.registration_number}</Detail>
           )}
@@ -50,7 +50,7 @@ export default function DetailsColumn({ className = "" }) {
         {p.claimed === false && (
           <NavLink
             to={`${appRoutes.register}/${regRoutes.welcome}?claim=${p.registration_number}`}
-            className="max-lg:text-center block mt-4 font-medium text-blue-d1 hover:underline p-8 border border-gray-l4 rounded"
+            className="max-lg:text-center block mt-4 font-medium text-blue-d1 hover:underline p-8 border border-gray-l4 rounded-sm"
           >
             Claim this organization
           </NavLink>
diff --git a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx
index 29d5c3b62b..42d441c0bc 100644
--- a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx
+++ b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx
@@ -15,7 +15,7 @@ export function Fundraisers({ classes = "" }: Props) {
   if (funds.length === 0) return null;
 
   return (
-    <div className={`${classes} p-8 border border-gray-l4 rounded`}>
+    <div className={`${classes} p-8 border border-gray-l4 rounded-sm`}>
       <h3 className="mb-4 border-b border-gray-l4 pb-2">Fundraisers</h3>
       <div className="grid gap-y-8">
         {funds.map((f) => (
diff --git a/src/pages/Profile/Body/GeneralInfo/Media.tsx b/src/pages/Profile/Body/GeneralInfo/Media.tsx
index 2ae41e6dc0..e7e558529a 100644
--- a/src/pages/Profile/Body/GeneralInfo/Media.tsx
+++ b/src/pages/Profile/Body/GeneralInfo/Media.tsx
@@ -14,7 +14,7 @@ export default function Media({ media }: { media: IMedia[] }) {
 function Medium(props: IMedia) {
   return (
     /** @see https://github.com/CookPete/react-player/issues/145 */
-    <div className="relative pt-[56.25%] aspect-[16/9] rounded-lg overflow-clip">
+    <div className="relative pt-[56.25%] aspect-16/9 rounded-lg overflow-clip">
       <ReactPlayer
         style={{
           position: "absolute",
diff --git a/src/pages/Profile/Body/GeneralInfo/Programs.tsx b/src/pages/Profile/Body/GeneralInfo/Programs.tsx
index 4bca832128..9094b91814 100644
--- a/src/pages/Profile/Body/GeneralInfo/Programs.tsx
+++ b/src/pages/Profile/Body/GeneralInfo/Programs.tsx
@@ -15,7 +15,7 @@ export default function Programs({ programs }: { programs: TProgram[] }) {
 
 function Program(props: TProgram) {
   return (
-    <div className="border border-gray-l4 rounded relative group overflow-hidden">
+    <div className="border border-gray-l4 rounded-sm relative group overflow-hidden">
       <Link
         to={`program/${props.id}`}
         className="absolute inset-0 group-hover:border group-hover:border-blue-d1 dark:group-hover:border-blue"
diff --git a/src/pages/Profile/Body/Program/Milestones.tsx b/src/pages/Profile/Body/Program/Milestones.tsx
index 6d4ef3a798..56f03188f6 100644
--- a/src/pages/Profile/Body/Program/Milestones.tsx
+++ b/src/pages/Profile/Body/Program/Milestones.tsx
@@ -41,7 +41,7 @@ function Milestone(m: TMilestone) {
     >
       {m.media && (
         <div className="pl-6 sm:pl-8">
-          <Image src={m.media} className="h-60 w-full rounded" />
+          <Image src={m.media} className="h-60 w-full rounded-sm" />
         </div>
       )}
 
diff --git a/src/pages/Profile/Body/common/Container.tsx b/src/pages/Profile/Body/common/Container.tsx
index e88090dc0f..c8b51a2f1f 100644
--- a/src/pages/Profile/Body/common/Container.tsx
+++ b/src/pages/Profile/Body/common/Container.tsx
@@ -18,7 +18,7 @@ export default function Container({
 
   return (
     <div
-      className={`flex flex-col gap-px w-full border border-gray-l4 rounded dark:bg-blue-d6 ${classes}`}
+      className={`flex flex-col gap-px w-full border border-gray-l4 rounded-sm dark:bg-blue-d6 ${classes}`}
     >
       {expanded ? (
         <StaticHeader title={title} />
@@ -43,7 +43,7 @@ type HeaderProps = {
 function StaticHeader({ title, classes = "", children }: HeaderProps) {
   return (
     <div
-      className={`flex items-center justify-between px-8 py-5 w-full bg-blue-l4 border-gray-l4 rounded dark:bg-blue-d7 ${classes}`}
+      className={`flex items-center justify-between px-8 py-5 w-full bg-blue-l4 border-gray-l4 rounded-sm dark:bg-blue-d7 ${classes}`}
     >
       <span className="font-heading font-bold text-xl">{title}</span>
       {children}
@@ -60,7 +60,7 @@ function Header(props: {
     <StaticHeader classes={props.isOpen ? "border-b" : ""} title={props.title}>
       <button
         onClick={props.onClick}
-        className="flex items-center justify-center p-px w-10 h-10 border border-gray-l4 rounded"
+        className="flex items-center justify-center p-px w-10 h-10 border border-gray-l4 rounded-sm"
         aria-label="toggle section content's visibility"
       >
         {props.isOpen ? <Minus size={18} /> : <Plus size={18} />}
diff --git a/src/pages/Registration/Steps/Banking/Banking.tsx b/src/pages/Registration/Steps/Banking/Banking.tsx
index 81e21e83e0..7085a239f4 100644
--- a/src/pages/Registration/Steps/Banking/Banking.tsx
+++ b/src/pages/Registration/Steps/Banking/Banking.tsx
@@ -34,7 +34,7 @@ export default function Banking() {
           <span>Bank statement</span>
         </ExtLink>
         <button
-          className="btn-red px-2 py-1 rounded text-xs mt-2 mb-8"
+          className="btn-red px-2 py-1 rounded-sm text-xs mt-2 mb-8"
           type="button"
           onClick={() => setIsChanging(true)}
         >
@@ -63,7 +63,7 @@ export default function Banking() {
     <div className="flex flex-col items-start max-sm:items-center">
       {isChanging && (
         <button
-          className="btn-blue px-2 py-1 rounded text-xs mt-2 mb-4"
+          className="btn-blue px-2 py-1 rounded-sm text-xs mt-2 mb-4"
           type="button"
           onClick={() => setIsChanging(false)}
         >
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx b/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx
index a8a19bbd91..6e732d7569 100644
--- a/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx
+++ b/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx
@@ -40,23 +40,23 @@ export const ReferralMethodSelector = forwardRef<HTMLButtonElement, Props>(
         >
           <ListboxButton
             ref={ref}
-            className="group flex items-center focus:outline outline-2 outline-blue-d1 outline-offset-[3px] text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded disabled:bg-gray-l5 disabled:text-navy-l1"
+            className="group flex items-center focus:outline outline-2 outline-blue-d1 outline-offset-[3px] text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded-sm disabled:bg-gray-l5 disabled:text-navy-l1"
           >
             <span>{props.value.label}</span>
             <ChevronDown
               size={20}
-              className="group-data-[open]:rotate-180 transition-transform ease-in-out"
+              className="group-data-open:rotate-180 transition-transform ease-in-out"
             />
           </ListboxButton>
           <ListboxOptions
             anchor={{ to: "bottom", gap: 5, padding: 10 }}
-            className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded h-40"
+            className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded-sm h-40"
           >
             {referralOptions.map((o) => (
               <ListboxOption
                 key={o.value}
                 value={o}
-                className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-[selected]:text-blue"
+                className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-selected:text-blue"
               >
                 {o.label}
               </ListboxOption>
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx b/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx
index cc47c669b3..bbf36f1aa8 100644
--- a/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx
+++ b/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx
@@ -42,23 +42,23 @@ export const RoleSelector = forwardRef<HTMLButtonElement, Props>(function List(
       >
         <ListboxButton
           ref={ref}
-          className="group focus:outline outline-2 outline-blue-d1 outline-offset-[3px] flex items-center text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded disabled:bg-gray-l5 disabled:text-navy-l1"
+          className="group focus:outline outline-2 outline-blue-d1 outline-offset-[3px] flex items-center text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded-sm disabled:bg-gray-l5 disabled:text-navy-l1"
         >
           <span>{props.value.label}</span>
           <ChevronDown
             size={20}
-            className="group-data-[open]:rotate-180 transition-transform ease-in-out"
+            className="group-data-open:rotate-180 transition-transform ease-in-out"
           />
         </ListboxButton>
         <ListboxOptions
           anchor={{ to: "bottom", gap: 5, padding: 10 }}
-          className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded h-40"
+          className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded-sm h-40"
         >
           {roleOptions.map((o) => (
             <ListboxOption
               key={o.value}
               value={o}
-              className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-[selected]:text-blue"
+              className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-selected:text-blue"
             >
               {o.label}
             </ListboxOption>
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/index.tsx b/src/pages/Registration/Steps/ContactDetails/Form/index.tsx
index 3f7d37fd00..93c3a7e546 100644
--- a/src/pages/Registration/Steps/ContactDetails/Form/index.tsx
+++ b/src/pages/Registration/Steps/ContactDetails/Form/index.tsx
@@ -72,7 +72,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
           First name <Star />
         </Label>
         <Input
-          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
           placeholder="e.g. John"
           {...register("first_name")}
         />
@@ -85,7 +85,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
           Last name <Star />
         </Label>
         <Input
-          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
           placeholder="e.g. Doe"
           {...register("last_name")}
         />
@@ -98,7 +98,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
           Phone number <span className="text-navy-l1 text-sm">(optional)</span>
         </Label>
         <Input
-          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
           placeholder="000000000"
           {...register("contact_number")}
         />
@@ -111,7 +111,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
           E-mail address <Star />
         </Label>
         <Input
-          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
           {...register("registrant_id")}
           disabled
         />
@@ -122,7 +122,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
           Organization name <Star />
         </Label>
         <Input
-          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
           placeholder="Organization name"
           {...register("org_name")}
         />
@@ -142,7 +142,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
             Specify your role <Star />
           </Label>
           <Input
-            className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+            className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
             placeholder="Specify your role"
             {...register("other_role", { shouldUnregister: true })}
           />
@@ -165,7 +165,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
             Please provide additional information <Star />
           </Label>
           <Input
-            className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+            className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
             placeholder="Specify how you found us"
             {...register("other_referral_method", { shouldUnregister: true })}
           />
@@ -180,7 +180,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
             Referral Code <Star />
           </Label>
           <Input
-            className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+            className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
             placeholder="Referral Code"
             {...register("referral_code", { shouldUnregister: true })}
           />
@@ -194,7 +194,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
           Goals <Star />
         </Label>
         <Input
-          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          className="font-heading rounded-sm outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
           placeholder={`What is your goal working with ${APP_NAME}?`}
           {...register("goals")}
         />
diff --git a/src/pages/Registration/Steps/Documentation/FSA/Form/useSubmit.ts b/src/pages/Registration/Steps/Documentation/FSA/Form/useSubmit.ts
index 9581ee4df4..23efb1e9c3 100644
--- a/src/pages/Registration/Steps/Documentation/FSA/Form/useSubmit.ts
+++ b/src/pages/Registration/Steps/Documentation/FSA/Form/useSubmit.ts
@@ -41,7 +41,7 @@ export default function useSubmit({
       last_name: contact.last_name,
       role:
         contact.org_role === "other"
-          ? contact.other_role ?? ""
+          ? (contact.other_role ?? "")
           : contact.org_role,
       docs: {
         org_name: contact.org_name,
diff --git a/src/pages/Registration/Steps/Reference.tsx b/src/pages/Registration/Steps/Reference.tsx
index 0e8e1abf88..3939469394 100644
--- a/src/pages/Registration/Steps/Reference.tsx
+++ b/src/pages/Registration/Steps/Reference.tsx
@@ -21,7 +21,7 @@ export default function Reference({ id, classes = "" }: Props) {
 
         <Tooltip
           tip={
-            <Content className="p-3 text-xs bg-navy-d4 text-white max-w-xs rounded">
+            <Content className="p-3 text-xs bg-navy-d4 text-white max-w-xs rounded-sm">
               {tooltip}
               <Arrow />
             </Content>
diff --git a/src/pages/Registration/Steps/steps-layout.tsx b/src/pages/Registration/Steps/steps-layout.tsx
index ecc9ddda5e..773fefffc2 100644
--- a/src/pages/Registration/Steps/steps-layout.tsx
+++ b/src/pages/Registration/Steps/steps-layout.tsx
@@ -11,7 +11,7 @@ export default function Layout() {
   const claim = getClaim(reg);
 
   return (
-    <div className="w-full md:w-[90%] max-w-[62.5rem] [&]:has-[[data-claim='true']]:pt-0 pt-8 grid md:grid-cols-[auto_1fr] md:border border-gray-l4 rounded-none md:rounded-lg bg-white dark:bg-blue-d6">
+    <div className="w-full md:w-[90%] max-w-[62.5rem] [&]:has-data-[claim='true']:pt-0 pt-8 grid md:grid-cols-[auto_1fr] md:border border-gray-l4 rounded-none md:rounded-lg bg-white dark:bg-blue-d6">
       {claim && (
         <div
           data-claim
diff --git a/src/pages/UserDashboard/Donations/Filter/Form.tsx b/src/pages/UserDashboard/Donations/Filter/Form.tsx
index 3c6ca79eb8..9171bff6fb 100644
--- a/src/pages/UserDashboard/Donations/Filter/Form.tsx
+++ b/src/pages/UserDashboard/Donations/Filter/Form.tsx
@@ -19,7 +19,7 @@ const Form: FC<Props> = ({ onReset, submit, classes = "" }) => {
       as="form"
       onSubmit={submit}
       onReset={onReset}
-      className={`${classes} grid content-start gap-4 w-full rounded border border-gray-l4 bg-white dark:bg-blue-d5 pb-6 @5xl:pb-0 shadow-lg @5xl:shadow-sm`}
+      className={`${classes} grid content-start gap-4 w-full rounded-sm border border-gray-l4 bg-white dark:bg-blue-d5 pb-6 @5xl:pb-0 shadow-lg @-5xl:shadow-xs`}
     >
       <div className="@5xl:hidden relative text-[1.25rem] px-4 py-3 -mb-4 font-bold uppercase">
         <span className="text-blue-d1">Filters</span>
@@ -47,7 +47,7 @@ const Form: FC<Props> = ({ onReset, submit, classes = "" }) => {
         </button>
         <button
           type="submit"
-          className="btn btn-blue px-6 py-2 rounded-sm text-xs font-bold uppercase"
+          className="btn btn-blue px-6 py-2 rounded-xs text-xs font-bold uppercase"
         >
           Submit
         </button>
diff --git a/src/pages/UserDashboard/Donations/Filter/index.tsx b/src/pages/UserDashboard/Donations/Filter/index.tsx
index a7fba298b1..2f93f67588 100644
--- a/src/pages/UserDashboard/Donations/Filter/index.tsx
+++ b/src/pages/UserDashboard/Donations/Filter/index.tsx
@@ -66,7 +66,7 @@ export default function Filter({ classes = "", isDisabled }: Props) {
       <PopoverButton
         ref={buttonRef}
         disabled={isDisabled}
-        className="w-full @5xl:w-[22.3rem] flex justify-center items-center p-3 rounded bg-blue-d1 text-white @5xl:text-navy-l1 @5xl:bg-white @5xl:justify-between disabled:bg-gray @5xl:disabled:bg-gray-l3 @5xl:dark:disabled:bg-navy-d3 @5xl:border @5xl:border-gray-l4"
+        className="w-full @5xl:w-[22.3rem] flex justify-center items-center p-3 rounded-sm bg-blue-d1 text-white @5xl:text-navy-l1 @5xl:bg-white @5xl:justify-between disabled:bg-gray @5xl:disabled:bg-gray-l3 @5xl:dark:disabled:bg-navy-d3 @5xl:border @5xl:border-gray-l4"
       >
         {({ open }) => (
           <>
diff --git a/src/pages/UserDashboard/Donations/MobileTable.tsx b/src/pages/UserDashboard/Donations/MobileTable.tsx
index fad26535c7..179b4f5b54 100644
--- a/src/pages/UserDashboard/Donations/MobileTable.tsx
+++ b/src/pages/UserDashboard/Donations/MobileTable.tsx
@@ -31,7 +31,7 @@ export default function MobileTable({
   return (
     <div
       className={`${classes} border border-blue-l2 ${
-        hasMore ? "rounded-t" : "rounded"
+        hasMore ? "rounded-t" : "rounded-sm"
       }`}
     >
       <div className="grid items-center grid-cols-[auto_1fr_auto] h-12 uppercase text-xs font-bold bg-blue-l5 dark:bg-blue-d7 border-b border-blue-l2 divide-x divide-blue-l2 rounded-t">
diff --git a/src/pages/UserDashboard/Donations/PaymentResumer.tsx b/src/pages/UserDashboard/Donations/PaymentResumer.tsx
index 4cb3eadf50..f529e56de2 100644
--- a/src/pages/UserDashboard/Donations/PaymentResumer.tsx
+++ b/src/pages/UserDashboard/Donations/PaymentResumer.tsx
@@ -60,7 +60,7 @@ function QrModal(props: IQrModal) {
     <Modal
       open={true}
       onClose={() => {}}
-      classes="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden px-4 py-8"
+      classes="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden px-4 py-8"
     >
       <h4 className="text-lg text-center mb-2">{props.order_description}</h4>
 
diff --git a/src/pages/UserDashboard/Donations/StatusTabs.tsx b/src/pages/UserDashboard/Donations/StatusTabs.tsx
index 76657aadc8..21514da41a 100644
--- a/src/pages/UserDashboard/Donations/StatusTabs.tsx
+++ b/src/pages/UserDashboard/Donations/StatusTabs.tsx
@@ -11,14 +11,14 @@ export default function StatusTabs(props: Props) {
       <button
         onClick={() => props.changeStatus("final")}
         className={`relative group w-full sm:w-52 rounded-t-lg p-2.5 text-xs sm:text-sm font-bold leading-5
-        focus:outline-none border-t border-x border-gray-l4 ${
+        focus:outline-hidden border-t border-x border-gray-l4 ${
           props.status === "final"
             ? "bg-blue-l4 z-20"
             : "bg-blue-l5 hover:bg-blue-l3 -mr-4"
         }`}
       >
         <span
-          className="uppercase group-focus-visible:outline-none group-focus-visible:rounded-sm 
+          className="uppercase group-focus-visible:outline-hidden group-focus-visible:rounded-xs 
         group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-blue-d1"
         >
           Received
@@ -27,7 +27,7 @@ export default function StatusTabs(props: Props) {
       <button
         onClick={() => props.changeStatus("pending")}
         className={`relative group w-full sm:w-52 rounded-t-lg p-2.5 text-xs sm:text-sm font-bold leading-5
-        focus:outline-none border-t border-x border-gray-l4 ${
+        focus:outline-hidden border-t border-x border-gray-l4 ${
           props.status === "pending"
             ? "bg-blue-l4 z-20"
             : `bg-blue-l5 z-10 hover:bg-blue-l3 ${
@@ -36,7 +36,7 @@ export default function StatusTabs(props: Props) {
         }`}
       >
         <span
-          className="uppercase group-focus-visible:outline-none group-focus-visible:rounded-sm 
+          className="uppercase group-focus-visible:outline-hidden group-focus-visible:rounded-xs 
         group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-blue-d1"
         >
           Pending
@@ -45,14 +45,14 @@ export default function StatusTabs(props: Props) {
       <button
         onClick={() => props.changeStatus("intent")}
         className={`relative group w-full sm:w-52 rounded-t-lg p-2.5 text-xs sm:text-sm font-bold leading-5
-        focus:outline-none border-t border-x border-gray-l4 ${
+        focus:outline-hidden border-t border-x border-gray-l4 ${
           props.status === "intent"
             ? "bg-blue-l4 z-20"
             : "bg-blue-l5 hover:bg-blue-l3 -ml-4"
         }`}
       >
         <span
-          className="uppercase group-focus-visible:outline-none group-focus-visible:rounded-sm 
+          className="uppercase group-focus-visible:outline-hidden group-focus-visible:rounded-xs 
         group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-blue-d1"
         >
           Awaiting Payment
diff --git a/src/pages/UserDashboard/Donations/Table.tsx b/src/pages/UserDashboard/Donations/Table.tsx
index 3fd04d4a6f..f22c6cc00b 100644
--- a/src/pages/UserDashboard/Donations/Table.tsx
+++ b/src/pages/UserDashboard/Donations/Table.tsx
@@ -29,7 +29,7 @@ export default function Table({
 
   return (
     <table
-      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2`}
+      className={`${classes} w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2`}
     >
       <TableSection type="thead" rowClass="bg-blue-l4 divide-x divide-blue-l2">
         <Cells
diff --git a/src/pages/UserDashboard/Donations/index.tsx b/src/pages/UserDashboard/Donations/index.tsx
index df4dd5e4ba..3f0131b34f 100644
--- a/src/pages/UserDashboard/Donations/index.tsx
+++ b/src/pages/UserDashboard/Donations/index.tsx
@@ -65,7 +65,7 @@ export default function Donations() {
               id: item.id,
               receipt: item.donorDetails?.address?.country
                 ? "Yes"
-                : "No" ?? "No",
+                : ("No" ?? "No"),
             });
           }) ?? []
         }
@@ -75,13 +75,13 @@ export default function Donations() {
       >
         Export to CSV
       </CsvExporter>
-      <div className="relative flex gap-x-3 items-center border border-gray-l4 w-full bg-white dark:bg-blue-d6 rounded">
+      <div className="relative flex gap-x-3 items-center border border-gray-l4 w-full bg-white dark:bg-blue-d6 rounded-sm">
         <Search
           size={20}
           className="text-navy-d4 dark:text-navy-l2 absolute top-1/2 -translate-y-1/2 left-3"
         />
         <input
-          className="p-3 pl-10 placeholder:text-navy-l1 dark:placeholder:text-navy-l2 bg-transparent w-full outline-none disabled:bg-gray-l3 dark:disabled:bg-navy-d3"
+          className="p-3 pl-10 placeholder:text-navy-l1 dark:placeholder:text-navy-l2 bg-transparent w-full outline-hidden disabled:bg-gray-l3 dark:disabled:bg-navy-d3"
           type="text"
           placeholder="Search donations..."
           value={query}
diff --git a/src/pages/UserDashboard/EditProfile/Form.tsx b/src/pages/UserDashboard/EditProfile/Form.tsx
index 0d9b77eb64..8e88e9b951 100644
--- a/src/pages/UserDashboard/EditProfile/Form.tsx
+++ b/src/pages/UserDashboard/EditProfile/Form.tsx
@@ -65,7 +65,7 @@ export default function Component() {
         }}
         classes={{
           container: "mb-4",
-          dropzone: "w-60 aspect-[1/1] rounded-full",
+          dropzone: "w-60 aspect-1/1 rounded-full",
         }}
         error={rhf.errors.avatar?.message}
       />
diff --git a/src/pages/Widget/Configurer/Configurer.tsx b/src/pages/Widget/Configurer/Configurer.tsx
index 7dcc6ad719..9933889ea7 100644
--- a/src/pages/Widget/Configurer/Configurer.tsx
+++ b/src/pages/Widget/Configurer/Configurer.tsx
@@ -190,7 +190,7 @@ export default function Configurer({
                     type="number"
                     placeholder="0.00"
                     {...register(`increments.${idx}.value`)}
-                    className="w-full h-full font-heading outline-blue-d1 rounded text-sm font-medium bg-transparent pl-8 pr-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
+                    className="w-full h-full font-heading outline-blue-d1 rounded-sm text-sm font-medium bg-transparent pl-8 pr-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
                   />
                 </div>
                 <p className="mt-1 empty:hidden text-left text-xs text-red">
@@ -201,7 +201,7 @@ export default function Configurer({
                 <Textarea
                   rows={2}
                   {...register(`increments.${idx}.label`)}
-                  className="w-full font-heading outline-blue-d1 rounded text-sm font-medium bg-transparent px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
+                  className="w-full font-heading outline-blue-d1 rounded-sm text-sm font-medium bg-transparent px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3 disabled:pointer-events-none disabled:bg-gray-l5 disabled:text-navy-l1"
                 />
                 <p
                   data-error={!!errors.increments?.[idx]?.label?.message}
diff --git a/src/pages/Widget/Configurer/EndowmentSelector/Options.tsx b/src/pages/Widget/Configurer/EndowmentSelector/Options.tsx
index b493c83670..0ab521caba 100644
--- a/src/pages/Widget/Configurer/EndowmentSelector/Options.tsx
+++ b/src/pages/Widget/Configurer/EndowmentSelector/Options.tsx
@@ -36,7 +36,7 @@ export default function Options({ searchText }: Props) {
 
     return endows.map((endow) => (
       <ComboboxOption
-        className="data-[selected]:bg-blue-l2 cursor-pointer flex gap-2 p-2 text-sm"
+        className="data-selected:bg-blue-l2 cursor-pointer flex gap-2 p-2 text-sm"
         key={endow.name}
         value={endow}
       >
@@ -46,7 +46,7 @@ export default function Options({ searchText }: Props) {
   })(fetcher);
 
   return (
-    <ComboboxOptions className="absolute left-0 max-h-60 top-full mt-2 z-10 w-full bg-white dark:bg-blue-d6 shadow-lg rounded overflow-y-scroll scroller">
+    <ComboboxOptions className="absolute left-0 max-h-60 top-full mt-2 z-10 w-full bg-white dark:bg-blue-d6 shadow-lg rounded-sm overflow-y-scroll scroller">
       {opts}
     </ComboboxOptions>
   );
diff --git a/src/pages/Widget/Preview.tsx b/src/pages/Widget/Preview.tsx
index f2c78b1fd7..9fa3d93679 100644
--- a/src/pages/Widget/Preview.tsx
+++ b/src/pages/Widget/Preview.tsx
@@ -92,7 +92,7 @@ function Container({
           <span className="uppercase font-bold">Live form preview</span>
         </p>
       </div>
-      <div className="grid h-full overflow-y-auto scroller w-full max-h-[800px] border border-gray-l2 rounded text-navy-d4 bg-white">
+      <div className="grid h-full overflow-y-auto scroller w-full max-h-[800px] border border-gray-l2 rounded-sm text-navy-d4 bg-white">
         <div className="grow flex flex-col justify-between items-center pt-6 @xl/preview:pt-10">
           {children}
         </div>
diff --git a/src/pages/Widget/Snippet/Snippet.tsx b/src/pages/Widget/Snippet/Snippet.tsx
index 52b3fd9f51..531fba69f2 100644
--- a/src/pages/Widget/Snippet/Snippet.tsx
+++ b/src/pages/Widget/Snippet/Snippet.tsx
@@ -27,7 +27,7 @@ export default function Snippet({
       <h2 className="text-lg @4xl/widget:text-2xl text-center @4xl/widget:text-left mb-3">
         Copy / paste this code snippet:
       </h2>
-      <div className="flex items-center justify-center gap-x-4 max-w-xl px-10 rounded bg-gray-l3 dark:bg-blue-d4 @4xl/widget:mx-auto">
+      <div className="flex items-center justify-center gap-x-4 max-w-xl px-10 rounded-sm bg-gray-l3 dark:bg-blue-d4 @4xl/widget:mx-auto">
         <div className="w-full text-sm sm:text-base font-mono break-all py-4">
           {iframeURL}
         </div>
diff --git a/src/pages/donate-fund/fund-card.tsx b/src/pages/donate-fund/fund-card.tsx
index b82dcb060b..dd6e9d8f09 100644
--- a/src/pages/donate-fund/fund-card.tsx
+++ b/src/pages/donate-fund/fund-card.tsx
@@ -15,7 +15,7 @@ type Props = {
 export function FundCard({ classes = "", ...props }: Props) {
   return (
     <div
-      className={`grid @xl/fund-card:grid-cols-[3fr_2fr] gap-x-4 gap-y-6 p-4 md:bg-white rounded-lg md:border border-gray-l4 ${classes}`}
+      className={`grid @-xl/fund-card:grid-cols-[3fr_2fr] gap-x-4 gap-y-6 p-4 md:bg-white rounded-lg md:border border-gray-l4 ${classes}`}
     >
       <div className="grid grid-cols-[auto-1fr] gap-x-4 justify-start order-2 @xl/fund-card:order-1">
         <Image
diff --git a/src/pages/informational/DonorInfo/Hero.tsx b/src/pages/informational/DonorInfo/Hero.tsx
index f5f2dd72b8..a9301eac81 100644
--- a/src/pages/informational/DonorInfo/Hero.tsx
+++ b/src/pages/informational/DonorInfo/Hero.tsx
@@ -6,7 +6,7 @@ import { benefits } from "content/benefits";
 export default function Hero({ className = "" }) {
   return (
     <section
-      className={`${className} grid justify-items-center gap-y-10 @6xl:justify-items-start @6xl:grid-cols-[3fr_2fr] py-24`}
+      className={`${className} grid justify-items-center gap-y-10 @6xl:justify-items-start @-6xl:grid-cols-[3fr_2fr] py-24`}
     >
       <div className="grid content-start max-w-2xl order-2 @6xl:order-1">
         <h4 className="text-center @6xl:text-left @6xl:text-lg uppercase text-navy-d4 mb-5">
diff --git a/src/pages/informational/NonprofitInfo/BottomCta.tsx b/src/pages/informational/NonprofitInfo/BottomCta.tsx
index 9113632eb1..8dab5143b1 100644
--- a/src/pages/informational/NonprofitInfo/BottomCta.tsx
+++ b/src/pages/informational/NonprofitInfo/BottomCta.tsx
@@ -40,7 +40,7 @@ interface ICtaCard {
 export function CtaCard({ className = "", title, to, img }: ICtaCard) {
   return (
     <div
-      className={`${className} grid @md:grid-cols-2 w-full bg-gradient-to-br to-transparent p-6 rounded-xl`}
+      className={`${className} grid @md:grid-cols-2 w-full bg-linear-to-br to-transparent p-6 rounded-xl`}
     >
       <h3 className="@3xl:text-left text-white @3xl:leading-snug font-heading text-xl @sm:text-2xl mb-4 col-span-full">
         {title}
diff --git a/src/pages/informational/NonprofitInfo/FiscalSponsorship.tsx b/src/pages/informational/NonprofitInfo/FiscalSponsorship.tsx
index 9748fb9971..06c8957483 100644
--- a/src/pages/informational/NonprofitInfo/FiscalSponsorship.tsx
+++ b/src/pages/informational/NonprofitInfo/FiscalSponsorship.tsx
@@ -6,7 +6,7 @@ import fiscalsponsorshipImg from "./images/fiscal-sponsorship.webp";
 export default function FiscalSponsorship({ className = "" }) {
   return (
     <section
-      className={`${className} grid justify-items-center gap-10 @6xl:justify-items-start @6xl:grid-cols-[1fr_auto] py-24`}
+      className={`${className} grid justify-items-center gap-10 @6xl:justify-items-start @-6xl:grid-cols-[1fr_auto] py-24`}
     >
       <div className="grid max-w-2xl order-2 @6xl:order-1">
         <h4 className="mb-4 col-span-full text-lg text-blue-d1 uppercase text-center @6xl:text-left">
diff --git a/src/pages/informational/NonprofitInfo/Hero.tsx b/src/pages/informational/NonprofitInfo/Hero.tsx
index 713ba77aea..7f71781b86 100644
--- a/src/pages/informational/NonprofitInfo/Hero.tsx
+++ b/src/pages/informational/NonprofitInfo/Hero.tsx
@@ -7,7 +7,7 @@ import { benefits } from "content/benefits";
 export default function Hero({ className = "" }) {
   return (
     <section
-      className={`${className} grid justify-items-center gap-10 @6xl:justify-items-start @6xl:grid-cols-[3fr_2fr] py-24`}
+      className={`${className} grid justify-items-center gap-10 @6xl:justify-items-start @-6xl:grid-cols-[3fr_2fr] py-24`}
     >
       <div className="max-w-2xl order-2 @6xl:order-1">
         <h4 className="text-center @6xl:text-left @6xl:text-lg uppercase text-navy-d4 mb-5">
diff --git a/src/pages/informational/NonprofitInfo/NonprofitInfo.tsx b/src/pages/informational/NonprofitInfo/NonprofitInfo.tsx
index 02702969ec..b180ff35da 100644
--- a/src/pages/informational/NonprofitInfo/NonprofitInfo.tsx
+++ b/src/pages/informational/NonprofitInfo/NonprofitInfo.tsx
@@ -14,20 +14,20 @@ import Investment from "./investment";
 export default function NonprofitInfo() {
   return (
     <main className="w-full grid content-start pb-16 @container">
-      <div className="bg-gradient-to-br from-50% from-transparent to-peach/50">
+      <div className="bg-linear-to-br from-50% from-transparent to-peach/50">
         <Hero className="padded-container px-10 bg-transparent" />
       </div>
-      <div className="bg-gradient-to-bl via-transparent via-50% from-peach/50 to-lilac/50">
+      <div className="bg-linear-to-bl via-transparent via-50% from-peach/50 to-lilac/50">
         <FellowNonProfits className="my-20 md:my-44" />
       </div>
-      <div className="bg-gradient-to-br from-lilac/50 via-transparent via-50% to-lilac/50">
+      <div className="bg-linear-to-br from-lilac/50 via-transparent via-50% to-lilac/50">
         <DonationFormInfo className="mt-28 padded-container" />
       </div>
 
-      <div className="bg-gradient-to-bl via-transparent via-50% from-lilac/50 to-transparent">
+      <div className="bg-linear-to-bl via-transparent via-50% from-lilac/50 to-transparent">
         <WhyBG className="mt-56 padded-container" />
       </div>
-      <div className="bg-gradient-to-bl from-50% from-transparent to-peach/50">
+      <div className="bg-linear-to-bl from-50% from-transparent to-peach/50">
         <Benefits
           className="mt-56 padded-container px-10"
           subheading="Simplify your fundraising"
@@ -40,25 +40,25 @@ export default function NonprofitInfo() {
         />
       </div>
 
-      <div className="bg-gradient-to-br via-transparent via-50% from-peach/50 to-transparent">
+      <div className="bg-linear-to-br via-transparent via-50% from-peach/50 to-transparent">
         <FiscalSponsorship className="@3xl:mt-56 padded-container" />
       </div>
-      <div className="bg-gradient-to-b from-transparent via-lilac/20 to-transparent">
+      <div className="bg-linear-to-b from-transparent via-lilac/20 to-transparent">
         <Investment className="mt-56 padded-container" />
       </div>
 
-      <div className="bg-gradient-to-tr from-lilac/50 from-5% via-20% via-transparent to-transparent">
+      <div className="bg-linear-to-tr from-lilac/50 from-5% via-20% via-transparent to-transparent">
         <Features classes="padded-container mt-56" />
       </div>
 
-      <div className="bg-gradient-to-br from-lilac/50 from-5% via-20% via-transparent to-transparent">
+      <div className="bg-linear-to-br from-lilac/50 from-5% via-20% via-transparent to-transparent">
         <Testimonials className="mt-80 padded-container" />
       </div>
 
-      <div className="bg-gradient-to-br from-transparent via-transparent to-lilac/50">
+      <div className="bg-linear-to-br from-transparent via-transparent to-lilac/50">
         <BottomCta className="mt-48 padded-container" />
       </div>
-      <div className="bg-gradient-to-bl from-lilac/50 via-transparent to-transparent">
+      <div className="bg-linear-to-bl from-lilac/50 via-transparent to-transparent">
         <FAQ classes="mt-48 padded-container" />
       </div>
     </main>
diff --git a/src/pages/informational/NonprofitInfo/Testimonials.tsx b/src/pages/informational/NonprofitInfo/Testimonials.tsx
index f31259af19..bd4bc1827c 100644
--- a/src/pages/informational/NonprofitInfo/Testimonials.tsx
+++ b/src/pages/informational/NonprofitInfo/Testimonials.tsx
@@ -7,7 +7,7 @@ import {
 export default function Testimonials({ className = "" }) {
   return (
     <div
-      className={`${className} grid @3xl:grid-cols-[2fr_3fr] gap-x-4 relative`}
+      className={`${className} grid @-3xl:grid-cols-[2fr_3fr] gap-x-4 relative`}
     >
       <div className="@3xl:mb-40 @3xl:-mt-24 py-4 @3xl:py-0 @3xl:sticky top-16 @3xl:top-32 bottom-32 self-start z-10">
         <img
@@ -33,7 +33,7 @@ export default function Testimonials({ className = "" }) {
 
 const Testimonial = (props: TTestimonial) => {
   return (
-    <div className="grid @lg:grid-cols-[auto_1fr] border border-gray-l4 rounded-3xl p-9 gap-x-8">
+    <div className="grid @-lg:grid-cols-[auto_1fr] border border-gray-l4 rounded-3xl p-9 gap-x-8">
       <img
         src={props.reviewer_org_logo}
         alt="organization logo"
diff --git a/src/pages/informational/NonprofitInfo/faq.tsx b/src/pages/informational/NonprofitInfo/faq.tsx
index a1e2ac6efc..1713c9dad3 100644
--- a/src/pages/informational/NonprofitInfo/faq.tsx
+++ b/src/pages/informational/NonprofitInfo/faq.tsx
@@ -18,18 +18,18 @@ export default function FAQ({ classes = "" }) {
       {faqs.map((faq) => (
         <Disclosure as="div" key={faq.id} className="p-4">
           <DisclosureButton className="group flex items-center justify-between gap-2 w-full">
-            <span className="text-left group-data-[open]:font-semibold">
+            <span className="text-left group-data-open:font-semibold">
               {faq.question}
             </span>
             <DrawerIcon
               size={18}
               isOpen={false}
-              className="shrink-0 group-data-[open]:rotate-180"
+              className="shrink-0 group-data-open:rotate-180"
             />
           </DisclosureButton>
           <DisclosurePanel
             as="div"
-            className="grid gap-3 text-navy-l1 data-[open]:mt-4"
+            className="grid gap-3 text-navy-l1 data-open:mt-4"
           >
             {faq.paragraphs.map((p, idx) => (
               <Fragment key={idx}>{p}</Fragment>
diff --git a/src/pages/informational/WpPlugin.tsx b/src/pages/informational/WpPlugin.tsx
index 05f9764854..448f8bb99b 100644
--- a/src/pages/informational/WpPlugin.tsx
+++ b/src/pages/informational/WpPlugin.tsx
@@ -51,7 +51,7 @@ export default function WpPlugin() {
           is the number that was assigned to your nonprofit when you signed up
           with {APP_NAME} and is unique to it (ex. 121).
         </div>
-        <div className="mx-auto flex max-w-md gap-4 bg-blue-l2 p-4 my-4 rounded">
+        <div className="mx-auto flex max-w-md gap-4 bg-blue-l2 p-4 my-4 rounded-sm">
           <Image
             alt="Laira mascot waving"
             src={laira.waiving}
@@ -78,7 +78,7 @@ export default function WpPlugin() {
           may be passed to further customize and configure your Donation Form
           settings and appearance from the default:
           <div className="overflow-x-auto">
-            <table className="w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2">
+            <table className="w-full text-sm rounded-sm border border-separate border-spacing-0 border-blue-l2">
               <TableSection
                 type="thead"
                 rowClass="bg-blue-l4 divide-x divide-blue-l2"
diff --git a/src/pages/informational/about/bottom-cta.tsx b/src/pages/informational/about/bottom-cta.tsx
index 988d15ae91..6802f739ba 100644
--- a/src/pages/informational/about/bottom-cta.tsx
+++ b/src/pages/informational/about/bottom-cta.tsx
@@ -7,7 +7,7 @@ import { appRoutes } from "constants/routes";
 export function BottomCta({ className = "" }) {
   return (
     <div
-      className={`${className} grid md:grid-cols-[3fr_1fr] bg-gradient-to-br from-blue-d1 to-white rounded-3xl md:rounded-4xl px-10 py-12 md:px-16 md:py-[4.5rem]`}
+      className={`${className} grid md:grid-cols-[3fr_1fr] bg-linear-to-br from-blue-d1 to-white rounded-3xl md:rounded-4xl px-10 py-12 md:px-16 md:py-[4.5rem]`}
     >
       <div className="order-2 md:order-1">
         <h4 className="text-center md:text-left uppercase [28rem]:text-lg text-white leading-normal mb-6">
diff --git a/src/pages/informational/about/index.tsx b/src/pages/informational/about/index.tsx
index 8ea26aa09f..e723d56346 100644
--- a/src/pages/informational/about/index.tsx
+++ b/src/pages/informational/about/index.tsx
@@ -11,24 +11,24 @@ export const meta: MetaFunction = () => metas({ title: "About us" });
 export default function About() {
   return (
     <main className="w-full grid content-start pb-40 @container">
-      <div className="bg-gradient-to-br from-50% from-transparent to-peach/50">
+      <div className="bg-linear-to-br from-50% from-transparent to-peach/50">
         <Hero classes="padded-container" />
       </div>
-      <div className="bg-gradient-to-bl via-transparent via-50% from-peach/50 to-lilac/50">
+      <div className="bg-linear-to-bl via-transparent via-50% from-peach/50 to-lilac/50">
         <Section2 className="mt-28 padded-container" />
       </div>
-      <div className="bg-gradient-to-br from-lilac/50 via-transparent via-50% to-lilac/50">
+      <div className="bg-linear-to-br from-lilac/50 via-transparent via-50% to-lilac/50">
         <Manifesto className="mt-56 padded-container" />
       </div>
 
-      <div className="bg-gradient-to-bl via-transparent via-50% from-lilac/50 to-transparent">
+      <div className="bg-linear-to-bl via-transparent via-50% from-lilac/50 to-transparent">
         <Quote className="padded-container" />
       </div>
-      <div className="bg-gradient-to-bl from-50% from-transparent to-peach/50">
+      <div className="bg-linear-to-bl from-50% from-transparent to-peach/50">
         <Team classes="padded-container mt-20 sm:mt-56" />
       </div>
 
-      <div className="bg-gradient-to-br via-transparent via-50% from-peach/50 to-transparent">
+      <div className="bg-linear-to-br via-transparent via-50% from-peach/50 to-transparent">
         <BottomCta className="mt-20 sm:mt-56 padded-container mx-10" />
       </div>
     </main>
diff --git a/src/styles/components.css b/src/styles/components.css
index 9a3ecf70ca..4392b90d27 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1,224 +1,216 @@
 /** Layer 1 components */
-@layer components {
-  .rich-text-toolbar .ql-toolbar .ql-stroke {
-    @apply fill-none stroke-gray-d2 dark:stroke-white;
-  }
-  
-  .rich-text-toolbar[aria-invalid="true"] {
-    @apply border-red;
-  }
 
-  .date-input::-webkit-calendar-picker-indicator {
+@utility date-input {
+  &::-webkit-calendar-picker-indicator {
     @apply absolute w-full opacity-0 cursor-pointer;
   }
-
-  .scroller::-webkit-scrollbar {
+}
+@utility scroller {
+  &::-webkit-scrollbar {
     @apply w-1;
   }
-  .scroller::-webkit-scrollbar-thumb {
-    @apply bg-[--accent-primary];
+  &::-webkit-scrollbar-thumb {
+    @apply bg-(--accent-primary);
   }
-  .scroller::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     @apply bg-gray-l3 dark:bg-navy;
   }
-
-  .padded-container {
-    @apply xl:container xl:mx-auto px-5;
-  }
-
+}
+@utility padded-container {
+  @apply xl:container xl:mx-auto px-5;
+}
+@utility btn {
   /** applicable to button and <a/> */
-  .btn {
-    @apply flex items-center justify-center uppercase font-bold font-heading p-3 rounded focus:outline-none focus-visible:ring-2;
-  }
-
-  .field-error {
-    @apply absolute -bottom-5 right-0 text-xs text-right text-red dark:text-red-l2;
-  }
-  .field-input {
-    @apply w-full font-heading rounded text-sm font-medium bg-transparent px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3;
+  @apply flex items-center justify-center uppercase font-bold font-heading p-3 rounded-sm focus:outline-hidden focus-visible:ring-2;
+}
+@utility field-error {
+  @apply absolute -bottom-5 right-0 text-xs text-right text-red dark:text-red-l2;
+}
+@utility field-input {
+  @apply w-full font-heading rounded-sm text-sm font-medium bg-transparent px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3;
+  &:disabled {
+    @apply pointer-events-none bg-gray-l5 text-navy-l1;
   }
-  .field-input:disabled,
-  .field-input[aria-disabled="true"] {
+  &[aria-disabled="true"] {
     @apply pointer-events-none bg-gray-l5 text-navy-l1;
   }
-  .field-input:enabled:focus {
-    @apply outline-none ring-2 ring-offset-1 ring-blue-d1;
+  &:enabled:focus {
+    @apply outline-hidden ring-2 ring-offset-1 ring-blue-d1;
   }
 
-  .field-input[aria-invalid="true"] {
+  &[aria-invalid="true"] {
     @apply border-red;
   }
-
-  .label {
-    @apply block text-sm after:ml-1;
-  }
-  .label[data-required="true"] {
+}
+@utility label {
+  @apply block text-sm after:ml-1;
+  &[data-required="true"] {
     @apply after:content-['*'] after:text-red;
   }
-  .label[data-required="false"] {
-    @apply after:content-['(optional)'] after:text-navy-l1  after:dark:text-navy-l2 after:font-normal after:text-[0.8em];
-  }
-
-  .radio {
-    @apply flex items-center gap-4 cursor-pointer peer-disabled:cursor-default data-[required=true]:after:ml-1 data-[required=true]:after:content-['*'] data-[required=true]:after:text-red;
-  }
-  .radio > input {
-    @apply cursor-pointer appearance-none h-4 relative aspect-square border rounded-full before:content-[''] before:h-2.5 before:aspect-square before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full checked:before:bg-blue-d1 disabled:checked:before:bg-gray-l2 disabled:checked:before:dark:bg-navy focus:outline-none focus:ring-1 focus:ring-blue-d1;
+  &[data-required="false"] {
+    @apply after:content-['(optional)'] after:text-navy-l1  dark:after:text-navy-l2 after:font-normal after:text-[0.8em];
   }
-
-  .checkbox {
-    @apply accent-blue-d1 size-4 shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-d1 disabled:accent-gray-l5 ring-offset-1;
+}
+@utility radio {
+  @apply flex items-center gap-4 cursor-pointer peer-disabled:cursor-default data-[required=true]:after:ml-1 data-[required=true]:after:content-['*'] data-[required=true]:after:text-red;
+  & > input {
+    @apply cursor-pointer appearance-none h-4 relative aspect-square border rounded-full before:content-[''] before:h-2.5 before:aspect-square before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full checked:before:bg-blue-d1 disabled:checked:before:bg-gray-l2 dark:disabled:checked:before:bg-navy focus:outline-hidden focus:ring-1 focus:ring-blue-d1;
   }
 }
+@utility checkbox {
+  @apply accent-blue-d1 size-4 shrink-0 focus:outline-hidden focus:ring-2 focus:ring-blue-d1 disabled:accent-gray-l5 ring-offset-1;
+}
 
 /** Layer 2 components */
-@layer components {
-  .btn-outline {
-    @apply btn disabled:bg-gray-l3 aria-disabled:bg-gray-l3 aria-disabled:dark:bg-navy disabled:dark:bg-navy border border-gray-l3 dark:border-navy enabled:hover:border-gray-l2 enabled:hover:dark:border-blue-d2;
-  }
-  .btn-outline.pending{
-    @apply bg-gray-l4 pointer-events-none
-  }
-  .btn-outline-2 {
-    @apply rounded-lg normal-case text-sm border border-gray-l4 disabled:bg-gray-l3 aria-disabled:bg-gray-l3 enabled:hover:border-gray-l2 enabled:active:border-gray focus-visible:outline focus-visible:outline-2;
-  }
-  .btn-blue {
-    @apply btn bg-blue-d1 disabled:bg-gray aria-disabled:bg-gray text-white enabled:hover:bg-blue active:bg-blue-d2 focus-visible:ring-blue-l2 hover:bg-blue-d2;
-  }
-  .btn-blue.pending {
-    @apply bg-gray pointer-events-none
-  }
-  .btn-outline-blue {
-    @apply btn disabled:bg-gray-l3 aria-disabled:bg-gray-l3 text-blue-d1 border border-blue-d1 enabled:hover:border-blue;
-  }
-  .btn-red {
-    @apply btn bg-red disabled:bg-gray aria-disabled:bg-gray text-white enabled:hover:bg-red-l1 active:bg-red-d1 focus-visible:ring-red-l4;
-  }
-  .btn-red.pending {
-    @apply bg-gray pointer-events-none
+@utility btn-outline {
+  @apply btn disabled:bg-gray-l3 aria-disabled:bg-gray-l3 dark:aria-disabled:bg-navy dark:disabled:bg-navy border border-gray-l3 dark:border-navy enabled:hover:border-gray-l2 dark:enabled:hover:border-blue-d2;
+  &.pending {
+    @apply bg-gray-l4 pointer-events-none;
   }
-  .btn-green {
-    @apply btn bg-green disabled:bg-gray aria-disabled:bg-gray text-white enabled:hover:bg-green-l1 active:bg-green-d1 focus-visible:ring-green-l4;
-  }
-  .btn-green.pending {
-    @apply bg-gray pointer-events-none
+}
+
+@utility btn-outline-2 {
+  @apply rounded-lg normal-case text-sm border border-gray-l4 disabled:bg-gray-l3 aria-disabled:bg-gray-l3 enabled:hover:border-gray-l2 enabled:active:border-gray focus-visible:outline focus-visible:outline-2;
+}
+@utility btn-blue {
+  @apply btn bg-blue-d1 disabled:bg-gray aria-disabled:bg-gray text-white enabled:hover:bg-blue active:bg-blue-d2 focus-visible:ring-blue-l2 hover:bg-blue-d2;
+  &.pending {
+    @apply bg-gray pointer-events-none;
   }
-  .overlay {
-    @apply before:content-[''] before:absolute before:inset-0 before:bg-blue/90 before:dark:bg-blue-d3/90;
+}
+@utility btn-outline-blue {
+  @apply btn disabled:bg-gray-l3 aria-disabled:bg-gray-l3 text-blue-d1 border border-blue-d1 enabled:hover:border-blue;
+}
+@utility btn-red {
+  @apply btn bg-red disabled:bg-gray aria-disabled:bg-gray text-white enabled:hover:bg-red-l1 active:bg-red-d1 focus-visible:ring-red-l4;
+  &.pending {
+    @apply bg-gray pointer-events-none;
   }
-
-  .field-container {
-    @apply rounded border border-gray-l3;
+}
+@utility btn-green {
+  @apply btn bg-green disabled:bg-gray aria-disabled:bg-gray text-white enabled:hover:bg-green-l1 active:bg-green-d1 focus-visible:ring-green-l4;
+  &.pending {
+    @apply bg-gray pointer-events-none;
   }
-  .field-container:has(:focus) {
+}
+@utility overlay {
+  @apply before:content-[''] before:absolute before:inset-0 before:bg-blue/90 dark:before:bg-blue-d3/90;
+}
+@utility field-container {
+  @apply rounded-sm border border-gray-l3;
+  &:has(:focus) {
     @apply ring-2 ring-offset-1 ring-blue-d1;
   }
-  .field-container:has(:disabled),
-  .field-container:has([aria-disabled="true"]) {
+  &:has(:disabled) {
     @apply text-navy-l1 bg-gray-l5 pointer-events-none;
   }
-  .field-container:has([data-error]),
-  .field-container:has([aria-invalid="true"]) {
+  &:has([aria-disabled="true"]) {
+    @apply text-navy-l1 bg-gray-l5 pointer-events-none;
+  }
+  &:has([data-error]) {
     @apply border-red;
   }
-  .field-container > input {
-    @apply bg-transparent focus:outline-none w-full;
+  &:has([aria-invalid="true"]) {
+    @apply border-red;
   }
-
-  .field-input-donate {
-    @apply rounded-lg text-base py-[13px] px-5 font-semibold placeholder:font-medium;
+  & > input {
+    @apply bg-transparent focus:outline-hidden w-full;
   }
-  .field-input-donate:enabled:focus {
+}
+@utility field-input-donate {
+  @apply rounded-lg text-base py-[13px] px-5 font-semibold placeholder:font-medium;
+  &:enabled:focus {
     @apply ring-[color:var(--accent-primary)];
   }
+}
+@utility field {
+  @apply relative;
 
-  .field {
-    @apply relative;
+  & > textarea {
+    @apply field-input;
   }
 
-  .field > textarea,
-  .field > input {
+  & > input {
     @apply field-input;
   }
 
-  .field > label {
+  & > label {
     @apply mb-2;
   }
-  .field [data-error] {
+  & [data-error] {
     @apply field-error;
   }
-
-  .check-field {
-    @apply grid grid-cols-[auto_1fr] justify-items-start gap-x-3 items-center;
-  }
-  .check-field > label {
+}
+@utility check-field {
+  @apply grid grid-cols-[auto_1fr] justify-items-start gap-x-3 items-center;
+  & > label {
     @apply cursor-pointer peer-disabled:cursor-default data-[required=true]:after:ml-1 data-[required=true]:after:content-['*'] data-[required=true]:after:text-red;
   }
-  .check-field > input {
+  & > input {
     @apply checkbox;
   }
-  .check-field > [data-error] {
+  & > [data-error] {
     @apply col-span-full text-xs text-red dark:text-red-l2;
   }
 }
 
 /** page components */
-@layer components {
-  .btn-outline-filled {
-    @apply btn-outline bg-blue-l5 dark:bg-blue-d4 enabled:hover:bg-blue-l4 dark:enabled:hover:bg-blue-d3 disabled:bg-gray-l4 aria-disabled:bg-gray-l4;
-  }
-  .btn-outline-gray {
-    @apply btn-outline bg-gray-l5 enabled:hover:bg-gray-l6 active:bg-gray-l4 dark:bg-navy-d3 dark:enabled:hover:bg-navy dark:active:bg-navy-d4;
-  }
-  .btn-gift {
-    @apply text-base sm:text-sm;
-  }
-  .btn-donate {
-    @apply rounded-full normal-case;
-  }
-
-  .btn-reg {
-    @apply text-sm;
-  }
-
-  .field-gift > input {
+@utility btn-outline-filled {
+  @apply btn-outline bg-blue-l5 dark:bg-blue-d4 enabled:hover:bg-blue-l4 dark:enabled:hover:bg-blue-d3 disabled:bg-gray-l4 aria-disabled:bg-gray-l4;
+}
+@utility btn-outline-gray {
+  @apply btn-outline bg-gray-l5 enabled:hover:bg-gray-l6 active:bg-gray-l4 dark:bg-navy-d3 dark:enabled:hover:bg-navy dark:active:bg-navy-d4;
+}
+@utility btn-gift {
+  @apply text-base sm:text-sm;
+}
+@utility btn-donate {
+  @apply rounded-full normal-case;
+}
+@utility btn-reg {
+  @apply text-sm;
+}
+@utility field-gift {
+  & > input {
     @apply bg-white dark:bg-blue-d6;
   }
-
-  .field-input-admin {
-    @apply bg-gray-l6 dark:bg-blue-d5;
-  }
-
-  .field-kyc > input {
+}
+@utility field-input-admin {
+  @apply bg-gray-l6 dark:bg-blue-d5;
+}
+@utility field-kyc {
+  & > input {
     @apply bg-gray-l6 dark:bg-blue-d6;
   }
-
-  .field-admin > textarea,
-  .field-admin > input {
+}
+@utility field-admin {
+  & > textarea {
     @apply bg-gray-l6 dark:bg-blue-d5;
   }
 
-  .field-donate > input {
+  & > input {
+    @apply bg-gray-l6 dark:bg-blue-d5;
+  }
+}
+@utility field-donate {
+  & > input {
     @apply field-input-donate;
   }
-  .field-donate > label {
+  & > label {
     @apply font-heading font-semibold text-base;
   }
-
-  .field-container-donate {
-    @apply text-base font-semibold rounded-lg;
-  }
-  .field-container-donate > input {
+}
+@utility field-container-donate {
+  @apply text-base font-semibold rounded-lg;
+  & > input {
     @apply py-3.5 px-5 text-base placeholder:font-medium;
   }
-  .field-container-donate:has(:focus) {
+  &:has(:focus) {
     @apply ring-[color:var(--accent-primary)];
   }
-
-  .field-admin-sec > input {
+}
+@utility field-admin-sec {
+  & > input {
     @apply border-0 border-b rounded-none bg-transparent p-0 pb-2;
   }
 }
-
-
-
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 92ad5e49ec..619cf6dc45 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -1,31 +1,37 @@
-@layer utilities {
-  .fixed-center {
-    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
-  }
-  .absolute-center {
-    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
-  }
-  .flex-center {
-    @apply flex items-center justify-center;
-  }
+@utility fixed-center {
+  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
 
-  .box-delay-1 {
-    animation-delay: 300ms;
-  }
-  .box-delay-2 {
-    animation-delay: 600ms;
-  }
+@utility absolute-center {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+@utility flex-center {
+  @apply flex items-center justify-center;
+}
 
+@utility box-delay-1 {
+  animation-delay: 300ms;
+}
+
+@utility box-delay-2 {
+  animation-delay: 600ms;
+}
+
+@utility text-field {
   /** remove arrows from input type=number*/
-  .text-field {
-    -moz-appearance: textfield;
+  -moz-appearance: textfield;
+  &:hover {
+    -moz-appearance: number-input;
   }
-  .text-field:hover,
-  .text-field:focus {
+  &:focus {
     -moz-appearance: number-input;
   }
-  .text-field::-webkit-inner-spin-button,
-  .text-field::-webkit-outer-spin-button {
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
diff --git a/src/types/components.ts b/src/types/components.ts
index 0a7859be30..c350c06f8e 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -2,7 +2,7 @@ import type { Token } from "@better-giving/assets/tokens";
 import { donateMethodId } from "@better-giving/endowment/schema";
 //token selector
 import * as v from "valibot";
-export { type Token as TokenV2 } from "@better-giving/assets/tokens";
+export type { Token as TokenV2 } from "@better-giving/assets/tokens";
 
 export interface TokenWithDetails extends Token {
   amount: string;
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 80cc1a4f72..0000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const colors = require("tailwindcss/colors");
-module.exports = {
-  darkMode: "class",
-  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx,html}"],
-  theme: {
-    colors: {
-      transparent: colors.transparent,
-      current: colors.current,
-      inherit: colors.inherit,
-
-      blue: {
-        d7: "#0B1A2A",
-        d6: "#112840",
-        d5: "#1a3f60",
-        d4: "#194b73",
-        d3: "#1a578a",
-        d2: "#1e6dab",
-        d1: "#2D89C8", //blue-400
-        DEFAULT: "#54a5dc",
-        l1: "#8fc4ea",
-        l2: "#c4def3",
-        l3: "#B8D9EF",
-        l4: "#E6F1F9", //blue-100, #EAF3FA
-        l5: "#F7FAFD", //blue-50
-      },
-
-      green: {
-        d4: "#092a17",
-        d3: "#1d5e35",
-        d2: "#1f763e",
-        d1: "#23964c",
-        DEFAULT: "#31b861", //green-500
-        l1: "#57d182",
-        l2: "#8fe6ae",
-        l3: "#c0f2d1",
-        l4: "#dff9e8",
-        l5: "#f1fcf4",
-      },
-
-      navy: {
-        d4: "#183244", //navy-blue-1000
-        d3: "#1f3648",
-        d2: "#273f52",
-        d1: "#314c5d",
-        DEFAULT: "#3c5667",
-        l1: "#496273", //navy-blue-400, #1D3C51/80
-        l2: "#5b6f7f",
-        l3: "#72828D", //navy-blue-200
-        l4: "#9dabb5",
-        l5: "#d4dee6",
-      },
-
-      red: {
-        d4: "#9d1717",
-        d3: "#c81818", //red-100, #C52828
-        d2: "#e22020",
-        d1: "#e22020",
-        DEFAULT: "#f53e3e",
-        l1: "#fc6d6d",
-        l2: "#ffa2a2",
-        l3: "#ffc8c8",
-        l4: "#ffe1e1",
-        l5: "#fef2f2",
-      },
-
-      black: "#000101",
-      gray: {
-        d3: "#363636",
-        d2: "#545454",
-        d1: "#676767",
-        DEFAULT: "#999999",
-        l1: "#ADADAD",
-        l2: "#C8C8C8",
-        l3: "#D7D7D7", //white-600
-        l4: "#E7E7E7", //white-500
-        l5: "#F9FBFA", //white-200
-        l6: "#FFFFFF",
-      },
-      amber: {
-        d2: "#b45309",
-        d1: "#d97706",
-        DEFAULT: "#f59e0b",
-        l3: "#fcd34d",
-        l4: "#fef3c7",
-        l5: "#fffbeb",
-      },
-      white: "#FFFFFF",
-
-      //standard sdg colors
-      sdg1: "#e5233d",
-      sdg2: "#dda73a",
-      sdg3: "#4ca146",
-      sdg4: "#c5192d",
-      sdg5: "#ef402c",
-      sdg6: "#27bfe6",
-      sdg7: "#fbc412",
-      sdg8: "#a31c44",
-      sdg9: "#f26a2d",
-      sdg10: "#e01483",
-      sdg11: "#f89d2a",
-      sdg12: "#bf8d2c",
-      sdg13: "#407f46",
-      sdg14: "#1f97d4",
-      sdg15: "#59ba48",
-      sdg16: "#126a9f",
-      sdg17: "#13496b",
-
-      peach: "#fdE3d8",
-      lilac: "#eae2fc",
-    },
-
-    extend: {
-      fontSize: {
-        "2xs": "0.625rem",
-        "3xs": ["0.56rem", "0.7rem"],
-        "4.5xl": "2.625rem",
-      },
-      fontFamily: {
-        heading: ["Quicksand Variable", "serif"],
-        body: ["DM Sans Variable", "sans-serif"],
-        gochi: ["Gochi Hand", "cursive"],
-      },
-      width: {
-        "3/4": "75%",
-      },
-      keyframes: {
-        "translate-rtl": {
-          "0%": { transform: "translateX(0)" },
-          "100%": { transform: "translateX(-100%)" },
-        },
-      },
-      borderRadius: {
-        /** 32px */
-        "4xl": "2rem",
-        /** 56px */
-        "5xl": "3.5rem",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/container-queries"),
-    require("@tailwindcss/typography"),
-  ],
-};
diff --git a/vite.config.js b/vite.config.js
index 81d8b3fc9f..3a70d05ece 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { vitePlugin as remix } from "@remix-run/dev";
 import { vercelPreset } from "@vercel/remix/vite";
+import tailwind from "@tailwindcss/vite";
 
 const rmx = remix({
   presets: [vercelPreset()],
@@ -203,7 +204,11 @@ export default defineConfig({
   base: "/",
   build: { outDir: "build", target: "es2022" },
   server: { port: 4200 },
-  plugins: [process.env.NODE_ENV === "test" ? undefined : rmx, tsconfigPaths()],
+  plugins: [
+    process.env.NODE_ENV === "test" ? undefined : rmx,
+    tsconfigPaths(),
+    tailwind(),
+  ],
   test: {
     setupFiles: ["./src/setupTests.ts"],
     environment: "jsdom",
diff --git a/yarn.lock b/yarn.lock
index 1caf7d5a22..bfd1c06aa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,13 +12,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@alloc/quick-lru@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "@alloc/quick-lru@npm:5.2.0"
-  checksum: 10/bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -943,18 +936,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@biomejs/biome@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/biome@npm:1.8.1"
-  dependencies:
-    "@biomejs/cli-darwin-arm64": "npm:1.8.1"
-    "@biomejs/cli-darwin-x64": "npm:1.8.1"
-    "@biomejs/cli-linux-arm64": "npm:1.8.1"
-    "@biomejs/cli-linux-arm64-musl": "npm:1.8.1"
-    "@biomejs/cli-linux-x64": "npm:1.8.1"
-    "@biomejs/cli-linux-x64-musl": "npm:1.8.1"
-    "@biomejs/cli-win32-arm64": "npm:1.8.1"
-    "@biomejs/cli-win32-x64": "npm:1.8.1"
+"@biomejs/biome@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/biome@npm:1.9.4"
+  dependencies:
+    "@biomejs/cli-darwin-arm64": "npm:1.9.4"
+    "@biomejs/cli-darwin-x64": "npm:1.9.4"
+    "@biomejs/cli-linux-arm64": "npm:1.9.4"
+    "@biomejs/cli-linux-arm64-musl": "npm:1.9.4"
+    "@biomejs/cli-linux-x64": "npm:1.9.4"
+    "@biomejs/cli-linux-x64-musl": "npm:1.9.4"
+    "@biomejs/cli-win32-arm64": "npm:1.9.4"
+    "@biomejs/cli-win32-x64": "npm:1.9.4"
   dependenciesMeta:
     "@biomejs/cli-darwin-arm64":
       optional: true
@@ -974,62 +967,62 @@ __metadata:
       optional: true
   bin:
     biome: bin/biome
-  checksum: 10/93732980dd65b6bca772e5b7980f46f061ca10e5bcb22c0b24b1d9e9018445bd19cd565e16302e5588c4bf46c2a8a6c394a62650b42d129da281385ebba9bb1c
+  checksum: 10/bd8ff8fb4dc0581bd60a9b9ac28d0cd03ba17c6a1de2ab6228b7fda582079594ceee774f47e41aac2fc6d35de1637def2e32ef2e58fa24e22d1b24ef9ee5cefa
   languageName: node
   linkType: hard
 
-"@biomejs/cli-darwin-arm64@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-darwin-arm64@npm:1.8.1"
+"@biomejs/cli-darwin-arm64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-darwin-arm64@npm:1.9.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@biomejs/cli-darwin-x64@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-darwin-x64@npm:1.8.1"
+"@biomejs/cli-darwin-x64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-darwin-x64@npm:1.9.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-arm64-musl@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-linux-arm64-musl@npm:1.8.1"
+"@biomejs/cli-linux-arm64-musl@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-arm64-musl@npm:1.9.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-arm64@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-linux-arm64@npm:1.8.1"
+"@biomejs/cli-linux-arm64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-arm64@npm:1.9.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-x64-musl@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-linux-x64-musl@npm:1.8.1"
+"@biomejs/cli-linux-x64-musl@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-x64-musl@npm:1.9.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-x64@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-linux-x64@npm:1.8.1"
+"@biomejs/cli-linux-x64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-x64@npm:1.9.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@biomejs/cli-win32-arm64@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-win32-arm64@npm:1.8.1"
+"@biomejs/cli-win32-arm64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-win32-arm64@npm:1.9.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@biomejs/cli-win32-x64@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@biomejs/cli-win32-x64@npm:1.8.1"
+"@biomejs/cli-win32-x64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-win32-x64@npm:1.9.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -1084,6 +1077,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/aix-ppc64@npm:0.20.2"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/aix-ppc64@npm:0.21.5"
@@ -1105,6 +1105,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-arm64@npm:0.20.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-arm64@npm:0.21.5"
@@ -1126,6 +1133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-arm@npm:0.20.2"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-arm@npm:0.21.5"
@@ -1147,6 +1161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-x64@npm:0.20.2"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-x64@npm:0.21.5"
@@ -1168,6 +1189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/darwin-arm64@npm:0.20.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/darwin-arm64@npm:0.21.5"
@@ -1189,6 +1217,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/darwin-x64@npm:0.20.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/darwin-x64@npm:0.21.5"
@@ -1210,6 +1245,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/freebsd-arm64@npm:0.20.2"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
@@ -1231,6 +1273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/freebsd-x64@npm:0.20.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/freebsd-x64@npm:0.21.5"
@@ -1252,6 +1301,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-arm64@npm:0.20.2"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-arm64@npm:0.21.5"
@@ -1273,6 +1329,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-arm@npm:0.20.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-arm@npm:0.21.5"
@@ -1294,6 +1357,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-ia32@npm:0.20.2"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-ia32@npm:0.21.5"
@@ -1315,6 +1385,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-loong64@npm:0.20.2"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-loong64@npm:0.21.5"
@@ -1336,6 +1413,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-mips64el@npm:0.20.2"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-mips64el@npm:0.21.5"
@@ -1357,6 +1441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-ppc64@npm:0.20.2"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-ppc64@npm:0.21.5"
@@ -1378,6 +1469,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-riscv64@npm:0.20.2"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-riscv64@npm:0.21.5"
@@ -1399,6 +1497,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-s390x@npm:0.20.2"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-s390x@npm:0.21.5"
@@ -1420,6 +1525,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-x64@npm:0.20.2"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-x64@npm:0.21.5"
@@ -1441,6 +1553,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/netbsd-x64@npm:0.20.2"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/netbsd-x64@npm:0.21.5"
@@ -1462,6 +1581,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/openbsd-x64@npm:0.20.2"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/openbsd-x64@npm:0.21.5"
@@ -1483,6 +1609,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/sunos-x64@npm:0.20.2"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/sunos-x64@npm:0.21.5"
@@ -1504,6 +1637,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-arm64@npm:0.20.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-arm64@npm:0.21.5"
@@ -1525,6 +1665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-ia32@npm:0.20.2"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-ia32@npm:0.21.5"
@@ -1546,6 +1693,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-x64@npm:0.20.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-x64@npm:0.21.5"
@@ -1739,7 +1893,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.2, @jridgewell/gen-mapping@npm:^0.3.5":
+"@jridgewell/gen-mapping@npm:^0.3.5":
   version: 0.3.5
   resolution: "@jridgewell/gen-mapping@npm:0.3.5"
   dependencies:
@@ -2848,6 +3002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm-eabi@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.32.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm64@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-android-arm64@npm:4.29.1"
@@ -2855,6 +3016,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm64@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.32.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-arm64@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-darwin-arm64@npm:4.29.1"
@@ -2862,6 +3030,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-arm64@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.32.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-x64@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-darwin-x64@npm:4.29.1"
@@ -2869,6 +3044,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-x64@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.32.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-freebsd-arm64@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-freebsd-arm64@npm:4.29.1"
@@ -2876,6 +3058,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-freebsd-arm64@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.32.0"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-freebsd-x64@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-freebsd-x64@npm:4.29.1"
@@ -2883,6 +3072,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-freebsd-x64@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.32.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-gnueabihf@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.29.1"
@@ -2890,6 +3086,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.32.0"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-musleabihf@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.29.1"
@@ -2897,6 +3100,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-musleabihf@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.32.0"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-gnu@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.29.1"
@@ -2904,6 +3114,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-gnu@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.32.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-musl@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-arm64-musl@npm:4.29.1"
@@ -2911,6 +3128,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-musl@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.32.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-loongarch64-gnu@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.29.1"
@@ -2918,6 +3142,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-loongarch64-gnu@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.32.0"
+  conditions: os=linux & cpu=loong64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-powerpc64le-gnu@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.29.1"
@@ -2925,6 +3156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.32.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-riscv64-gnu@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.29.1"
@@ -2932,6 +3170,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-riscv64-gnu@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.32.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-s390x-gnu@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.29.1"
@@ -2939,6 +3184,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-s390x-gnu@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.32.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-gnu@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.29.1"
@@ -2946,6 +3198,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-gnu@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.32.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-musl@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-linux-x64-musl@npm:4.29.1"
@@ -2953,6 +3212,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-musl@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.32.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-arm64-msvc@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.29.1"
@@ -2960,6 +3226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-arm64-msvc@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.32.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-ia32-msvc@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.29.1"
@@ -2967,6 +3240,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-ia32-msvc@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.32.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-x64-msvc@npm:4.29.1":
   version: 4.29.1
   resolution: "@rollup/rollup-win32-x64-msvc@npm:4.29.1"
@@ -2974,6 +3254,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-x64-msvc@npm:4.32.0":
+  version: 4.32.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.32.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@sentry-internal/browser-utils@npm:8.47.0":
   version: 8.47.0
   resolution: "@sentry-internal/browser-utils@npm:8.47.0"
@@ -3562,12 +3849,133 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/container-queries@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@tailwindcss/container-queries@npm:0.1.1"
-  peerDependencies:
-    tailwindcss: ">=3.2.0"
-  checksum: 10/2515ae0ce3ca5f3eb2a54116e97cbf4bce45d5fc7ad4b01f3204f51937461ff099c878048afbca22ca422ea3a9c1779df68a7cfe320ca155da47a8dde3257f4b
+"@tailwindcss/node@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/node@npm:4.0.0"
+  dependencies:
+    enhanced-resolve: "npm:^5.18.0"
+    jiti: "npm:^2.4.2"
+    tailwindcss: "npm:4.0.0"
+  checksum: 10/44edd1a455844dee8e263ed5b9ab35eb7fa2e698135ce960eb003b722e384abe41278b79365f177ff22d813c23986e43a8d4426be72cd842c405324680d58c71
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.0.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.0.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.0.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.0.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.0.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.0.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.0.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.0.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide@npm:4.0.0"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.0.0"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.0.0"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.0.0"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.0.0"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.0.0"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.0.0"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10/36fdafe852f3997d47ced47c7f8483f065e18ea3876fc51e0663ec4aa4eea21b2b88b18f8d7514859918e407c8999333110eb4c4b0eca7f002c08f762cac45ae
   languageName: node
   linkType: hard
 
@@ -3585,6 +3993,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/vite@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/vite@npm:4.0.0"
+  dependencies:
+    "@tailwindcss/node": "npm:^4.0.0"
+    "@tailwindcss/oxide": "npm:^4.0.0"
+    lightningcss: "npm:^1.29.1"
+    tailwindcss: "npm:4.0.0"
+  peerDependencies:
+    vite: ^5.2.0 || ^6
+  checksum: 10/9dc6d1fcc67049ff4e1add837f963277228a84303ecc1a0daf2cf45cb359991018d2ff4ddea7c6b5abf3e2293c0c74d80ea6bb7aa8853a6c3722f208b93a4382
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-virtual@npm:3.5.0":
   version: 3.5.0
   resolution: "@tanstack/react-virtual@npm:3.5.0"
@@ -4194,7 +4616,7 @@ __metadata:
     "@better-giving/schemas": "npm:1.0.2"
     "@better-giving/types": "npm:1.0.5"
     "@better-giving/user": "npm:1.0.7"
-    "@biomejs/biome": "npm:1.8.1"
+    "@biomejs/biome": "npm:1.9.4"
     "@conform-to/dom": "npm:1.2.2"
     "@conform-to/react": "npm:1.2.2"
     "@fontsource-variable/dm-sans": "npm:5.1.1"
@@ -4215,8 +4637,8 @@ __metadata:
     "@sentry/react": "npm:8.47.0"
     "@stripe/react-stripe-js": "npm:3.1.1"
     "@stripe/stripe-js": "npm:5.3.0"
-    "@tailwindcss/container-queries": "npm:0.1.1"
     "@tailwindcss/typography": "npm:0.5.15"
+    "@tailwindcss/vite": "npm:^4.0.0"
     "@testing-library/dom": "npm:10.1.0"
     "@testing-library/jest-dom": "npm:6.4.6"
     "@testing-library/react": "npm:16.0.0"
@@ -4230,7 +4652,6 @@ __metadata:
     "@vercel/blob": "npm:0.27.1"
     "@vercel/kv": "npm:3.0.0"
     "@vercel/remix": "npm:2.15.2"
-    autoprefixer: "npm:10.4.20"
     conform-to-valibot: "npm:1.11.0"
     date-fns: "npm:3.6.0"
     decimal.js: "npm:10.4.3"
@@ -4247,8 +4668,6 @@ __metadata:
     lucide-react: "npm:0.436.0"
     msw: "npm:2.3.1"
     nprogress: "npm:0.2.0"
-    postcss: "npm:8.4.49"
-    postcss-import: "npm:16.1.0"
     qrcode.react: "npm:4.2.0"
     quill: "npm:2.0.2"
     react: "npm:18.2.0"
@@ -4263,12 +4682,12 @@ __metadata:
     remix-utils: "npm:8.1.0"
     sonner: "npm:1.7.0"
     swr: "npm:2.2.5"
-    tailwindcss: "npm:3.4.3"
+    tailwindcss: "npm:^4.0.0"
     type-fest: "npm:4.20.0"
     typescript: "npm:5.5"
     valibot: "npm:0.42.0"
     vanilla-cookieconsent: "npm:3.0.1"
-    vite: "npm:5.1.0"
+    vite: "npm:5.2.0"
     vite-tsconfig-paths: "npm:5.1.4"
     vitest: "npm:2.1.8"
     yup: "npm:1.4.0"
@@ -4321,13 +4740,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"any-promise@npm:^1.0.0":
-  version: 1.3.0
-  resolution: "any-promise@npm:1.3.0"
-  checksum: 10/6737469ba353b5becf29e4dc3680736b9caa06d300bda6548812a8fee63ae7d336d756f88572fa6b5219aed36698d808fa55f62af3e7e6845c7a1dc77d240edb
-  languageName: node
-  linkType: hard
-
 "anymatch@npm:~3.1.2":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
@@ -4338,7 +4750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arg@npm:^5.0.1, arg@npm:^5.0.2":
+"arg@npm:^5.0.1":
   version: 5.0.2
   resolution: "arg@npm:5.0.2"
   checksum: 10/92fe7de222054a060fd2329e92e867410b3ea260328147ee3fb7855f78efae005f4087e698d4e688a856893c56bb09951588c40f2c901cf6996cd8cd7bcfef2c
@@ -4400,24 +4812,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:10.4.20":
-  version: 10.4.20
-  resolution: "autoprefixer@npm:10.4.20"
-  dependencies:
-    browserslist: "npm:^4.23.3"
-    caniuse-lite: "npm:^1.0.30001646"
-    fraction.js: "npm:^4.3.7"
-    normalize-range: "npm:^0.1.2"
-    picocolors: "npm:^1.0.1"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.1.0
-  bin:
-    autoprefixer: bin/autoprefixer
-  checksum: 10/d3c4b562fc4af2393623a0207cc336f5b9f94c4264ae1c316376904c279702ce2b12dc3f27205f491195d1e29bb52ffc269970ceb0f271f035fadee128a273f7
-  languageName: node
-  linkType: hard
-
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -4537,7 +4931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.23.3, browserslist@npm:^4.24.0":
+"browserslist@npm:^4.24.0":
   version: 4.24.3
   resolution: "browserslist@npm:4.24.3"
   dependencies:
@@ -4654,14 +5048,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase-css@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "camelcase-css@npm:2.0.1"
-  checksum: 10/1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001688":
+"caniuse-lite@npm:^1.0.30001688":
   version: 1.0.30001690
   resolution: "caniuse-lite@npm:1.0.30001690"
   checksum: 10/9fb4659eb09a298601b9593739072c481e2f5cc524bd0530e5e0f002e66246da5e866669854dfc0d53195ee36b201dab02f7933a7cdf60ccba7adb2d4a304caf
@@ -4743,7 +5130,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:^3.5.1":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -4877,13 +5264,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^4.0.0":
-  version: 4.1.1
-  resolution: "commander@npm:4.1.1"
-  checksum: 10/3b2dc4125f387dab73b3294dbcb0ab2a862f9c0ad748ee2b27e3544d25325b7a8cdfbcc228d103a98a716960b14478114a5206b5415bd48cdafa38797891562c
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -5179,10 +5559,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"didyoumean@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "didyoumean@npm:1.2.2"
-  checksum: 10/de7f11b6a0c8c61018629b7f405bb9746d6e994ce87c1a4b7655c3c718442dc69037a3d46d804950604fd9cbe85c074f7b224a119fc1bda851690a74540c6cf8
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757
   languageName: node
   linkType: hard
 
@@ -5193,13 +5575,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dlv@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "dlv@npm:1.1.3"
-  checksum: 10/836459ec6b50e43e9ed388a5fc28954be99e3481af3fa4b5d82a600762eb65ef8faacd454097ed7fc2f8a60aea2800d65a4cece5cd0d81ab82b2031f3f759e6e
-  languageName: node
-  linkType: hard
-
 "dom-accessibility-api@npm:^0.5.9":
   version: 0.5.16
   resolution: "dom-accessibility-api@npm:0.5.16"
@@ -5339,6 +5714,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.18.0":
+  version: 5.18.0
+  resolution: "enhanced-resolve@npm:5.18.0"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.2.0"
+  checksum: 10/e88463ef97b68d40d0da0cd0c572e23f43dba0be622d6d44eae5cafed05f0c5dac43e463a83a86c4f70186d029357f82b56d9e1e47e8fc91dce3d6602f8bd6ce
+  languageName: node
+  linkType: hard
+
 "entities@npm:^4.4.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
@@ -5480,33 +5865,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.19.3, esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0":
-  version: 0.19.12
-  resolution: "esbuild@npm:0.19.12"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.19.12"
-    "@esbuild/android-arm": "npm:0.19.12"
-    "@esbuild/android-arm64": "npm:0.19.12"
-    "@esbuild/android-x64": "npm:0.19.12"
-    "@esbuild/darwin-arm64": "npm:0.19.12"
-    "@esbuild/darwin-x64": "npm:0.19.12"
-    "@esbuild/freebsd-arm64": "npm:0.19.12"
-    "@esbuild/freebsd-x64": "npm:0.19.12"
-    "@esbuild/linux-arm": "npm:0.19.12"
-    "@esbuild/linux-arm64": "npm:0.19.12"
-    "@esbuild/linux-ia32": "npm:0.19.12"
-    "@esbuild/linux-loong64": "npm:0.19.12"
-    "@esbuild/linux-mips64el": "npm:0.19.12"
-    "@esbuild/linux-ppc64": "npm:0.19.12"
-    "@esbuild/linux-riscv64": "npm:0.19.12"
-    "@esbuild/linux-s390x": "npm:0.19.12"
-    "@esbuild/linux-x64": "npm:0.19.12"
-    "@esbuild/netbsd-x64": "npm:0.19.12"
-    "@esbuild/openbsd-x64": "npm:0.19.12"
-    "@esbuild/sunos-x64": "npm:0.19.12"
-    "@esbuild/win32-arm64": "npm:0.19.12"
-    "@esbuild/win32-ia32": "npm:0.19.12"
-    "@esbuild/win32-x64": "npm:0.19.12"
+"esbuild@npm:^0.20.1":
+  version: 0.20.2
+  resolution: "esbuild@npm:0.20.2"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.20.2"
+    "@esbuild/android-arm": "npm:0.20.2"
+    "@esbuild/android-arm64": "npm:0.20.2"
+    "@esbuild/android-x64": "npm:0.20.2"
+    "@esbuild/darwin-arm64": "npm:0.20.2"
+    "@esbuild/darwin-x64": "npm:0.20.2"
+    "@esbuild/freebsd-arm64": "npm:0.20.2"
+    "@esbuild/freebsd-x64": "npm:0.20.2"
+    "@esbuild/linux-arm": "npm:0.20.2"
+    "@esbuild/linux-arm64": "npm:0.20.2"
+    "@esbuild/linux-ia32": "npm:0.20.2"
+    "@esbuild/linux-loong64": "npm:0.20.2"
+    "@esbuild/linux-mips64el": "npm:0.20.2"
+    "@esbuild/linux-ppc64": "npm:0.20.2"
+    "@esbuild/linux-riscv64": "npm:0.20.2"
+    "@esbuild/linux-s390x": "npm:0.20.2"
+    "@esbuild/linux-x64": "npm:0.20.2"
+    "@esbuild/netbsd-x64": "npm:0.20.2"
+    "@esbuild/openbsd-x64": "npm:0.20.2"
+    "@esbuild/sunos-x64": "npm:0.20.2"
+    "@esbuild/win32-arm64": "npm:0.20.2"
+    "@esbuild/win32-ia32": "npm:0.20.2"
+    "@esbuild/win32-x64": "npm:0.20.2"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -5556,7 +5941,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10/861fa8eb2428e8d6521a4b7c7930139e3f45e8d51a86985cc29408172a41f6b18df7b3401e7e5e2d528cdf83742da601ddfdc77043ddc4f1c715a8ddb2d8a255
+  checksum: 10/663215ab7e599651e00d61b528a63136e1f1d397db8b9c3712540af928c9476d61da95aefa81b7a8dfc7a9fdd7616fcf08395c27be68be8c99953fb461863ce4
   languageName: node
   linkType: hard
 
@@ -5636,7 +6021,87 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10/d2ff2ca84d30cce8e871517374d6c2290835380dc7cd413b2d49189ed170d45e407be14de2cb4794cf76f75cf89955c4714726ebd3de7444b3046f5cab23ab6b
+  checksum: 10/d2ff2ca84d30cce8e871517374d6c2290835380dc7cd413b2d49189ed170d45e407be14de2cb4794cf76f75cf89955c4714726ebd3de7444b3046f5cab23ab6b
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0":
+  version: 0.19.12
+  resolution: "esbuild@npm:0.19.12"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.19.12"
+    "@esbuild/android-arm": "npm:0.19.12"
+    "@esbuild/android-arm64": "npm:0.19.12"
+    "@esbuild/android-x64": "npm:0.19.12"
+    "@esbuild/darwin-arm64": "npm:0.19.12"
+    "@esbuild/darwin-x64": "npm:0.19.12"
+    "@esbuild/freebsd-arm64": "npm:0.19.12"
+    "@esbuild/freebsd-x64": "npm:0.19.12"
+    "@esbuild/linux-arm": "npm:0.19.12"
+    "@esbuild/linux-arm64": "npm:0.19.12"
+    "@esbuild/linux-ia32": "npm:0.19.12"
+    "@esbuild/linux-loong64": "npm:0.19.12"
+    "@esbuild/linux-mips64el": "npm:0.19.12"
+    "@esbuild/linux-ppc64": "npm:0.19.12"
+    "@esbuild/linux-riscv64": "npm:0.19.12"
+    "@esbuild/linux-s390x": "npm:0.19.12"
+    "@esbuild/linux-x64": "npm:0.19.12"
+    "@esbuild/netbsd-x64": "npm:0.19.12"
+    "@esbuild/openbsd-x64": "npm:0.19.12"
+    "@esbuild/sunos-x64": "npm:0.19.12"
+    "@esbuild/win32-arm64": "npm:0.19.12"
+    "@esbuild/win32-ia32": "npm:0.19.12"
+    "@esbuild/win32-x64": "npm:0.19.12"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/861fa8eb2428e8d6521a4b7c7930139e3f45e8d51a86985cc29408172a41f6b18df7b3401e7e5e2d528cdf83742da601ddfdc77043ddc4f1c715a8ddb2d8a255
   languageName: node
   linkType: hard
 
@@ -5856,7 +6321,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.7, fast-glob@npm:^3.3.0":
+"fast-glob@npm:^3.2.7":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -5976,13 +6441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^4.3.7":
-  version: 4.3.7
-  resolution: "fraction.js@npm:4.3.7"
-  checksum: 10/bb5ebcdeeffcdc37b68ead3bdfc244e68de188e0c64e9702197333c72963b95cc798883ad16adc21588088b942bca5b6a6ff4aeb1362d19f6f3b629035dc15f5
-  languageName: node
-  linkType: hard
-
 "framer-motion@npm:11.2.10":
   version: 11.2.10
   resolution: "framer-motion@npm:11.2.10"
@@ -6153,15 +6611,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "glob-parent@npm:6.0.2"
-  dependencies:
-    is-glob: "npm:^4.0.3"
-  checksum: 10/c13ee97978bef4f55106b71e66428eb1512e71a7466ba49025fc2aec59a5bfb0954d5abd58fc5ee6c9b076eef4e1f6d3375c2e964b88466ca390da4419a786a8
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.2.2, glob@npm:^10.3.10":
   version: 10.3.10
   resolution: "glob@npm:10.3.10"
@@ -6198,7 +6647,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
@@ -6523,7 +6972,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.13.0, is-core-module@npm:^2.8.1":
+"is-core-module@npm:^2.8.1":
   version: 2.16.1
   resolution: "is-core-module@npm:2.16.1"
   dependencies:
@@ -6572,7 +7021,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.1, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -6743,12 +7192,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.21.0":
-  version: 1.21.0
-  resolution: "jiti@npm:1.21.0"
+"jiti@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "jiti@npm:2.4.2"
   bin:
-    jiti: bin/jiti.js
-  checksum: 10/005a0239e50381b5c9919f59dbab86128367bd64872f3376dbbde54b6523f41bd134bf22909e2a509e38fd87e1c22125ca255b9b6b53e7df0fedd23f737334cc
+    jiti: lib/jiti-cli.mjs
+  checksum: 10/e2b07eb2e3fbb245e29ad288dddecab31804967fc84d5e01d39858997d2743b5e248946defcecf99272275a00284ecaf7ec88b8c841331324f0c946d8274414b
   languageName: node
   linkType: hard
 
@@ -6987,10 +7436,113 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "lilconfig@npm:2.1.0"
-  checksum: 10/b1314a2e55319013d5e7d7d08be39015829d2764a1eaee130129545d40388499d81b1c31b0f9b3417d4db12775a88008b72ec33dd06e0184cf7503b32ca7cc0b
+"lightningcss-darwin-arm64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-darwin-arm64@npm:1.29.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-darwin-x64@npm:1.29.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-freebsd-x64@npm:1.29.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm64-musl@npm:1.29.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-x64-gnu@npm:1.29.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-x64-musl@npm:1.29.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-win32-x64-msvc@npm:1.29.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:^1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss@npm:1.29.1"
+  dependencies:
+    detect-libc: "npm:^1.0.3"
+    lightningcss-darwin-arm64: "npm:1.29.1"
+    lightningcss-darwin-x64: "npm:1.29.1"
+    lightningcss-freebsd-x64: "npm:1.29.1"
+    lightningcss-linux-arm-gnueabihf: "npm:1.29.1"
+    lightningcss-linux-arm64-gnu: "npm:1.29.1"
+    lightningcss-linux-arm64-musl: "npm:1.29.1"
+    lightningcss-linux-x64-gnu: "npm:1.29.1"
+    lightningcss-linux-x64-musl: "npm:1.29.1"
+    lightningcss-win32-arm64-msvc: "npm:1.29.1"
+    lightningcss-win32-x64-msvc: "npm:1.29.1"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10/c6428a695ca985fa28ea899eb72471e0c6a71715291cb62f938b038596a971b6b22d83415d882dec27841169b1b773989b16df173f5ce9075c3fdc22ff764cff
   languageName: node
   linkType: hard
 
@@ -7001,13 +7553,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lines-and-columns@npm:^1.1.6":
-  version: 1.2.4
-  resolution: "lines-and-columns@npm:1.2.4"
-  checksum: 10/0c37f9f7fa212b38912b7145e1cd16a5f3cd34d782441c3e6ca653485d326f58b3caccda66efce1c5812bde4961bbde3374fae4b0d11bf1226152337f3894aa5
-  languageName: node
-  linkType: hard
-
 "load-script@npm:^1.0.0":
   version: 1.0.0
   resolution: "load-script@npm:1.0.0"
@@ -7781,7 +8326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -8059,17 +8604,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mz@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "mz@npm:2.7.0"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-    object-assign: "npm:^4.0.1"
-    thenify-all: "npm:^1.0.0"
-  checksum: 10/8427de0ece99a07e9faed3c0c6778820d7543e3776f9a84d22cf0ec0a8eb65f6e9aee9c9d353ff9a105ff62d33a9463c6ca638974cc652ee8140cd1e35951c87
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -8079,6 +8613,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.8":
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10/2d1766606cf0d6f47b6f0fdab91761bb81609b2e3d367027aff45e6ee7006f660fb7e7781f4a34799fe6734f1268eeed2e37a5fdee809ade0c2d4eb11b0f9c40
+  languageName: node
+  linkType: hard
+
 "negotiator@npm:0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
@@ -8150,13 +8693,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-range@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "normalize-range@npm:0.1.2"
-  checksum: 10/9b2f14f093593f367a7a0834267c24f3cb3e887a2d9809c77d8a7e5fd08738bcd15af46f0ab01cc3a3d660386f015816b5c922cea8bf2ee79777f40874063184
-  languageName: node
-  linkType: hard
-
 "npm-install-checks@npm:^6.0.0":
   version: 6.3.0
   resolution: "npm-install-checks@npm:6.3.0"
@@ -8220,20 +8756,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
+"object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: 10/fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
   languageName: node
   linkType: hard
 
-"object-hash@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "object-hash@npm:3.0.0"
-  checksum: 10/f498d456a20512ba7be500cef4cf7b3c183cc72c65372a549c9a0e6dd78ce26f375e9b1315c07592d3fde8f10d5019986eba35970570d477ed9a2a702514432a
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.13.3":
   version: 1.13.3
   resolution: "object-inspect@npm:1.13.3"
@@ -8406,13 +8935,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-parse@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "path-parse@npm:1.0.7"
-  checksum: 10/49abf3d81115642938a8700ec580da6e830dde670be21893c62f4e10bd7dd4c3742ddc603fe24f898cba7eb0c6bc1777f8d9ac14185d34540c6d4d80cd9cae8a
-  languageName: node
-  linkType: hard
-
 "path-scurry@npm:^1.10.1":
   version: 1.10.1
   resolution: "path-scurry@npm:1.10.1"
@@ -8473,7 +8995,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
@@ -8496,20 +9018,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pify@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "pify@npm:2.3.0"
-  checksum: 10/9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
-  languageName: node
-  linkType: hard
-
-"pirates@npm:^4.0.1":
-  version: 4.0.6
-  resolution: "pirates@npm:4.0.6"
-  checksum: 10/d02dda76f4fec1cbdf395c36c11cf26f76a644f9f9a1bfa84d3167d0d3154d5289aacc72677aa20d599bb4a6937a471de1b65c995e2aea2d8687cbcd7e43ea5f
-  languageName: node
-  linkType: hard
-
 "pkg-types@npm:^1.2.1":
   version: 1.3.0
   resolution: "pkg-types@npm:1.3.0"
@@ -8537,43 +9045,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-import@npm:16.1.0":
-  version: 16.1.0
-  resolution: "postcss-import@npm:16.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.0.0"
-    read-cache: "npm:^1.0.0"
-    resolve: "npm:^1.1.7"
-  peerDependencies:
-    postcss: ^8.0.0
-  checksum: 10/a0877244976b8b8a930adfc8dff9f5f6c251d78649e67aa80e963d11821e6dbc8f8b16fa1d126e8725093d69c77486fc4a6861c823693c068c3192d4879e0b29
-  languageName: node
-  linkType: hard
-
-"postcss-import@npm:^15.1.0":
-  version: 15.1.0
-  resolution: "postcss-import@npm:15.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.0.0"
-    read-cache: "npm:^1.0.0"
-    resolve: "npm:^1.1.7"
-  peerDependencies:
-    postcss: ^8.0.0
-  checksum: 10/33c91b7e6b794b5c33d7d7d4730e5f0729c131d2de1ada7fcc116955625a78c3ce613983f019fa9447681795cf3f851e9c38dfbe3f48a2d08a8aef917c70a32a
-  languageName: node
-  linkType: hard
-
-"postcss-js@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-js@npm:4.0.1"
-  dependencies:
-    camelcase-css: "npm:^2.0.1"
-  peerDependencies:
-    postcss: ^8.4.21
-  checksum: 10/ef2cfe8554daab4166cfcb290f376e7387964c36503f5bd42008778dba735685af8d4f5e0aba67cae999f47c855df40a1cd31ae840e0df320ded36352581045e
-  languageName: node
-  linkType: hard
-
 "postcss-load-config@npm:^4.0.1":
   version: 4.0.2
   resolution: "postcss-load-config@npm:4.0.2"
@@ -8654,17 +9125,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-nested@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "postcss-nested@npm:6.0.1"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.11"
-  peerDependencies:
-    postcss: ^8.2.14
-  checksum: 10/02aaac682f599879fae6aab3210aee59b8b5bde3ba242527f6fd103726955b74ffa05c2b765920be5f403e758045582534d11b1e19add01586c19743ed99e3fe
-  languageName: node
-  linkType: hard
-
 "postcss-selector-parser@npm:6.0.10":
   version: 6.0.10
   resolution: "postcss-selector-parser@npm:6.0.10"
@@ -8675,16 +9135,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.11":
-  version: 6.0.15
-  resolution: "postcss-selector-parser@npm:6.0.15"
-  dependencies:
-    cssesc: "npm:^3.0.0"
-    util-deprecate: "npm:^1.0.2"
-  checksum: 10/cea591e1d9bce60eea724428863187228e27ddaebd98e5ecb4ee6d4c9a4b68e8157fd44c916b3fef1691d19ad16aa416bb7279b5eab260c32340ae630a34e200
-  languageName: node
-  linkType: hard
-
 "postcss-selector-parser@npm:^7.0.0":
   version: 7.0.0
   resolution: "postcss-selector-parser@npm:7.0.0"
@@ -8695,14 +9145,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.1.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 10/e4e4486f33b3163a606a6ed94f9c196ab49a37a7a7163abfcd469e5f113210120d70b8dd5e33d64636f41ad52316a3725655421eb9a1094f1bcab1db2f555c62
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.49, postcss@npm:^8.4.19, postcss@npm:^8.4.23, postcss@npm:^8.4.35, postcss@npm:^8.4.43":
+"postcss@npm:^8.4.19, postcss@npm:^8.4.43":
   version: 8.4.49
   resolution: "postcss@npm:8.4.49"
   dependencies:
@@ -8713,6 +9163,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.36":
+  version: 8.5.1
+  resolution: "postcss@npm:8.5.1"
+  dependencies:
+    nanoid: "npm:^3.3.8"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/1fbd28753143f7f03e4604813639918182b15343c7ad0f4e72f3875fc2cc0b8494c887f55dc05008fad5fbf1e1e908ce2edbbce364a91f84dcefb71edf7cd31d
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^2.7.1":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
@@ -9081,15 +9542,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-cache@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "read-cache@npm:1.0.0"
-  dependencies:
-    pify: "npm:^2.3.0"
-  checksum: 10/83a39149d9dfa38f0c482ea0d77b34773c92fef07fe7599cdd914d255b14d0453e0229ef6379d8d27d6947f42d7581635296d0cfa7708f05a9bd8e789d398b31
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:^2.0.0, readable-stream@npm:~2.3.6":
   version: 2.3.8
   resolution: "readable-stream@npm:2.3.8"
@@ -9277,32 +9729,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.7, resolve@npm:^1.22.2":
-  version: 1.22.8
-  resolution: "resolve@npm:1.22.8"
-  dependencies:
-    is-core-module: "npm:^2.13.0"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10/c473506ee01eb45cbcfefb68652ae5759e092e6b0fb64547feadf9736a6394f258fbc6f88e00c5ca36d5477fbb65388b272432a3600fa223062e54333c156753
-  languageName: node
-  linkType: hard
-
-"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>":
-  version: 1.22.8
-  resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
-  dependencies:
-    is-core-module: "npm:^2.13.0"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10/f345cd37f56a2c0275e3fe062517c650bb673815d885e7507566df589375d165bbbf4bdb6aa95600a9bc55f4744b81f452b5a63f95b9f10a72787dba3c90890a
-  languageName: node
-  linkType: hard
-
 "restore-cursor@npm:^3.1.0":
   version: 3.1.0
   resolution: "restore-cursor@npm:3.1.0"
@@ -9334,7 +9760,79 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.2.0, rollup@npm:^4.20.0":
+"rollup@npm:^4.13.0":
+  version: 4.32.0
+  resolution: "rollup@npm:4.32.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.32.0"
+    "@rollup/rollup-android-arm64": "npm:4.32.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.32.0"
+    "@rollup/rollup-darwin-x64": "npm:4.32.0"
+    "@rollup/rollup-freebsd-arm64": "npm:4.32.0"
+    "@rollup/rollup-freebsd-x64": "npm:4.32.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.32.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.32.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.32.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.32.0"
+    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.32.0"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.32.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.32.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.32.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.32.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.32.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.32.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.32.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.32.0"
+    "@types/estree": "npm:1.0.6"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-freebsd-arm64":
+      optional: true
+    "@rollup/rollup-freebsd-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm-musleabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-loongarch64-gnu":
+      optional: true
+    "@rollup/rollup-linux-powerpc64le-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 10/5857d94f84e9f2efdae45f7f80e85a1c764804b40f322ebf5073e2008f495df9372fe15430691fabcf4cdcdf95fb66f187e1f726b2e618d2cb19d0e0b9ccb11f
+  languageName: node
+  linkType: hard
+
+"rollup@npm:^4.20.0":
   version: 4.29.1
   resolution: "rollup@npm:4.29.1"
   dependencies:
@@ -9934,24 +10432,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sucrase@npm:^3.32.0":
-  version: 3.35.0
-  resolution: "sucrase@npm:3.35.0"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    commander: "npm:^4.0.0"
-    glob: "npm:^10.3.10"
-    lines-and-columns: "npm:^1.1.6"
-    mz: "npm:^2.7.0"
-    pirates: "npm:^4.0.1"
-    ts-interface-checker: "npm:^0.1.9"
-  bin:
-    sucrase: bin/sucrase
-    sucrase-node: bin/sucrase-node
-  checksum: 10/bc601558a62826f1c32287d4fdfa4f2c09fe0fec4c4d39d0e257fd9116d7d6227a18309721d4185ec84c9dc1af0d5ec0e05a42a337fbb74fc293e068549aacbe
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^7.1.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"
@@ -9961,13 +10441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-preserve-symlinks-flag@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
-  checksum: 10/a9dc19ae2220c952bd2231d08ddeecb1b0328b61e72071ff4000c8384e145cc07c1c0bdb3b5a1cb06e186a7b2790f1dee793418b332f6ddf320de25d9125be7e
-  languageName: node
-  linkType: hard
-
 "swr@npm:2.2.5":
   version: 2.2.5
   resolution: "swr@npm:2.2.5"
@@ -9994,36 +10467,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:3.4.3":
-  version: 3.4.3
-  resolution: "tailwindcss@npm:3.4.3"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.5.3"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.0"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.21.0"
-    lilconfig: "npm:^2.1.0"
-    micromatch: "npm:^4.0.5"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.23"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.1"
-    postcss-nested: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^6.0.11"
-    resolve: "npm:^1.22.2"
-    sucrase: "npm:^3.32.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10/8d65347bcab1b492fe3acb95a917d8610112c1efb01a91259368c6360e98a5622bfd37bce96fc7ce70268c9d25d42674a7a475074e079781573a1eae8559bb9f
+"tailwindcss@npm:4.0.0, tailwindcss@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "tailwindcss@npm:4.0.0"
+  checksum: 10/3491d86a7c3ad08209eb988fcf36d893e5f5a4c48c63da706a8788f6111e141386e1b5c8fa46f2650b08200c1b8011251d97b6d65514bdc14aa06597871d1f7d
+  languageName: node
+  linkType: hard
+
+"tapable@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "tapable@npm:2.2.1"
+  checksum: 10/1769336dd21481ae6347611ca5fca47add0962fd8e80466515032125eca0084a4f0ede11e65341b9c0018ef4e1cf1ad820adbb0fba7cc99865c6005734000b0a
   languageName: node
   linkType: hard
 
@@ -10066,24 +10520,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"thenify-all@npm:^1.0.0":
-  version: 1.6.0
-  resolution: "thenify-all@npm:1.6.0"
-  dependencies:
-    thenify: "npm:>= 3.1.0 < 4"
-  checksum: 10/dba7cc8a23a154cdcb6acb7f51d61511c37a6b077ec5ab5da6e8b874272015937788402fd271fdfc5f187f8cb0948e38d0a42dcc89d554d731652ab458f5343e
-  languageName: node
-  linkType: hard
-
-"thenify@npm:>= 3.1.0 < 4":
-  version: 3.3.1
-  resolution: "thenify@npm:3.3.1"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-  checksum: 10/486e1283a867440a904e36741ff1a177faa827cf94d69506f7e3ae4187b9afdf9ec368b3d8da225c192bfe2eb943f3f0080594156bf39f21b57cd1411e2e7f6d
-  languageName: node
-  linkType: hard
-
 "throttleit@npm:^2.1.0":
   version: 2.1.0
   resolution: "throttleit@npm:2.1.0"
@@ -10208,13 +10644,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-interface-checker@npm:^0.1.9":
-  version: 0.1.13
-  resolution: "ts-interface-checker@npm:0.1.13"
-  checksum: 10/9f7346b9e25bade7a1050c001ec5a4f7023909c0e1644c5a96ae20703a131627f081479e6622a4ecee2177283d0069e651e507bedadd3904fc4010ab28ffce00
-  languageName: node
-  linkType: hard
-
 "ts-morph@npm:12.0.0":
   version: 12.0.0
   resolution: "ts-morph@npm:12.0.0"
@@ -10702,14 +11131,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:5.1.0":
-  version: 5.1.0
-  resolution: "vite@npm:5.1.0"
+"vite@npm:5.2.0":
+  version: 5.2.0
+  resolution: "vite@npm:5.2.0"
   dependencies:
-    esbuild: "npm:^0.19.3"
+    esbuild: "npm:^0.20.1"
     fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.35"
-    rollup: "npm:^4.2.0"
+    postcss: "npm:^8.4.36"
+    rollup: "npm:^4.13.0"
   peerDependencies:
     "@types/node": ^18.0.0 || >=20.0.0
     less: "*"
@@ -10738,7 +11167,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10/14d136f2e71d657cb55bec2a9330951e27e572ed79c4e79e3edc24decfa87f95664b8206614bfcf6a61db933667e554a8eed389291ad8af49de0784548a83a4c
+  checksum: 10/bbe4defd9490dd7af862b3de0d595c88129d3facbd0727efb5b8a5205eb45a1fb52593e618cb73c006544361f58505cb535a716a5da0578f266c2f879a68d167
   languageName: node
   linkType: hard