strapi-plugin-magic-mail 2.6.1 → 2.6.3

package/dist/_chunks/{App-Boq8cits.js → App-Cp6QQAHt.js}

@@ -8,7 +8,7 @@ const outline = require("@heroicons/react/24/outline");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const icons = require("@strapi/icons");
-const StyledButtons = require("./StyledButtons-M7vUd2N4.js");
+const StyledButtons = require("./StyledButtons-DVGuFoqy.js");
 const ReactEmailEditor = require("react-email-editor");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
@@ -61,36 +61,6 @@ const useAuthRefresh = () => {
   };
 };
 const theme$3 = {
-  colors: {
-    primary: {
-      50: "#F0F9FF",
-      100: "#E0F2FE",
-      200: "#BAE6FD",
-      500: "#0EA5E9",
-      600: "#0284C7",
-      700: "#0369A1"
-    },
-    secondary: {
-      50: "#FAF5FF",
-      100: "#F3E8FF",
-      500: "#A855F7",
-      600: "#9333EA"
-    },
-    success: {
-      50: "#F0FDF4",
-      100: "#DCFCE7",
-      500: "#22C55E",
-      600: "#16A34A",
-      700: "#15803D"
-    },
-    warning: {
-      100: "#FEF3C7",
-      600: "#D97706"
-    },
-    danger: {
-      600: "#DC2626"
-    }
-  },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
@@ -145,18 +115,16 @@ const slideIn = styled.keyframes`
 const colors$1 = {
   primary: "#4945ff",
   // Strapi Primary Blue
-  primaryLight: "#f0f0ff",
+  primaryLight: "rgba(73, 69, 255, 0.06)",
   // Light Blue Background
   success: "#5cb176",
   // Green for completed
-  successLight: "#eafaf1",
+  successLight: "rgba(92, 177, 118, 0.12)",
   // Gray
-  neutralLight: "#f6f6f9",
-  // Light gray
-  white: "#ffffff",
-  border: "#dcdce4",
-  text: "#32324d",
-  textLight: "#666687"
+  neutralLight: "rgba(142, 142, 169, 0.08)",
+  border: "rgba(128, 128, 128, 0.2)",
+  text: "var(--colors-neutral800, #32324d)",
+  textLight: "var(--colors-neutral600, #666687)"
 };
 const StepHeader = styled__default.default(designSystem.Box)`
   padding-bottom: 24px;
@@ -221,8 +189,8 @@ const StepDot$1 = styled__default.default.div`
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.white};
-  color: ${(props) => props.$active || props.$completed ? colors$1.white : colors$1.textLight};
+  background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : props.theme.colors.neutral0};
+  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors$1.textLight};
   border: 4px solid ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.border};
   display: flex;
   align-items: center;
@@ -263,7 +231,7 @@ const ProvidersGrid = styled__default.default(designSystem.Box)`
   margin-right: auto;
 `;
 const ProviderCard = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.$selected ? colors$1.successLight : colors$1.white};
+  background: ${(props) => props.$selected ? colors$1.successLight : props.theme.colors.neutral0};
   border: 2px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
   border-radius: 12px;
   padding: 24px;
@@ -1137,10 +1105,10 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
               designSystem.Box,
               {
                 padding: 4,
-                background: formData.secure ? "#DCFCE7" : "#FEF3C7",
+                background: formData.secure ? "rgba(34, 197, 94, 0.15)" : "rgba(245, 158, 11, 0.15)",
                 hasRadius: true,
                 style: {
-                  border: formData.secure ? "2px solid #22C55E" : "2px solid #F59E0B",
+                  border: formData.secure ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-warning600, #F59E0B)",
                   borderRadius: "8px",
                   transition: "all 0.2s ease"
                 },
@@ -1666,7 +1634,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "default", title: "📖 SendGrid Resources", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", children: [
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Dashboard:" }),
               " ",
-              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://app.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "app.sendgrid.com" }),
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://app.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "app.sendgrid.com" }),
               /* @__PURE__ */ jsxRuntime.jsx("br", {}),
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "API Keys:" }),
               " Settings → API Keys → Create API Key",
@@ -1676,7 +1644,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
               /* @__PURE__ */ jsxRuntime.jsx("br", {}),
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Docs:" }),
               " ",
-              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://docs.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "docs.sendgrid.com" })
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://docs.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "docs.sendgrid.com" })
             ] }) })
           ] })
         ] }),
@@ -1715,7 +1683,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "default", title: "📖 Mailgun Resources", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", children: [
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Dashboard:" }),
               " ",
-              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://app.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "app.mailgun.com" }),
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://app.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "app.mailgun.com" }),
               /* @__PURE__ */ jsxRuntime.jsx("br", {}),
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "API Keys:" }),
               " Settings → API Security → Private API Key",
@@ -1725,7 +1693,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
               /* @__PURE__ */ jsxRuntime.jsx("br", {}),
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Docs:" }),
               " ",
-              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://documentation.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "documentation.mailgun.com" })
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://documentation.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "documentation.mailgun.com" })
             ] }) })
           ] })
         ] })
@@ -1771,10 +1739,10 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
           designSystem.Box,
           {
             padding: 4,
-            background: formData.isActive ? "#DCFCE7" : "#FEE2E2",
+            background: formData.isActive ? "rgba(34, 197, 94, 0.15)" : "rgba(220, 38, 38, 0.12)",
             hasRadius: true,
             style: {
-              border: formData.isActive ? `2px solid #22C55E` : `2px solid #EF4444`,
+              border: formData.isActive ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-danger600, #EF4444)",
               borderRadius: "8px",
               transition: "all 0.2s ease"
             },
@@ -1803,10 +1771,10 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
           designSystem.Box,
           {
             padding: 4,
-            background: formData.isPrimary ? "#FEF3C7" : "neutral100",
+            background: formData.isPrimary ? "rgba(245, 158, 11, 0.15)" : "neutral100",
             hasRadius: true,
             style: {
-              border: formData.isPrimary ? `2px solid #F59E0B` : `1px solid ${colors$1.border}`,
+              border: formData.isPrimary ? "2px solid var(--colors-warning600, #F59E0B)" : `1px solid ${colors$1.border}`,
               borderRadius: "8px",
               transition: "all 0.2s ease"
             },
@@ -1903,8 +1871,8 @@ const Container$4 = styled__default.default(designSystem.Box)`
 `;
 const Header$4 = styled__default.default(designSystem.Box)`
   background: linear-gradient(135deg, 
-    ${theme$3.colors.primary[600]} 0%, 
-    ${theme$3.colors.secondary[600]} 100%
+    ${"var(--colors-primary600, #0284C7)"} 0%, 
+    var(--colors-secondary600, #7C3AED) 100%
   );
   border-radius: ${theme$3.borderRadius.xl};
   padding: ${theme$3.spacing.xl} ${theme$3.spacing["2xl"]};
@@ -2003,7 +1971,7 @@ const StatsGrid$3 = styled__default.default.div`
   }
 `;
 const StatCard$3 = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$3.borderRadius.lg};
   padding: 28px ${theme$3.spacing.lg};
   position: relative;
@@ -2012,7 +1980,7 @@ const StatCard$3 = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$5} ${theme$3.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$3.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -2033,7 +2001,7 @@ const StatCard$3 = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme$3.shadows.xl};
-    border-color: ${(props) => props.$color || theme$3.colors.primary[500]};
+    border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -2041,7 +2009,7 @@ const StatCard$3 = styled__default.default(designSystem.Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || theme$3.colors.primary[600]};
+      color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -2052,7 +2020,7 @@ const StatIcon$3 = styled__default.default(designSystem.Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.$bg || theme$3.colors.primary[100]};
+  background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
   transition: all ${theme$3.transitions.normal};
   margin: 0 auto 20px;
   box-shadow: ${theme$3.shadows.sm};
@@ -2060,7 +2028,7 @@ const StatIcon$3 = styled__default.default(designSystem.Box)`
   svg {
     width: 34px;
     height: 34px;
-    color: ${(props) => props.$color || theme$3.colors.primary[600]};
+    color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
   }
   
   @media screen and (max-width: ${breakpoints$3.mobile}) {
@@ -2077,7 +2045,7 @@ const StatIcon$3 = styled__default.default(designSystem.Box)`
 const StatValue$3 = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme$3.transitions.normal};
@@ -2090,7 +2058,7 @@ const StatValue$3 = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel$3 = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -2103,9 +2071,9 @@ const AccountsContainer = styled__default.default(designSystem.Box)`
   margin-top: ${theme$3.spacing.xl};
 `;
 const EmptyState$3 = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$3.borderRadius.xl};
-  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -2123,7 +2091,7 @@ const EmptyState$3 = styled__default.default(designSystem.Box)`
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${theme$3.colors.secondary[50]} 100%);
+    background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, rgba(168, 85, 247, 0.06) 100%);
     opacity: 0.3;
     z-index: 0;
   }
