feat: add Outfit Variable font and update global typography settings

src/PrerenderProduct.js

@@ -551,7 +551,7 @@ class PrerenderProduct extends React.Component {
                   })
                 },
                 style: { 
-                  fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+                  fontFamily: '"Outfit Variable","Roboto","Helvetica","Arial",sans-serif',
                   fontSize: '1rem',
                   lineHeight: '1.7',
                   color: '#333'

src/components/Stripe.js

@@ -85,7 +85,7 @@ class Stripe extends Component {
                   colorWarning: '#FF9800',          // Orange for warnings
                   
                   // Typography matching your Roboto setup
-                  fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+                  fontFamily: "'Outfit Variable', 'Roboto', 'Helvetica', 'Arial', sans-serif",
                   fontSizeBase: '16px',             // Base font size for mobile compatibility
                   fontWeightNormal: '400',          // Normal Roboto weight
                   fontWeightMedium: '500',          // Medium Roboto weight

src/components/ThemeCustomizerDialog.js

@@ -71,7 +71,7 @@ const ThemeCustomizerDialog = ({ open, onClose, theme, onThemeChange }) => {
         },
       },
       typography: {
-        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+        fontFamily: "'Outfit Variable', 'Roboto', 'Helvetica', 'Arial', sans-serif",
         h4: {
           fontWeight: 600,
           color: '#33691E',

src/index.css

@@ -41,7 +41,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: 'Outfit Variable', Roboto, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-y: scroll; /* Always show vertical scrollbar */

src/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "@fontsource-variable/outfit";
 import "./index.css";
 import App from "./App.js";
 import { BrowserRouter } from "react-router-dom";

src/theme.js

@@ -29,7 +29,7 @@ const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+    fontFamily: "'Outfit Variable', 'Roboto', 'Helvetica', 'Arial', sans-serif",
     h4: {
       fontWeight: 600,
       color: '#33691E',