@@ -2132,19 +2100,19 @@ const OnlineBadge$1 = styled__default.default.div`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? theme$3.colors.success[500] : props.theme.colors.neutral400};
+  background: ${(props) => props.$active ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
   display: inline-block;
   margin-right: 8px;
   ${styled.css`animation: ${(props) => props.$active ? pulse$2 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$3 = styled__default.default(designSystem.Table)`
   thead {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
+    background: var(--colors-neutral100);
+    border-bottom: 2px solid rgba(128, 128, 128, 0.2);
     
     th {
       font-weight: 600;
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -2154,30 +2122,30 @@ const StyledTable$3 = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme$3.transitions.fast};
-    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${(props) => props.theme.colors.primary100};
+      background: rgba(2, 132, 199, 0.12);
     }
     
     td {
       padding: ${theme$3.spacing.lg} ${theme$3.spacing.lg};
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       vertical-align: middle;
     }
   }
 `;
 const FilterBar$3 = styled__default.default(designSystem.Flex)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme$3.spacing.md} ${theme$3.spacing.lg};
   border-radius: ${theme$3.borderRadius.lg};
   margin-bottom: ${theme$3.spacing.lg};
   box-shadow: ${theme$3.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   gap: ${theme$3.spacing.md};
   align-items: center;
 `;
@@ -2192,27 +2160,27 @@ const SearchIcon$2 = styled__default.default(outline.MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   pointer-events: none;
 `;
 const StyledSearchInput$2 = styled__default.default.input`
   width: 100%;
   padding: 10px 12px 10px 40px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: ${theme$3.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme$3.transitions.fast};
-  background: ${(props) => props.theme.colors.neutral0};
-  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: var(--colors-neutral800);
   
   &:focus {
     outline: none;
-    border-color: ${theme$3.colors.primary[500]};
-    box-shadow: 0 0 0 2px ${theme$3.colors.primary[100]};
+    border-color: ${"var(--colors-primary600, #0EA5E9)"};
+    box-shadow: 0 0 0 2px ${"rgba(2, 132, 199, 0.12)"};
   }
   
   &::placeholder {
-    color: ${(props) => props.theme.colors.neutral500};
+    color: var(--colors-neutral500);
   }
 `;
 const StyledModalContent$1 = styled__default.default(designSystem.Modal.Content)`
@@ -2225,7 +2193,7 @@ const StyledModalContent$1 = styled__default.default(designSystem.Modal.Content)
 `;
 const StyledModalHeader$1 = styled__default.default(designSystem.Modal.Header)`
   && {
-    background: linear-gradient(135deg, ${theme$3.colors.primary[500]} 0%, ${theme$3.colors.secondary[500]} 100%);
+    background: linear-gradient(135deg, ${"var(--colors-primary600, #0EA5E9)"} 0%, var(--colors-secondary600, #A855F7) 100%);
     padding: 24px 28px;
     border-bottom: none;
     
@@ -2257,7 +2225,7 @@ const StyledModalHeader$1 = styled__default.default(designSystem.Modal.Header)`
 const StyledModalBody$1 = styled__default.default(designSystem.Modal.Body)`
   && {
     padding: 24px 28px;
-    background: ${(props) => props.theme.colors.neutral0};
+    background: ${(p) => p.theme.colors.neutral0};
     width: 100%;
     box-sizing: border-box;
   }
@@ -2265,13 +2233,13 @@ const StyledModalBody$1 = styled__default.default(designSystem.Modal.Body)`
 const StyledModalFooter$1 = styled__default.default(designSystem.Modal.Footer)`
   && {
     padding: 20px 28px;
-    border-top: 1px solid ${(props) => props.theme.colors.neutral200};
-    background: ${(props) => props.theme.colors.neutral100};
+    border-top: 1px solid rgba(128, 128, 128, 0.2);
+    background: var(--colors-neutral100);
   }
 `;
 const AccountInfoCard = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${theme$3.colors.secondary[50]} 100%);
-  border: 1px solid ${theme$3.colors.primary[200]};
+  background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, rgba(168, 85, 247, 0.06) 100%);
+  border: 1px solid ${"rgba(2, 132, 199, 0.2)"};
   border-radius: 12px;
   padding: 16px 20px;
   text-align: center;
@@ -2284,66 +2252,66 @@ const AccountInfoCard = styled__default.default(designSystem.Box)`
 `;
 const TestOptionCard = styled__default.default(designSystem.Box)`
   padding: 16px 20px;
-  border: 2px solid ${(props) => props.$selected ? theme$3.colors.primary[500] : props.theme.colors.neutral200};
+  border: 2px solid ${(props) => props.$selected ? "var(--colors-primary600, #0EA5E9)" : "rgba(128, 128, 128, 0.2)"};
   border-radius: 12px;
   cursor: pointer;
   transition: all ${theme$3.transitions.fast};
-  background: ${(props) => props.$selected ? theme$3.colors.primary[50] : props.theme.colors.neutral0};
+  background: ${(props) => props.$selected ? "rgba(2, 132, 199, 0.06)" : "${(p) => p.theme.colors.neutral0}"};
   
   &:hover {
-    border-color: ${theme$3.colors.primary[400]};
-    background: ${theme$3.colors.primary[50]};
+    border-color: ${"rgba(2, 132, 199, 0.4)"};
+    background: ${"rgba(2, 132, 199, 0.06)"};
   }
 `;
 const ModalFieldLabel = styled__default.default(designSystem.Typography)`
   font-size: 13px;
   font-weight: 600;
-  color: ${(props) => props.theme.colors.neutral700};
+  color: var(--colors-neutral700);
   margin-bottom: 8px;
   display: block;
 `;
 const ModalHint$1 = styled__default.default(designSystem.Typography)`
   font-size: 12px;
-  color: ${(props) => props.theme.colors.neutral500};
+  color: var(--colors-neutral500);
   margin-top: 6px;
 `;
 const StyledModalSelect = styled__default.default.select`
   width: 100%;
   padding: 12px 14px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 8px;
   font-size: 14px;
-  background: ${(props) => props.theme.colors.neutral0};
-  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: var(--colors-neutral800);
   cursor: pointer;
   transition: all ${theme$3.transitions.fast};
   box-sizing: border-box;
   
   &:focus {
     outline: none;
-    border-color: ${theme$3.colors.primary[500]};
-    box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
+    border-color: ${"var(--colors-primary600, #0EA5E9)"};
+    box-shadow: 0 0 0 3px ${"rgba(2, 132, 199, 0.12)"};
   }
 `;
 const StyledModalInput = styled__default.default.input`
   width: 100%;
   padding: 12px 14px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 8px;
   font-size: 14px;
-  background: ${(props) => props.theme.colors.neutral0};
-  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: var(--colors-neutral800);
   transition: all ${theme$3.transitions.fast};
   box-sizing: border-box;
   
   &:focus {
     outline: none;
-    border-color: ${theme$3.colors.primary[500]};
-    box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
+    border-color: ${"var(--colors-primary600, #0EA5E9)"};
+    box-shadow: 0 0 0 3px ${"rgba(2, 132, 199, 0.12)"};
   }
   
   &::placeholder {
-    color: ${(props) => props.theme.colors.neutral400};
+    color: rgba(128, 128, 128, 0.4);
   }
 `;
 const HomePage = () => {
@@ -2437,18 +2405,18 @@ const HomePage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle$3, { children: "Multi-account email management with smart routing and OAuth support" })
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid$3, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$3, { $delay: "0.1s", $color: theme$3.colors.primary[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$3, { className: "stat-icon", $bg: theme$3.colors.primary[100], $color: theme$3.colors.primary[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$3, { $delay: "0.1s", $color: "var(--colors-primary600, #0284C7)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$3, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$3, { className: "stat-value", children: totalSentToday }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$3, { children: "Emails Today" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$3, { $delay: "0.2s", $color: theme$3.colors.success[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$3, { className: "stat-icon", $bg: theme$3.colors.success[100], $color: theme$3.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.ServerIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$3, { $delay: "0.2s", $color: "var(--colors-success600, #16A34A)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$3, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ServerIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$3, { className: "stat-value", children: totalSent }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$3, { children: "Total Sent" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$3, { $delay: "0.3s", $color: theme$3.colors.warning[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$3, { className: "stat-icon", $bg: theme$3.colors.warning[100], $color: theme$3.colors.warning[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$3, { $delay: "0.3s", $color: "var(--colors-warning600, #D97706)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$3, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsxs(StatValue$3, { className: "stat-value", children: [
           activeAccounts,
           " / ",
@@ -2467,13 +2435,13 @@ const HomePage = () => {
               width: "120px",
               height: "120px",
               borderRadius: "50%",
-              background: `linear-gradient(135deg, ${theme$3.colors.primary[100]} 0%, ${theme$3.colors.secondary[100]} 100%)`,
+              background: `linear-gradient(135deg, ${"rgba(2, 132, 199, 0.12)"} 0%, rgba(168, 85, 247, 0.12) 100%)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               boxShadow: theme$3.shadows.xl
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, { style: { width: "60px", height: "60px", color: theme$3.colors.primary[600] } })
+            children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, { style: { width: "60px", height: "60px", color: "var(--colors-primary600, #0284C7)" } })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2617,7 +2585,7 @@ const HomePage = () => {
                       style: {
                         width: `${Math.min(usagePercent, 100)}%`,
                         height: "100%",
-                        background: isNearLimit ? theme$3.colors.danger[600] : theme$3.colors.success[600],
+                        background: isNearLimit ? "var(--colors-danger600, #DC2626)" : "var(--colors-success600, #16A34A)",
                         borderRadius: "999px"
                       }
                     }
@@ -2754,7 +2722,7 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
     /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader$1, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Test Email Account" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StyledModalBody$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AccountInfoCard, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { color: theme$3.colors.primary[600], fontWeight: 500 }, children: "Testing Account" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { color: "var(--colors-primary600, #0284C7)", fontWeight: 500 }, children: "Testing Account" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral800", style: { fontSize: "1.125rem", fontWeight: 700, marginTop: "4px" }, children: account.name }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "2px" }, children: account.fromEmail })
       ] }),
@@ -2782,9 +2750,9 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
             onClick: () => setTestMode("direct"),
             style: { marginBottom: "10px" },
             children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? theme$3.colors.primary[700] : "#374151" }, children: "Direct Test" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Direct Test" }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Send directly through this account" })
               ] })
             ] })
@@ -2796,16 +2764,16 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
             $selected: testMode === "strapi",
             onClick: () => setTestMode("strapi"),
             children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? theme$3.colors.primary[700] : "#374151" }, children: "Strapi Service Test" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Strapi Service Test" }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Verify MagicMail intercepts Strapi's email service" })
               ] })
             ] })
           }
         )
       ] }),
-      testMode === "direct" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px", padding: "16px", background: "#F9FAFB", borderRadius: "12px" }, children: [
+      testMode === "direct" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px", padding: "16px", background: "var(--colors-neutral100, #F9FAFB)", borderRadius: "12px" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { style: { marginBottom: "16px", fontSize: "14px" }, children: "Advanced Options" }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Priority" }),
@@ -2874,36 +2842,6 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
   ] }) });
 };
 const theme$2 = {
-  colors: {
-    primary: {
-      50: "#F0F9FF",
-      100: "#E0F2FE",
-      500: "#0EA5E9",
-      600: "#0284C7"
-    },
-    secondary: {
-      50: "#F5F3FF",
-      100: "#EDE9FE",
-      600: "#9333EA"
-    },
-    success: {
-      100: "#DCFCE7",
-      500: "#22C55E",
-      600: "#16A34A"
-    },
-    warning: {
-      100: "#FEF3C7",
-      600: "#D97706"
-    },
-    danger: {
-      100: "#FEE2E2",
-      600: "#DC2626"
-    },
-    neutral: {
-      100: "#F3F4F6",
-      200: "#E5E7EB"
-    }
-  },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
@@ -2967,8 +2905,8 @@ const Container$3 = styled__default.default(designSystem.Box)`
 `;
 const Header$3 = styled__default.default(designSystem.Box)`
   background: linear-gradient(135deg, 
-    ${theme$2.colors.secondary[600]} 0%, 
-    ${theme$2.colors.primary[600]} 100%
+    var(--colors-secondary600, #7C3AED) 0%, 
+    ${"var(--colors-primary600, #0284C7)"} 100%
   );
   border-radius: ${theme$2.borderRadius.xl};
   padding: ${theme$2.spacing.xl} ${theme$2.spacing["2xl"]};
@@ -3067,7 +3005,7 @@ const StatsGrid$2 = styled__default.default.div`
   }
 `;
 const StatCard$2 = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$2.borderRadius.lg};
   padding: 28px ${theme$2.spacing.lg};
   position: relative;
@@ -3076,7 +3014,7 @@ const StatCard$2 = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$4} ${theme$2.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$2.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -3097,7 +3035,7 @@ const StatCard$2 = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme$2.shadows.xl};
-    border-color: ${(props) => props.$color || theme$2.colors.primary[500]};
+    border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -3105,7 +3043,7 @@ const StatCard$2 = styled__default.default(designSystem.Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || theme$2.colors.primary[600]};
+      color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -3116,7 +3054,7 @@ const StatIcon$2 = styled__default.default(designSystem.Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.$bg || theme$2.colors.primary[100]};
+  background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
   transition: all ${theme$2.transitions.normal};
   margin: 0 auto 20px;
   box-shadow: ${theme$2.shadows.sm};
@@ -3124,7 +3062,7 @@ const StatIcon$2 = styled__default.default(designSystem.Box)`
   svg {
     width: 34px;
     height: 34px;
-    color: ${(props) => props.$color || theme$2.colors.primary[600]};
+    color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
   }
   
   @media screen and (max-width: ${breakpoints$2.mobile}) {
@@ -3141,7 +3079,7 @@ const StatIcon$2 = styled__default.default(designSystem.Box)`
 const StatValue$2 = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme$2.transitions.normal};
@@ -3154,7 +3092,7 @@ const StatValue$2 = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel$2 = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -3167,9 +3105,9 @@ const RulesContainer = styled__default.default(designSystem.Box)`
   margin-top: ${theme$2.spacing.xl};
 `;
 const EmptyState$2 = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$2.borderRadius.xl};
-  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -3187,7 +3125,7 @@ const EmptyState$2 = styled__default.default(designSystem.Box)`
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, ${theme$2.colors.secondary[50]} 0%, ${theme$2.colors.primary[50]} 100%);
+    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, ${"rgba(2, 132, 199, 0.06)"} 100%);
     opacity: 0.3;
     z-index: 0;
   }
@@ -3196,19 +3134,19 @@ const OnlineBadge = styled__default.default.div`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? theme$2.colors.success[500] : props.theme.colors.neutral400};
+  background: ${(props) => props.$active ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
   display: inline-block;
   margin-right: 8px;
   ${styled.css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$2 = styled__default.default(designSystem.Table)`
   thead {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
+    background: var(--colors-neutral100);
+    border-bottom: 2px solid rgba(128, 128, 128, 0.2);
     
     th {
       font-weight: 600;
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -3218,30 +3156,30 @@ const StyledTable$2 = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme$2.transitions.fast};
-    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${(props) => props.theme.colors.primary100};
+      background: rgba(2, 132, 199, 0.12);
     }
     
     td {
       padding: ${theme$2.spacing.lg} ${theme$2.spacing.lg};
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       vertical-align: middle;
     }
   }
 `;
 const FilterBar$2 = styled__default.default(designSystem.Flex)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme$2.spacing.md} ${theme$2.spacing.lg};
   border-radius: ${theme$2.borderRadius.lg};
   margin-bottom: ${theme$2.spacing.lg};
   box-shadow: ${theme$2.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   gap: ${theme$2.spacing.md};
   align-items: center;
 `;
@@ -3256,25 +3194,25 @@ const SearchIcon$1 = styled__default.default(outline.MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   pointer-events: none;
 `;
 const StyledSearchInput$1 = styled__default.default.input`
   width: 100%;
   padding: 10px 12px 10px 40px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: ${theme$2.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme$2.transitions.fast};
   
   &:focus {
     outline: none;
-    border-color: ${theme$2.colors.primary[500]};
-    box-shadow: 0 0 0 2px ${theme$2.colors.primary[100]};
+    border-color: ${"var(--colors-primary600, #0EA5E9)"};
+    box-shadow: 0 0 0 2px ${"rgba(2, 132, 199, 0.12)"};
   }
   
   &::placeholder {
-    color: ${(props) => props.theme.colors.neutral500};
+    color: var(--colors-neutral500);
   }
 `;
 const RoutingRulesPage = () => {
@@ -3349,18 +3287,18 @@ const RoutingRulesPage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle$2, { children: "Define intelligent routing rules to send emails through specific accounts based on conditions" })
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid$2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$2, { $delay: "0.1s", $color: theme$2.colors.secondary[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$2, { className: "stat-icon", $bg: theme$2.colors.secondary[100], $color: theme$2.colors.secondary[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$2, { $delay: "0.1s", $color: "var(--colors-secondary600, #7C3AED)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$2, { className: "stat-icon", $bg: "rgba(168, 85, 247, 0.12)", $color: "var(--colors-secondary600, #7C3AED)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$2, { className: "stat-value", children: totalRules }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$2, { children: "Total Rules" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$2, { $delay: "0.2s", $color: theme$2.colors.success[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$2, { className: "stat-icon", $bg: theme$2.colors.success[100], $color: theme$2.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$2, { $delay: "0.2s", $color: "var(--colors-success600, #16A34A)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$2, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$2, { className: "stat-value", children: activeRules }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$2, { children: "Active Rules" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$2, { $delay: "0.3s", $color: theme$2.colors.warning[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$2, { className: "stat-icon", $bg: theme$2.colors.warning[100], $color: theme$2.colors.warning[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$2, { $delay: "0.3s", $color: "var(--colors-warning600, #D97706)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$2, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$2, { className: "stat-value", children: highPriorityRules }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$2, { children: "High Priority" })
       ] })
@@ -3375,13 +3313,13 @@ const RoutingRulesPage = () => {
               width: "120px",
               height: "120px",
               borderRadius: "50%",
-              background: `linear-gradient(135deg, ${theme$2.colors.secondary[100]} 0%, ${theme$2.colors.primary[100]} 100%)`,
+              background: `linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, ${"rgba(2, 132, 199, 0.12)"} 100%)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               boxShadow: theme$2.shadows.xl
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, { style: { width: "60px", height: "60px", color: theme$2.colors.secondary[600] } })
+            children: /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, { style: { width: "60px", height: "60px", color: "var(--colors-secondary600, #7C3AED)" } })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3721,11 +3659,11 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
         designSystem.Box,
         {
           padding: 4,
-          background: formData.whatsappFallback ? theme$2.colors.success[100] : theme$2.colors.neutral[100],
+          background: formData.whatsappFallback ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
           hasRadius: true,
           style: {
             width: "100%",
-            border: formData.whatsappFallback ? `2px solid ${theme$2.colors.success[600]}` : `1px solid ${theme$2.colors.neutral[200]}`,
+            border: formData.whatsappFallback ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `1px solid ${"rgba(128, 128, 128, 0.2)"}`,
             borderRadius: theme$2.borderRadius.md,
             transition: "all 0.2s ease"
           },
@@ -3765,11 +3703,11 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
         designSystem.Box,
         {
           padding: 4,
-          background: formData.isActive ? theme$2.colors.success[100] : theme$2.colors.danger[100],
+          background: formData.isActive ? "rgba(22, 163, 74, 0.12)" : "rgba(220, 38, 38, 0.12)",
           hasRadius: true,
           style: {
             width: "100%",
-            border: formData.isActive ? `2px solid ${theme$2.colors.success[600]}` : `2px solid ${theme$2.colors.danger[600]}`,
+            border: formData.isActive ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `2px solid ${"var(--colors-danger600, #DC2626)"}`,
             borderRadius: theme$2.borderRadius.md,
             transition: "all 0.2s ease"
           },
@@ -3934,12 +3872,6 @@ const useLicense = () => {
   };
 };
 const theme$1 = {
-  colors: {
-    primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7", 700: "#0369A1" },
-    secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 500: "#A855F7", 600: "#9333EA" },
-    success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
-    warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" }
-  },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
     md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
@@ -3974,7 +3906,7 @@ const ScrollableDialogBody = styled__default.default(designSystem.Box)`
   overflow-y: auto;
   max-height: calc(85vh - 160px);
   padding: 24px 28px 28px 28px;
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
 
   /* Custom Scrollbar */
   &::-webkit-scrollbar {
@@ -3986,12 +3918,12 @@ const ScrollableDialogBody = styled__default.default(designSystem.Box)`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${(props) => props.theme.colors.neutral200};
+    background: rgba(128, 128, 128, 0.2);
     border-radius: 3px;
   }
   
   &::-webkit-scrollbar-thumb:hover {
-    background: ${(props) => props.theme.colors.neutral300};
+    background: rgba(128, 128, 128, 0.3);
   }
 `;
 styled__default.default(designSystem.Box)`
@@ -4009,13 +3941,13 @@ styled__default.default(designSystem.Flex)`
 styled__default.default(designSystem.Typography)`
   font-size: 15px;
   font-weight: 600;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   display: flex;
   align-items: center;
   gap: 8px;
 `;
 const RecommendedBadge = styled__default.default(designSystem.Badge)`
-  background: linear-gradient(135deg, ${theme$1.colors.success[500]}, ${theme$1.colors.success[600]});
+  background: linear-gradient(135deg, ${"var(--colors-success600, #22C55E)"}, ${"var(--colors-success600, #16A34A)"});
   color: white;
   padding: 4px 12px;
   font-size: 11px;
@@ -4105,15 +4037,15 @@ const CopyButton = styled__default.default(designSystem.Button)`
   }
 `;
 const InfoBox$1 = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${theme$1.colors.primary[50]}, ${theme$1.colors.primary[100]});
-  border-left: 4px solid ${theme$1.colors.primary[500]};
+  background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"}, ${"rgba(2, 132, 199, 0.12)"});
+  border-left: 4px solid ${"var(--colors-primary600, #0EA5E9)"};
   border-radius: 8px;
   padding: 16px;
   margin-top: 24px;
 `;
 const WarningBox = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${theme$1.colors.warning[50]}, ${theme$1.colors.warning[100]});
-  border-left: 4px solid ${theme$1.colors.warning[500]};
+  background: linear-gradient(135deg, ${"rgba(234, 179, 8, 0.06)"}, ${"rgba(234, 179, 8, 0.12)"});
+  border-left: 4px solid ${"var(--colors-warning600, #F59E0B)"};
   border-radius: 8px;
   padding: 12px 16px;
   margin-top: 12px;
@@ -4122,8 +4054,8 @@ const WarningBox = styled__default.default(designSystem.Box)`
   gap: 8px;
 `;
 const LimitWarning = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${theme$1.colors.warning[50]}, rgba(251, 191, 36, 0.1));
-  border: 1px solid ${theme$1.colors.warning[200]};
+  background: linear-gradient(135deg, ${"rgba(234, 179, 8, 0.06)"}, rgba(251, 191, 36, 0.1));
+  border: 1px solid rgba(234, 179, 8, 0.2);
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 24px;
@@ -4132,7 +4064,7 @@ const LimitWarning = styled__default.default(designSystem.Box)`
   justify-content: space-between;
 `;
 const UpgradeButton = styled__default.default(designSystem.Button)`
-  background: linear-gradient(135deg, ${theme$1.colors.warning[500]}, ${theme$1.colors.warning[600]});
+  background: linear-gradient(135deg, ${"var(--colors-warning600, #F59E0B)"}, ${"var(--colors-warning600, #D97706)"});
   color: white;
   font-weight: 600;
   padding: 8px 16px;
@@ -4142,7 +4074,7 @@ const UpgradeButton = styled__default.default(designSystem.Button)`
   gap: 6px;
   
   &:hover {
-    background: linear-gradient(135deg, ${theme$1.colors.warning[600]}, ${theme$1.colors.warning[700]});
+    background: linear-gradient(135deg, ${"var(--colors-warning600, #D97706)"}, ${"var(--colors-warning600, #A16207)"});
     transform: translateY(-1px);
   }
 `;
@@ -4163,8 +4095,8 @@ const Container$2 = styled__default.default(designSystem.Box)`
 `;
 const Header$2 = styled__default.default(designSystem.Box)`
   background: linear-gradient(135deg, 
-    ${theme$1.colors.secondary[600]} 0%, 
-    ${theme$1.colors.primary[600]} 100%
+    var(--colors-secondary600, #7C3AED) 0%, 
+    ${"var(--colors-primary600, #0284C7)"} 100%
   );
   border-radius: ${theme$1.borderRadius.xl};
   padding: ${theme$1.spacing.xl} ${theme$1.spacing["2xl"]};
@@ -4258,7 +4190,7 @@ const StatsGrid$1 = styled__default.default.div`
   }
 `;
 const StatCard$1 = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.lg};
   padding: 28px ${theme$1.spacing.lg};
   position: relative;
@@ -4267,7 +4199,7 @@ const StatCard$1 = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$3} ${theme$1.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$1.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -4288,7 +4220,7 @@ const StatCard$1 = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme$1.shadows.xl};
-    border-color: ${(props) => props.$color || theme$1.colors.primary[500]};
+    border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -4296,7 +4228,7 @@ const StatCard$1 = styled__default.default(designSystem.Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || theme$1.colors.primary[600]};
+      color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -4307,7 +4239,7 @@ const StatIcon$1 = styled__default.default(designSystem.Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.$bg || theme$1.colors.primary[100]};
+  background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
   transition: all ${theme$1.transitions.normal};
   margin: 0 auto 20px;
   box-shadow: ${theme$1.shadows.sm};
@@ -4315,7 +4247,7 @@ const StatIcon$1 = styled__default.default(designSystem.Box)`
   svg {
     width: 34px;
     height: 34px;
-    color: ${(props) => props.$color || theme$1.colors.primary[600]};
+    color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
   }
   
   @media screen and (max-width: ${breakpoints$1.mobile}) {
@@ -4332,7 +4264,7 @@ const StatIcon$1 = styled__default.default(designSystem.Box)`
 const StatValue$1 = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme$1.transitions.normal};
@@ -4345,7 +4277,7 @@ const StatValue$1 = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel$1 = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -4361,12 +4293,12 @@ const SectionHeader = styled__default.default(designSystem.Box)`
   margin-bottom: ${theme$1.spacing.md};
 `;
 const FilterBar$1 = styled__default.default(designSystem.Flex)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme$1.spacing.md} ${theme$1.spacing.lg};
   border-radius: ${theme$1.borderRadius.lg};
   margin-bottom: ${theme$1.spacing.lg};
   box-shadow: ${theme$1.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   gap: ${theme$1.spacing.md};
   align-items: center;
 `;
@@ -4381,7 +4313,7 @@ const SearchIcon = styled__default.default(outline.MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   pointer-events: none;
   z-index: 1;
 `;
@@ -4392,24 +4324,24 @@ const StyledSearchInput = styled__default.default(designSystem.TextInput)`
 const TableWrapper = styled__default.default(designSystem.Box)`
   overflow-x: auto;
   border-radius: ${theme$1.borderRadius.lg};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
-  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid rgba(128, 128, 128, 0.2);
+  background: ${(p) => p.theme.colors.neutral0};
   
   &::-webkit-scrollbar {
     height: 8px;
   }
   
   &::-webkit-scrollbar-track {
-    background: ${(props) => props.theme.colors.neutral100};
+    background: var(--colors-neutral100);
     border-radius: 4px;
   }
   
   &::-webkit-scrollbar-thumb {
-    background: ${(props) => props.theme.colors.neutral300};
+    background: rgba(128, 128, 128, 0.3);
     border-radius: 4px;
     
     &:hover {
-      background: ${(props) => props.theme.colors.neutral400};
+      background: rgba(128, 128, 128, 0.4);
     }
   }
 `;
@@ -4418,12 +4350,12 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
   min-width: 900px;
   
   thead {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
+    background: var(--colors-neutral100);
+    border-bottom: 2px solid rgba(128, 128, 128, 0.2);
     
     th {
       font-weight: 600;
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -4434,19 +4366,19 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme$1.transitions.fast};
-    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${(props) => props.theme.colors.primary100};
+      background: rgba(2, 132, 199, 0.12);
     }
     
     td {
       padding: 10px 12px;
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       vertical-align: middle;
       font-size: 13px;
     }
@@ -4454,14 +4386,14 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
 `;
 const PaginationWrapper = styled__default.default(designSystem.Flex)`
   padding: 16px 20px;
-  background: ${(props) => props.theme.colors.neutral100};
-  border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: var(--colors-neutral100);
+  border-top: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 0 0 ${theme$1.borderRadius.lg} ${theme$1.borderRadius.lg};
 `;
 const PaginationButton = styled__default.default.button`
-  background: ${(props) => props.active ? "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)" : "white"};
-  color: ${(props) => props.active ? "white" : props.theme.colors.neutral700};
-  border: 1px solid ${(props) => props.active ? "transparent" : props.theme.colors.neutral300};
+  background: ${(props) => props.active ? "linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%)" : "${(p) => p.theme.colors.neutral0}"};
+  color: ${(props) => props.active ? "white" : "var(--colors-neutral700)"};
+  border: 1px solid ${(props) => props.active ? "transparent" : "rgba(128, 128, 128, 0.3)"};
   padding: 6px 12px;
   min-width: 36px;
   height: 36px;
@@ -4472,8 +4404,8 @@ const PaginationButton = styled__default.default.button`
   transition: all 0.2s ease;
   
   &:hover:not(:disabled) {
-    background: ${(props) => props.active ? "linear-gradient(135deg, #0284C7 0%, #9333EA 100%)" : props.theme.colors.neutral100};
-    border-color: ${(props) => props.active ? "transparent" : props.theme.colors.neutral400};
+    background: ${(props) => props.active ? "linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%)" : "var(--colors-neutral100)"};
+    border-color: ${(props) => props.active ? "transparent" : "rgba(128, 128, 128, 0.4)"};
   }
   
   &:disabled {
@@ -4482,9 +4414,9 @@ const PaginationButton = styled__default.default.button`
   }
 `;
 const EmptyState$1 = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.xl};
-  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -4502,7 +4434,7 @@ const EmptyState$1 = styled__default.default(designSystem.Box)`
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, ${theme$1.colors.secondary[50]} 0%, ${theme$1.colors.primary[50]} 100%);
+    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, ${"rgba(2, 132, 199, 0.06)"} 100%);
     opacity: 0.3;
     z-index: 0;
   }
@@ -4518,7 +4450,7 @@ const EmptyIcon$1 = styled__default.default.div`
   height: 120px;
   margin: 0 auto ${theme$1.spacing.lg};
   border-radius: 50%;
-  background: linear-gradient(135deg, ${theme$1.colors.secondary[100]} 0%, ${theme$1.colors.primary[100]} 100%);
+  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, ${"rgba(2, 132, 199, 0.12)"} 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4527,7 +4459,7 @@ const EmptyIcon$1 = styled__default.default.div`
   svg {
     width: 60px;
     height: 60px;
-    color: ${theme$1.colors.primary[600]};
+    color: ${"var(--colors-primary600, #0284C7)"};
   }
 `;
 const EmptyFeatureList = styled__default.default.div`
@@ -4547,7 +4479,7 @@ const EmptyFeatureItem = styled__default.default.div`
   text-align: center;
   gap: ${theme$1.spacing.sm};
   padding: ${theme$1.spacing.lg};
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.md};
   box-shadow: ${theme$1.shadows.sm};
   transition: ${theme$1.transitions.fast};
@@ -4560,7 +4492,7 @@ const EmptyFeatureItem = styled__default.default.div`
   svg {
     width: 28px;
     height: 28px;
-    color: ${theme$1.colors.success[500]};
+    color: ${"var(--colors-success600, #22C55E)"};
     flex-shrink: 0;
     margin-bottom: ${theme$1.spacing.xs};
   }
@@ -4585,7 +4517,7 @@ const StyledModalContent = styled__default.default(designSystem.Modal.Content)`
 `;
 const StyledModalHeader = styled__default.default(designSystem.Modal.Header)`
   && {
-    background: linear-gradient(135deg, ${theme$1.colors.primary[500]} 0%, ${theme$1.colors.secondary[500]} 100%);
+    background: linear-gradient(135deg, ${"var(--colors-primary600, #0EA5E9)"} 0%, var(--colors-secondary600, #A855F7) 100%);
     padding: 24px 28px;
     border-bottom: none;
     
@@ -4621,7 +4553,7 @@ const StyledModalHeader = styled__default.default(designSystem.Modal.Header)`
 const StyledModalBody = styled__default.default(designSystem.Modal.Body)`
   && {
     padding: 28px;
-    background: ${(props) => props.theme.colors.neutral0};
+    background: ${(p) => p.theme.colors.neutral0};
   }
 `;
 const ModalField = styled__default.default(designSystem.Box)`
@@ -4635,7 +4567,7 @@ const ModalLabel = styled__default.default(designSystem.Typography)`
   && {
     font-weight: 600;
     font-size: 13px;
-    color: ${(props) => props.theme.colors.neutral700};
+    color: var(--colors-neutral700);
     margin-bottom: 8px;
     display: block;
   }
@@ -4643,49 +4575,49 @@ const ModalLabel = styled__default.default(designSystem.Typography)`
 const ModalHint = styled__default.default(designSystem.Typography)`
   && {
     font-size: 12px;
-    color: ${(props) => props.theme.colors.neutral600};
+    color: var(--colors-neutral600);
     margin-top: 6px;
     display: block;
   }
 `;
 const ModalTemplateInfo = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${theme$1.colors.primary[50]} 0%, ${theme$1.colors.secondary[50]} 100%);
-  border: 1px solid ${theme$1.colors.primary[100]};
+  background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, rgba(168, 85, 247, 0.06) 100%);
+  border: 1px solid ${"rgba(2, 132, 199, 0.12)"};
   border-radius: 10px;
   padding: 14px 16px;
   
   p {
     margin: 0;
     font-weight: 500;
-    color: ${(props) => props.theme.colors.neutral800};
+    color: var(--colors-neutral800);
   }
 `;
 const StyledSelect = styled__default.default.select`
   width: 100%;
   padding: 10px 14px;
   border-radius: 8px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   font-size: 14px;
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   cursor: pointer;
   transition: all ${theme$1.transitions.fast};
-  color: ${(props) => props.theme.colors.neutral700};
+  color: var(--colors-neutral700);
   
   &:hover {
-    border-color: ${theme$1.colors.primary[500]};
+    border-color: ${"var(--colors-primary600, #0EA5E9)"};
   }
   
   &:focus {
     outline: none;
-    border-color: ${theme$1.colors.primary[500]};
-    box-shadow: 0 0 0 3px ${theme$1.colors.primary[100]};
+    border-color: ${"var(--colors-primary600, #0EA5E9)"};
+    box-shadow: 0 0 0 3px ${"rgba(2, 132, 199, 0.12)"};
   }
 `;
 const StyledModalFooter = styled__default.default(designSystem.Modal.Footer)`
   && {
     padding: 20px 28px;
-    background: ${(props) => props.theme.colors.neutral100};
-    border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+    background: var(--colors-neutral100);
+    border-top: 1px solid rgba(128, 128, 128, 0.2);
     gap: 12px;
   }
 `;
@@ -5032,18 +4964,18 @@ const TemplateList = () => {
       ] }) })
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid$1, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$1, { $delay: "0.1s", $color: theme$1.colors.primary[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$1, { className: "stat-icon", $bg: theme$1.colors.primary[100], $color: theme$1.colors.primary[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentTextIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$1, { $delay: "0.1s", $color: "var(--colors-primary600, #0EA5E9)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$1, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentTextIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$1, { className: "stat-value", variant: "alpha", children: showSkeleton ? "..." : stats?.total || 0 }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$1, { variant: "pi", children: "Total Templates" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$1, { $delay: "0.2s", $color: theme$1.colors.success[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$1, { className: "stat-icon", $bg: theme$1.colors.success[100], $color: theme$1.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard$1, { $delay: "0.2s", $color: "var(--colors-success600, #22C55E)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$1, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$1, { className: "stat-value", variant: "alpha", children: showSkeleton ? "..." : stats?.active || 0 }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$1, { variant: "pi", children: "Active" })
       ] }),
-      limits?.emailTemplates && !limits.emailTemplates.unlimited && /* @__PURE__ */ jsxRuntime.jsxs(StatCard$1, { $delay: "0.3s", $color: theme$1.colors.warning[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$1, { className: "stat-icon", $bg: theme$1.colors.warning[100], $color: theme$1.colors.warning[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
+      limits?.emailTemplates && !limits.emailTemplates.unlimited && /* @__PURE__ */ jsxRuntime.jsxs(StatCard$1, { $delay: "0.3s", $color: "var(--colors-warning600, #F59E0B)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon$1, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue$1, { className: "stat-value", variant: "alpha", children: showSkeleton ? "..." : limits.emailTemplates.max - limits.emailTemplates.current }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel$1, { variant: "pi", children: "Remaining" })
       ] })
@@ -5051,7 +4983,7 @@ const TemplateList = () => {
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { margin: "0 -32px 32px -32px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
     limits?.emailTemplates && !limits.emailTemplates.unlimited && limits.emailTemplates.current >= limits.emailTemplates.max * 0.8 && /* @__PURE__ */ jsxRuntime.jsxs(LimitWarning, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 24, height: 24, color: theme$1.colors.warning[600] } }),
+        /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 24, height: 24, color: "var(--colors-warning600, #D97706)" } }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: limits.emailTemplates.current >= limits.emailTemplates.max ? `You've reached your ${getTierInfo().name} limit!` : `You're approaching your ${getTierInfo().name} limit!` }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px" }, children: [
@@ -5356,10 +5288,10 @@ const TemplateList = () => {
               padding: "80px 32px",
               textAlign: "center",
               borderRadius: theme$1.borderRadius.lg,
-              border: "1px dashed #D1D5DB"
+              border: "1px dashed rgba(128, 128, 128, 0.2)"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: "var(--colors-neutral500)" } }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral700", style: { marginBottom: "8px" }, children: "No templates found" }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Try adjusting your search or filters" }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -5383,7 +5315,7 @@ const TemplateList = () => {
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Core Email Templates" }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Design the default Strapi system emails (Password Reset & Email Confirmation)" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: "1px solid #E5E7EB", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 2, rowCount: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: "1px solid rgba(128, 128, 128, 0.2)", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 2, rowCount: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Email Type" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Actions" }) }) })
@@ -5421,20 +5353,20 @@ const TemplateList = () => {
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(ScrollableDialogBody, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Template ID:" }),
             " #",
             selectedTemplate.templateReferenceId
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Status:" }),
             " ",
             selectedTemplate.isActive ? "Active" : "Inactive"
           ] })
         ] }) }),
         !selectedTemplate.isActive && /* @__PURE__ */ jsxRuntime.jsxs(WarningBox, { style: { marginTop: 0, marginBottom: "20px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: theme$1.colors.warning[600] } }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.warning[700], fontWeight: 500 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: "var(--colors-warning600, #D97706)" } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: "var(--colors-warning600, #A16207)", fontWeight: 500 }, children: [
             "This template is currently ",
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "INACTIVE" }),
             " and will not be sent."
@@ -5442,7 +5374,7 @@ const TemplateList = () => {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Root, { defaultValue: "native", collapsible: true, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "native", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: theme$1.colors.success[600] } }), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-success600, #16A34A)" } }), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
               "Native Strapi Email Service",
               /* @__PURE__ */ jsxRuntime.jsx(RecommendedBadge, { children: "Recommended" })
             ] }) }) }),
@@ -5492,7 +5424,7 @@ const TemplateList = () => {
             ] }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "plugin", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 16, height: 16, color: theme$1.colors.primary[600] } }), children: "MagicMail Plugin Service" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 16, height: 16, color: "var(--colors-primary600, #0284C7)" } }), children: "MagicMail Plugin Service" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "Direct access to the MagicMail service for advanced options." }),
               /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
@@ -5540,7 +5472,7 @@ const TemplateList = () => {
             ] }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "rest", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 16, height: 16, color: theme$1.colors.secondary[600] } }), children: "REST API (cURL)" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 16, height: 16, color: "var(--colors-secondary600, #7C3AED)" } }), children: "REST API (cURL)" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "For external applications, frontend calls, or Postman tests." }),
               /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
@@ -5741,11 +5673,11 @@ const Container$1 = styled__default.default.div`
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: ${(props) => props.theme.colors.neutral100};
+  background: var(--colors-neutral100);
 `;
 const Header$1 = styled__default.default.div`
   padding: 24px;
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 `;
 const HeaderRow = styled__default.default.div`
@@ -5785,8 +5717,8 @@ const ToggleWrapper = styled__default.default.div`
   
   /* Custom green styling for active toggle */
   button[aria-checked="true"] {
-    background-color: #22C55E !important;
-    border-color: #22C55E !important;
+    background-color: var(--colors-success600, #22C55E) !important;
+    border-color: var(--colors-success600, #22C55E) !important;
     
     span {
       background-color: white !important;
@@ -5794,8 +5726,8 @@ const ToggleWrapper = styled__default.default.div`
   }
   
   button[aria-checked="false"] {
-    background-color: #E5E7EB !important;
-    border-color: #D1D5DB !important;
+    background-color: var(--colors-neutral200, rgba(128, 128, 128, 0.2)) !important;
+    border-color: rgba(128, 128, 128, 0.2) !important;
     
     span {
       background-color: white !important;
@@ -5804,7 +5736,7 @@ const ToggleWrapper = styled__default.default.div`
   
   /* Label styling based on state */
   p {
-    color: ${(props) => props.$isActive ? "#22C55E" : "#6B7280"};
+    color: ${(props) => props.$isActive ? "var(--colors-success600, #22C55E)" : "var(--colors-neutral600, #6B7280)"};
     font-weight: 600;
     transition: color 0.2s;
   }
@@ -5816,8 +5748,8 @@ const TabsWrapper = styled__default.default.div`
 `;
 const TabListWrapper = styled__default.default.div`
   padding: 0 24px;
-  background: ${(props) => props.theme.colors.neutral0};
-  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(p) => p.theme.colors.neutral0};
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
 `;
 const StyledTabsRoot = styled__default.default(designSystem.Tabs.Root)`
   display: flex;
@@ -5831,7 +5763,7 @@ const StyledTabsContent = styled__default.default(designSystem.Tabs.Content)`
 `;
 const TabContentWrapper = styled__default.default.div`
   height: calc(100vh - 240px);
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   position: relative;
 `;
 const TextTabContent = styled__default.default.div`
@@ -5863,7 +5795,7 @@ const HiddenInput = styled__default.default.input`
   display: none;
 `;
 const SaveButton = styled__default.default(designSystem.Button)`
-  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+  background: linear-gradient(135deg, var(--colors-success600, #22C55E) 0%, var(--colors-success700, #16A34A) 100%);
   border: none;
   color: white;
   font-weight: 600;
@@ -5876,7 +5808,7 @@ const SaveButton = styled__default.default(designSystem.Button)`
   &:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
-    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
+    background: linear-gradient(135deg, var(--colors-success700, #16A34A) 0%, var(--colors-success800, #15803D) 100%);
   }
 
   &:active {
@@ -5903,10 +5835,10 @@ const ImportExportButton = styled__default.default.span`
   gap: 6px;
   padding: 8px 16px;
   height: 36px;
-  background: ${(props) => props.theme.colors.neutral0};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(p) => p.theme.colors.neutral0};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 4px;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   font-weight: 500;
   font-size: 13px;
   cursor: pointer;
@@ -5914,9 +5846,9 @@ const ImportExportButton = styled__default.default.span`
   white-space: nowrap;
 
   &:hover {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-color: ${(props) => props.theme.colors.primary600};
-    color: ${(props) => props.theme.colors.primary600};
+    background: var(--colors-neutral100);
+    border-color: var(--colors-primary600, #0284C7);
+    color: var(--colors-primary600, #0284C7);
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
@@ -5935,8 +5867,8 @@ const ImportLabel = styled__default.default.label`
   display: inline-block;
 `;
 const BackButton = styled__default.default.button`
-  background: ${(props) => props.theme.colors.neutral0};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(p) => p.theme.colors.neutral0};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 4px;
   padding: 8px 10px;
   height: 36px;
@@ -5947,8 +5879,8 @@ const BackButton = styled__default.default.button`
   transition: all 200ms;
 
   &:hover {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-color: ${(props) => props.theme.colors.neutral300};
+    background: var(--colors-neutral100);
+    border-color: rgba(128, 128, 128, 0.3);
     transform: translateY(-1px);
   }
 
@@ -5962,8 +5894,8 @@ const BackButton = styled__default.default.button`
   }
 `;
 const VersionButton = styled__default.default.button`
-  background: ${(props) => props.theme.colors.neutral0};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(p) => p.theme.colors.neutral0};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 4px;
   padding: 8px 16px;
   height: 36px;
@@ -5975,13 +5907,13 @@ const VersionButton = styled__default.default.button`
   transition: all 200ms;
   font-size: 13px;
   font-weight: 500;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   white-space: nowrap;
 
   &:hover {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-color: ${(props) => props.theme.colors.primary600};
-    color: ${(props) => props.theme.colors.primary600};
+    background: var(--colors-neutral100);
+    border-color: var(--colors-primary600, #0284C7);
+    color: var(--colors-primary600, #0284C7);
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
@@ -6001,7 +5933,7 @@ const VersionModal = styled__default.default.div`
   right: ${(props) => props.$isOpen ? "0" : "-450px"};
   width: 450px;
   height: 100vh;
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
   z-index: 9999;
   transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -6022,7 +5954,7 @@ const VersionModalOverlay = styled__default.default.div`
 `;
 const VersionModalHeader = styled__default.default.div`
   padding: 24px;
-  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -6034,13 +5966,13 @@ const VersionModalContent = styled__default.default.div`
 `;
 const VersionItem = styled__default.default.div`
   padding: 16px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 8px;
   margin-bottom: 12px;
   transition: all 150ms;
   
   &:hover {
-    border-color: ${(props) => props.theme.colors.primary600};
+    border-color: var(--colors-primary600, #0284C7);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
 `;
@@ -6052,13 +5984,13 @@ const VersionItemHeader = styled__default.default.div`
 `;
 const VersionNumber = styled__default.default.div`
   font-weight: 600;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   display: flex;
   align-items: center;
   gap: 8px;
 `;
 const VersionBadge = styled__default.default.span`
-  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
+  background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-primary700, #0284C7) 100%);
   color: white;
   padding: 2px 8px;
   border-radius: 4px;
@@ -6067,11 +5999,11 @@ const VersionBadge = styled__default.default.span`
 `;
 const VersionDate = styled__default.default.div`
   font-size: 13px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
 `;
 const VersionMeta = styled__default.default.div`
   font-size: 13px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   margin-bottom: 12px;
 `;
 const VersionActions = styled__default.default.div`
@@ -6079,14 +6011,14 @@ const VersionActions = styled__default.default.div`
   gap: 8px;
 `;
 const RestoreButton = styled__default.default(designSystem.Button)`
-  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+  background: linear-gradient(135deg, var(--colors-success600, #22C55E) 0%, var(--colors-success700, #16A34A) 100%);
   border: none;
   color: white;
   font-size: 13px;
   padding: 8px 16px;
   
   &:hover {
-    background: linear-gradient(135deg, #4ADE80 0%, #22C55E 100%);
+    background: linear-gradient(135deg, var(--colors-success400, #4ADE80) 0%, var(--colors-success600, #22C55E) 100%);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
     border-color: transparent;
@@ -6098,14 +6030,14 @@ const RestoreButton = styled__default.default(designSystem.Button)`
   }
 `;
 const DeleteButton = styled__default.default(designSystem.Button)`
-  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+  background: linear-gradient(135deg, var(--colors-danger500, #EF4444) 0%, var(--colors-danger600, #DC2626) 100%);
   border: none;
   color: white;
   font-size: 13px;
   padding: 8px 16px;
   
   &:hover {
-    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
+    background: linear-gradient(135deg, var(--colors-danger400, #F87171) 0%, var(--colors-danger500, #EF4444) 100%);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
     border-color: transparent;
@@ -6124,12 +6056,12 @@ const CloseButton$1 = styled__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   transition: all 150ms;
   
   &:hover {
-    color: ${(props) => props.theme.colors.neutral800};
-    background: ${(props) => props.theme.colors.neutral100};
+    color: var(--colors-neutral800);
+    background: var(--colors-neutral100);
     border-radius: 4px;
   }
   
@@ -6141,7 +6073,7 @@ const CloseButton$1 = styled__default.default.button`
 const EmptyVersions = styled__default.default.div`
   text-align: center;
   padding: 60px 20px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6151,7 +6083,7 @@ const EmptyVersions = styled__default.default.div`
     width: 64px;
     height: 64px;
     margin-bottom: 16px;
-    color: ${(props) => props.theme.colors.neutral300};
+    color: rgba(128, 128, 128, 0.3);
   }
 `;
 const EditorPage = () => {
@@ -6777,9 +6709,9 @@ const EditorPage = () => {
     /* @__PURE__ */ jsxRuntime.jsxs(VersionModal, { $isOpen: showVersionHistory, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VersionModalHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { style: { width: 20, height: 20, color: "#32324d" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { style: { width: 20, height: 20, color: "var(--colors-neutral800, #32324d)" } }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Version History" }),
-          versions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "12px", color: "#666687", marginLeft: "8px" }, children: [
+          versions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "12px", color: "var(--colors-neutral600, #666687)", marginLeft: "8px" }, children: [
             "(",
             versions.length,
             ")"
@@ -6849,12 +6781,6 @@ const EditorPage = () => {
   ] });
 };
 const theme = {
-  colors: {
-    primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7" },
-    secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 600: "#9333EA" },
-    success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
-    danger: { 100: "#FEE2E2", 500: "#EF4444", 600: "#DC2626" }
-  },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
     md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
@@ -6892,8 +6818,8 @@ const Container = styled__default.default(designSystem.Box)`
 `;
 const Header = styled__default.default(designSystem.Box)`
   background: linear-gradient(135deg, 
-    ${theme.colors.secondary[600]} 0%, 
-    ${theme.colors.primary[600]} 100%
+    var(--colors-secondary600, #7C3AED) 0%, 
+    ${"var(--colors-primary600, #0284C7)"} 100%
   );
   border-radius: ${theme.borderRadius.xl};
   padding: ${theme.spacing.xl} ${theme.spacing["2xl"]};
@@ -6987,7 +6913,7 @@ const StatsGrid = styled__default.default.div`
   }
 `;
 const StatCard = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -6996,7 +6922,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$2} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -7017,7 +6943,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme.shadows.xl};
-    border-color: ${(props) => props.$color || theme.colors.primary[500]};
+    border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -7025,7 +6951,7 @@ const StatCard = styled__default.default(designSystem.Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || theme.colors.primary[600]};
+      color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -7037,13 +6963,13 @@ const StatIcon = styled__default.default(designSystem.Box)`
   align-items: center;
   justify-content: center;
   margin-bottom: ${theme.spacing.md};
-  background: ${(props) => props.$bg || theme.colors.primary[100]};
+  background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
   transition: all ${theme.transitions.normal};
   
   svg {
     width: 32px;
     height: 32px;
-    color: ${(props) => props.$color || theme.colors.primary[600]};
+    color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
   }
   
   @media screen and (max-width: ${breakpoints.mobile}) {
@@ -7060,7 +6986,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
 const StatValue = styled__default.default(designSystem.Typography)`
   font-size: 2.25rem;
   font-weight: 700;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   transition: all ${theme.transitions.normal};
   line-height: 1;
   margin-bottom: ${theme.spacing.xs};
@@ -7071,7 +6997,7 @@ const StatValue = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel = styled__default.default(designSystem.Typography)`
   font-size: 0.875rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -7081,21 +7007,21 @@ const StatLabel = styled__default.default(designSystem.Typography)`
   }
 `;
 const FilterBar = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: ${theme.spacing.lg} ${theme.spacing.xl};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
 `;
 const StyledTable = styled__default.default(designSystem.Table)`
   thead {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
+    background: var(--colors-neutral100);
+    border-bottom: 2px solid rgba(128, 128, 128, 0.2);
     
     th {
       font-weight: 600;
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -7105,35 +7031,35 @@ const StyledTable = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${(props) => props.theme.colors.primary100};
+      background: rgba(2, 132, 199, 0.12);
     }
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       vertical-align: middle;
     }
   }
 `;
 const TableContainer = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   box-shadow: ${theme.shadows.md};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   overflow: hidden;
   margin-bottom: ${theme.spacing.xl};
 `;
 const EmptyState = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
-  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -7150,7 +7076,7 @@ const EmptyState = styled__default.default(designSystem.Box)`
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, ${theme.colors.secondary[50]} 0%, ${theme.colors.primary[50]} 100%);
+    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, ${"rgba(2, 132, 199, 0.06)"} 100%);
     opacity: 0.3;
     z-index: 0;
   }
@@ -7166,7 +7092,7 @@ const EmptyIcon = styled__default.default.div`
   height: 120px;
   margin: 0 auto ${theme.spacing.lg};
   border-radius: 50%;
-  background: linear-gradient(135deg, ${theme.colors.secondary[100]} 0%, ${theme.colors.primary[100]} 100%);
+  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, ${"rgba(2, 132, 199, 0.12)"} 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7175,7 +7101,7 @@ const EmptyIcon = styled__default.default.div`
   svg {
     width: 60px;
     height: 60px;
-    color: ${theme.colors.primary[600]};
+    color: ${"var(--colors-primary600, #0284C7)"};
   }
 `;
 const Analytics = () => {
@@ -7291,23 +7217,23 @@ const Analytics = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { variant: "epsilon", children: "Track your email performance and engagement" })
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.primary[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.1s", $color: "var(--colors-primary600, #0EA5E9)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: stats?.totalSent || 0 }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Total Sent" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.success[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeOpenIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.2s", $color: "var(--colors-success600, #22C55E)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeOpenIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: stats?.totalOpened || 0 }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Opened" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.primary[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.CursorArrowRaysIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.3s", $color: "var(--colors-primary600, #0EA5E9)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CursorArrowRaysIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: stats?.totalClicked || 0 }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Clicked" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.4s", $color: theme.colors.danger[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.danger[100], $color: theme.colors.danger[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.4s", $color: "var(--colors-danger600, #EF4444)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(220, 38, 38, 0.12)", $color: "var(--colors-danger600, #DC2626)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: stats?.totalBounced || 0 }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Bounced" })
       ] })
@@ -7362,25 +7288,25 @@ const Analytics = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: log.templateName || "-" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: formatDate(log.sentAt) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: log.openCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: theme.colors.success[600] } }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "semiBold", style: { color: theme.colors.success[600] }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-success600, #16A34A)" } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "semiBold", style: { color: "var(--colors-success600, #16A34A)" }, children: [
             log.openCount,
             " ",
             log.openCount === 1 ? "time" : "times"
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-neutral500)" } }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "No" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: log.clickCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: theme.colors.primary[600] } }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "semiBold", style: { color: theme.colors.primary[600] }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-primary600, #0284C7)" } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "semiBold", style: { color: "var(--colors-primary600, #0284C7)" }, children: [
             log.clickCount,
             " ",
             log.clickCount === 1 ? "time" : "times"
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-neutral500)" } }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "No" })
         ] }) })
       ] }, log.id)) })
@@ -7446,17 +7372,16 @@ const spin = styled.keyframes`
 const colors = {
   whatsapp: "#25D366",
   whatsappDark: "#128C7E",
-  whatsappLight: "#DCF8C6",
+  whatsappLight: "rgba(37, 211, 102, 0.2)",
   primary: "#4945ff",
-  primaryLight: "#f0f0ff",
+  primaryLight: "rgba(73, 69, 255, 0.06)",
   success: "#5cb176",
-  successLight: "#eafaf1",
+  successLight: "rgba(92, 177, 118, 0.12)",
   danger: "#d02b20",
   neutral: "#8e8ea9",
-  neutralLight: "#f6f6f9",
-  white: "#ffffff",
-  border: "#dcdce4",
-  textLight: "#666687"
+  neutralLight: "rgba(142, 142, 169, 0.08)",
+  border: "rgba(128, 128, 128, 0.2)",
+  textLight: "var(--colors-neutral600, #666687)"
 };
 const PageContainer = styled__default.default(designSystem.Box)`
   padding: 40px;
@@ -7517,8 +7442,8 @@ const StepDot = styled__default.default.div`
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.white};
-  color: ${(props) => props.$active || props.$completed ? colors.white : colors.textLight};
+  background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : props.theme.colors.neutral0};
+  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors.textLight};
   border: 4px solid ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.border};
   display: flex;
   align-items: center;
@@ -7549,7 +7474,7 @@ const StepLabel = styled__default.default(designSystem.Typography)`
   transition: all 0.3s ease;
 `;
 const ContentCard = styled__default.default(designSystem.Box)`
-  background: ${colors.white};
+  background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid ${colors.border};
   border-radius: 16px;
   padding: 32px;
@@ -7625,14 +7550,14 @@ const ConnectedCard = styled__default.default(designSystem.Box)`
   text-align: center;
 `;
 const InfoBox = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${colors.whatsappLight} 100%);
-  border: 1px solid ${theme$3.colors.primary[200]};
+  background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, ${colors.whatsappLight} 100%);
+  border: 1px solid rgba(2, 132, 199, 0.2);
   border-radius: 12px;
   padding: 24px;
   margin: 20px 0;
 `;
 const TestSection = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${colors.whatsappLight} 0%, #E8F5E9 100%);
+  background: linear-gradient(135deg, ${colors.whatsappLight} 0%, rgba(34, 197, 94, 0.1) 100%);
   border: 1px solid ${colors.whatsapp}40;
   border-radius: 16px;
   padding: 24px;
@@ -7641,11 +7566,11 @@ const TestSection = styled__default.default(designSystem.Box)`
 const WhatsAppInput = styled__default.default.input`
   width: 100%;
   padding: 14px 16px;
-  border: 2px solid ${(props) => props.theme.colors.neutral200};
+  border: 2px solid rgba(128, 128, 128, 0.2);
   border-radius: 12px;
   font-size: 15px;
-  background: white;
-  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: var(--colors-neutral800);
   transition: all 0.2s ease;
   box-sizing: border-box;
   
@@ -7656,17 +7581,17 @@ const WhatsAppInput = styled__default.default.input`
   }
   
   &::placeholder {
-    color: ${(props) => props.theme.colors.neutral400};
+    color: rgba(128, 128, 128, 0.4);
   }
 `;
 const WhatsAppTextarea = styled__default.default.textarea`
   width: 100%;
   padding: 14px 16px;
-  border: 2px solid ${(props) => props.theme.colors.neutral200};
+  border: 2px solid rgba(128, 128, 128, 0.2);
   border-radius: 12px;
   font-size: 15px;
-  background: white;
-  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: var(--colors-neutral800);
   transition: all 0.2s ease;
   box-sizing: border-box;
   resize: vertical;
@@ -7680,7 +7605,7 @@ const WhatsAppTextarea = styled__default.default.textarea`
   }
   
   &::placeholder {
-    color: ${(props) => props.theme.colors.neutral400};
+    color: rgba(128, 128, 128, 0.4);
   }
 `;
 const InputLabel = styled__default.default.label`
@@ -7694,7 +7619,7 @@ const InputLabel = styled__default.default.label`
 `;
 const InputHint = styled__default.default.span`
   font-size: 12px;
-  color: ${(props) => props.theme.colors.neutral500};
+  color: var(--colors-neutral500);
   margin-top: 6px;
   display: block;
 `;
@@ -7706,7 +7631,7 @@ const MessageSymbol = styled__default.default.span`
   font-size: 16px;
 `;
 const UseCaseCard = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${colors.whatsappLight}, ${theme$3.colors.primary[50]});
+  background: linear-gradient(135deg, ${colors.whatsappLight}, rgba(2, 132, 199, 0.06));
   border: 2px solid ${colors.whatsapp};
   border-radius: 16px;
   padding: 24px;
@@ -7715,11 +7640,11 @@ const UseCaseCard = styled__default.default(designSystem.Box)`
 const ButtonRow = styled__default.default(designSystem.Flex)`
   margin-top: 32px;
   padding-top: 24px;
-  border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-top: 1px solid rgba(128, 128, 128, 0.2);
 `;
 const AlertBox = styled__default.default(designSystem.Box)`
-  background: ${theme$3.colors.primary[50]};
-  border: 1px solid ${theme$3.colors.primary[200]};
+  background: rgba(2, 132, 199, 0.06);
+  border: 1px solid rgba(2, 132, 199, 0.2);
   border-radius: 12px;
   padding: 16px 20px;
   margin-top: 20px;
@@ -7731,7 +7656,7 @@ const AlertIcon = styled__default.default.div`
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: ${theme$3.colors.primary[500]};
+  background: var(--colors-primary600, #0EA5E9);
   color: white;
   display: flex;
   align-items: center;
@@ -7741,8 +7666,8 @@ const AlertIcon = styled__default.default.div`
   flex-shrink: 0;
 `;
 const SuccessBox = styled__default.default(designSystem.Box)`
-  background: ${theme$3.colors.success[50]};
-  border: 1px solid ${theme$3.colors.success[200]};
+  background: rgba(22, 163, 74, 0.06);
+  border: 1px solid rgba(22, 163, 74, 0.2);
   border-radius: 12px;
   padding: 16px 20px;
   display: flex;
@@ -7753,7 +7678,7 @@ const SuccessIcon = styled__default.default.div`
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: ${theme$3.colors.success[500]};
+  background: var(--colors-success600, #22C55E);
   color: white;
   display: flex;
   align-items: center;
@@ -7770,8 +7695,8 @@ const WhatsAppButton = styled__default.default(StyledButtons.GradientButton)`
   }
 `;
 const NotInstalledCard = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, #FEF3C7, #FEE2E2);
-  border: 2px solid #F59E0B;
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(220, 38, 38, 0.12));
+  border: 2px solid var(--colors-warning600, #F59E0B);
   border-radius: 16px;
   padding: 32px;
   text-align: center;
@@ -8004,7 +7929,7 @@ const WhatsAppPage = () => {
       isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(SuccessBox, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: 14, height: 14 } }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: theme$3.colors.success[700] }, children: "Dependencies Installed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: "var(--colors-success600, #15803D)" }, children: "Dependencies Installed" }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." })
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(NotInstalledCard, { children: [
@@ -8053,7 +7978,7 @@ const WhatsAppPage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Click the button below to start the connection process. A QR code will be generated for you to scan." }),
       /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "How it works" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "How it works" }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "2. Open WhatsApp on your phone" }),
@@ -8099,7 +8024,7 @@ const WhatsAppPage = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "Generating QR code..." })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "Instructions" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "Instructions" }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "2. Tap Menu or Settings" }),
@@ -8256,7 +8181,7 @@ const ModalOverlay = styled__default.default.div`
   padding: 20px;
 `;
 const ModalContent = styled__default.default(designSystem.Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -8265,7 +8190,7 @@ const ModalContent = styled__default.default(designSystem.Box)`
   overflow: hidden;
 `;
 const GradientHeader = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+  background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
   padding: 32px 40px;
   position: relative;
   overflow: hidden;
@@ -8331,7 +8256,7 @@ const CloseButton = styled__default.default.button`
 `;
 const GradientButton = styled__default.default(designSystem.Button)`
   && {
-    background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+    background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
     color: white;
     font-weight: 600;
     border: none;
@@ -8340,7 +8265,7 @@ const GradientButton = styled__default.default(designSystem.Button)`
     min-height: 44px;
     
     &:hover:not(:disabled) {
-      background: linear-gradient(135deg, #0284C7 0%, #9333EA 100%);
+      background: linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%);
       box-shadow: 0 6px 16px rgba(14, 165, 233, 0.5);
     }
     
@@ -8352,22 +8277,22 @@ const GradientButton = styled__default.default(designSystem.Button)`
 `;
 styled__default.default(designSystem.Button)`
   && {
-    background: #f0f9ff;
-    color: #0EA5E9;
+    background: rgba(14, 165, 233, 0.06);
+    color: var(--colors-primary600, #0EA5E9);
     font-weight: 600;
-    border: 2px solid #0EA5E9;
+    border: 2px solid var(--colors-primary600, #0EA5E9);
     padding: 12px 24px;
     min-height: 44px;
     
     &:hover:not(:disabled) {
-      background: #e0f2fe;
+      background: rgba(14, 165, 233, 0.12);
     }
   }
 `;
 const ToggleButton = styled__default.default.button`
   background: none;
   border: none;
-  color: #0EA5E9;
+  color: var(--colors-primary600, #0EA5E9);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -8376,7 +8301,7 @@ const ToggleButton = styled__default.default.button`
   transition: color 0.2s;
   
   &:hover {
-    color: #A855F7;
+    color: var(--colors-secondary600, #A855F7);
   }
   
   &:disabled {
@@ -8547,7 +8472,7 @@ const LicenseGuard = ({ children }) => {
             padding: 4,
             style: {
               borderRadius: "8px",
-              border: "2px solid #BAE6FD",
+              border: "2px solid rgba(14, 165, 233, 0.3)",
               width: "100%"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: useExistingKey ? "🔑 Enter your email and license key to activate." : adminUser && adminUser.email ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})` : '✨ Click "Activate" to auto-create a license with your admin account' })
@@ -8611,7 +8536,7 @@ const LicenseGuard = ({ children }) => {
               padding: 5,
               style: {
                 borderRadius: "8px",
-                border: "2px solid #DCFCE7",
+                border: "2px solid rgba(34, 197, 94, 0.3)",
                 textAlign: "center"
               },
               children: [