@sonordev/site-kit 1.5.4 → 2.0.0

package/dist/{chunk-WW7UM7XY.js → chunk-TZAD7CZD.js}

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var chunkFTSXKDP3_js = require('./chunk-FTSXKDP3.js');
+var chunkRO6DHV6S_js = require('./chunk-RO6DHV6S.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React5 = require('react');
 
@@ -289,7 +289,7 @@ async function fetchActiveProcessor() {
 }
 async function registerForEvent(eventId, scheduleId, customer) {
   const { apiUrl, apiKey } = getApiConfig();
-  const analyticsSessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null;
+  const analyticsSessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null;
   try {
     const response = await fetch(`${apiUrl}/api/public/commerce/register`, {
       method: "POST",
@@ -360,7 +360,7 @@ async function fetchProcessorConfig() {
 async function createPaymentIntent(options) {
   const apiUrl = getApiUrl();
   const apiKey = getApiKey();
-  const sessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null;
+  const sessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null;
   try {
     const response = await fetch(`${apiUrl}/api/public/commerce/create-payment-intent`, {
       method: "POST",
@@ -383,7 +383,7 @@ async function createPaymentIntent(options) {
 async function createCheckoutSession(optionsOrOfferingId, legacyOptions) {
   const { apiUrl, apiKey } = getApiConfig();
   const options = typeof optionsOrOfferingId === "string" ? { offeringId: optionsOrOfferingId, ...legacyOptions } : optionsOrOfferingId;
-  const analyticsSessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null;
+  const analyticsSessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null;
   try {
     const response = await fetch(`${apiUrl}/api/public/commerce/checkout`, {
       method: "POST",
@@ -503,7 +503,7 @@ function OfferingCard({
           fontWeight: 600
         }, children: offering.name }),
         isEvent && nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "site-kit-offering-date", style: {
-          color: "#666",
+          color: "var(--sk-text-secondary)",
           fontSize: "0.875rem",
           marginTop: "0.25rem"
         }, children: [
@@ -511,19 +511,19 @@ function OfferingCard({
           offering.location && ` \u2022 ${offering.location}`
         ] }),
         showDescription && offering.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `site-kit-offering-description ${descriptionClassName}`, style: {
-          color: "#666",
+          color: "var(--sk-text-secondary)",
           margin: "0.5rem 0",
           fontSize: "0.875rem"
         }, children: offering.short_description }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem", marginTop: "0.5rem" }, children: [
           showPrice && offering.price_is_public && offering.price != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `site-kit-offering-price ${priceClassName}`, style: {
             fontWeight: 600,
-            color: "#333"
+            color: "var(--sk-text-primary)"
           }, children: [
             formatPrice(offering.price, offering.currency),
             offering.compare_at_price && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
               textDecoration: "line-through",
-              color: "#999",
+              color: "var(--sk-text-secondary)",
               marginLeft: "0.5rem",
               fontWeight: 400
             }, children: formatPrice(offering.compare_at_price, offering.currency) })
@@ -537,8 +537,8 @@ function OfferingCard({
                 padding: "0.5rem 1rem",
                 borderRadius: "6px",
                 border: "none",
-                background: "#2563eb",
-                color: "white",
+                background: "var(--sk-primary)",
+                color: "var(--sk-bg)",
                 cursor: "pointer",
                 fontWeight: 500
               },
@@ -553,7 +553,7 @@ function OfferingCard({
     borderRadius: "12px",
     overflow: "hidden",
     boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
-    background: "white"
+    background: "var(--sk-bg)"
   }, children: [
     showImage && offering.featured_image_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -573,8 +573,8 @@ function OfferingCard({
         position: "absolute",
         top: "12px",
         right: "12px",
-        background: "#ef4444",
-        color: "white",
+        background: "var(--sk-error)",
+        color: "var(--sk-bg)",
         padding: "4px 8px",
         borderRadius: "4px",
         fontSize: "0.75rem",
@@ -583,7 +583,7 @@ function OfferingCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1rem" }, children: [
       isEvent && nextSchedule && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "site-kit-offering-date", style: {
-        color: "#2563eb",
+        color: "var(--sk-primary)",
         fontSize: "0.875rem",
         fontWeight: 500,
         marginBottom: "0.25rem"
@@ -592,14 +592,14 @@ function OfferingCard({
         margin: 0,
         fontSize: "1.125rem",
         fontWeight: 600,
-        color: "#111"
+        color: "var(--sk-text-primary)"
       }, children: offering.name }),
-      isEvent && offering.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#666", fontSize: "0.875rem", marginTop: "0.25rem" }, children: [
+      isEvent && offering.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem", marginTop: "0.25rem" }, children: [
         "\u{1F4CD} ",
         offering.location
       ] }),
       showDescription && offering.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `site-kit-offering-description ${descriptionClassName}`, style: {
-        color: "#666",
+        color: "var(--sk-text-secondary)",
         margin: "0.75rem 0",
         fontSize: "0.875rem",
         lineHeight: 1.5
@@ -611,10 +611,10 @@ function OfferingCard({
         marginTop: "1rem"
       }, children: [
         showPrice && offering.price_is_public && offering.price != null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-offering-price ${priceClassName}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "1.25rem", color: "#111" }, children: formatPrice(offering.price, offering.currency) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "1.25rem", color: "var(--sk-text-primary)" }, children: formatPrice(offering.price, offering.currency) }),
           offering.compare_at_price && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
             textDecoration: "line-through",
-            color: "#999",
+            color: "var(--sk-text-secondary)",
             marginLeft: "0.5rem",
             fontSize: "0.875rem"
           }, children: formatPrice(offering.compare_at_price, offering.currency) })
@@ -628,8 +628,8 @@ function OfferingCard({
               padding: "0.625rem 1.25rem",
               borderRadius: "6px",
               border: "none",
-              background: "#2563eb",
-              color: "white",
+              background: "var(--sk-primary)",
+              color: "var(--sk-bg)",
               cursor: "pointer",
               fontWeight: 500,
               fontSize: "0.875rem"
@@ -718,8 +718,8 @@ function OfferingList({
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         width: "40px",
         height: "40px",
-        border: "3px solid #e5e7eb",
-        borderTopColor: "#2563eb",
+        border: "3px solid var(--sk-border)",
+        borderTopColor: "var(--sk-primary)",
         borderRadius: "50%",
         animation: "spin 1s linear infinite"
       } }),
@@ -734,7 +734,7 @@ function OfferingList({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `site-kit-offerings-error ${className}`, style: {
       textAlign: "center",
       padding: "2rem",
-      color: "#ef4444"
+      color: "var(--sk-error)"
     }, children: error });
   }
   if (filteredOfferings.length === 0) {
@@ -744,7 +744,7 @@ function OfferingList({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `site-kit-offerings-empty ${className}`, style: {
       textAlign: "center",
       padding: "2rem",
-      color: "#666"
+      color: "var(--sk-text-secondary)"
     }, children: emptyMessage });
   }
   const gridStyles = layout === "grid" ? {
@@ -776,9 +776,9 @@ function OfferingList({
                 padding: "0.5rem 1rem",
                 borderRadius: "9999px",
                 border: "1px solid",
-                borderColor: activeFilter === null ? "#2563eb" : "#e5e7eb",
-                background: activeFilter === null ? "#2563eb" : "white",
-                color: activeFilter === null ? "white" : "#333",
+                borderColor: activeFilter === null ? "var(--sk-primary)" : "var(--sk-border)",
+                background: activeFilter === null ? "var(--sk-primary)" : "var(--sk-bg)",
+                color: activeFilter === null ? "var(--sk-bg)" : "var(--sk-text-primary)",
                 cursor: "pointer",
                 fontSize: "0.875rem"
               },
@@ -793,9 +793,9 @@ function OfferingList({
                 padding: "0.5rem 1rem",
                 borderRadius: "9999px",
                 border: "1px solid",
-                borderColor: activeFilter === cat.id ? "#2563eb" : "#e5e7eb",
-                background: activeFilter === cat.id ? "#2563eb" : "white",
-                color: activeFilter === cat.id ? "white" : "#333",
+                borderColor: activeFilter === cat.id ? "var(--sk-primary)" : "var(--sk-border)",
+                background: activeFilter === cat.id ? "var(--sk-primary)" : "var(--sk-bg)",
+                color: activeFilter === cat.id ? "var(--sk-bg)" : "var(--sk-text-primary)",
                 cursor: "pointer",
                 fontSize: "0.875rem"
               },
@@ -884,7 +884,7 @@ function EventTile({
       alignItems: "center",
       gap: "0.75rem",
       padding: "0.75rem",
-      background: "white",
+      background: "var(--sk-bg)",
       borderRadius: "8px",
       boxShadow: "0 1px 2px rgba(0,0,0,0.05)"
     }, children: [
@@ -892,11 +892,11 @@ function EventTile({
         minWidth: "48px",
         textAlign: "center",
         padding: "0.5rem",
-        background: "#f3f4f6",
+        background: "var(--sk-surface)",
         borderRadius: "6px"
       }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.75rem", color: "#666", textTransform: "uppercase" }, children: new Date(schedule.starts_at).toLocaleDateString("en-US", { month: "short" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: "#111" }, children: new Date(schedule.starts_at).getDate() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)", textTransform: "uppercase" }, children: new Date(schedule.starts_at).toLocaleDateString("en-US", { month: "short" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: "var(--sk-text-primary)" }, children: new Date(schedule.starts_at).getDate() })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `site-kit-event-title ${titleClassName}`, style: {
@@ -907,7 +907,7 @@ function EventTile({
           overflow: "hidden",
           textOverflow: "ellipsis"
         }, children: event.name }),
-        showTime && schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+        showTime && schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)" }, children: [
           formatTime(schedule.starts_at),
           showLocation && event.location && ` \u2022 ${event.location}`
         ] })
@@ -923,8 +923,8 @@ function EventTile({
             fontSize: "0.75rem",
             borderRadius: "4px",
             border: "none",
-            background: soldOut ? "#e5e7eb" : "#2563eb",
-            color: soldOut ? "#666" : "white",
+            background: soldOut ? "var(--sk-border)" : "var(--sk-primary)",
+            color: soldOut ? "var(--sk-text-secondary)" : "var(--sk-bg)",
             cursor: soldOut ? "not-allowed" : "pointer",
             fontWeight: 500,
             whiteSpace: "nowrap"
@@ -935,7 +935,7 @@ function EventTile({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-event-tile ${className}`, style: {
-    background: "white",
+    background: "var(--sk-bg)",
     borderRadius: "12px",
     overflow: "hidden",
     boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
@@ -960,26 +960,26 @@ function EventTile({
         marginBottom: "0.5rem"
       }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          background: "#dbeafe",
-          color: "#1d4ed8",
+          background: "rgba(var(--sk-primary-rgb), 0.125)",
+          color: "var(--sk-primary)",
           padding: "0.25rem 0.5rem",
           borderRadius: "4px",
           fontSize: "0.75rem",
           fontWeight: 600
         }, children: getRelativeTimeUntil(schedule.starts_at) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", color: "#666" }, children: formatDate(schedule.starts_at) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: formatDate(schedule.starts_at) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: `site-kit-event-title ${titleClassName}`, style: {
         margin: "0 0 0.5rem",
         fontSize: "1.125rem",
         fontWeight: 600,
-        color: "#111"
+        color: "var(--sk-text-primary)"
       }, children: event.name }),
-      showLocation && event.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", color: "#666", marginBottom: "0.5rem" }, children: [
+      showLocation && event.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)", marginBottom: "0.5rem" }, children: [
         "\u{1F4CD} ",
         event.location
       ] }),
-      showTime && schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", color: "#666", marginBottom: "0.75rem" }, children: [
+      showTime && schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)", marginBottom: "0.75rem" }, children: [
         "\u{1F550} ",
         formatTime(schedule.starts_at),
         schedule.ends_at && ` - ${formatTime(schedule.ends_at)}`
@@ -991,10 +991,10 @@ function EventTile({
         marginTop: "0.75rem"
       }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          showPrice && event.price_is_public && event.price != null && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "#111" }, children: event.price === 0 ? "Free" : `$${event.price}` }),
+          showPrice && event.price_is_public && event.price != null && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "var(--sk-text-primary)" }, children: event.price === 0 ? "Free" : `$${event.price}` }),
           showCapacity && spotsRemaining !== null && spotsRemaining <= 10 && !soldOut && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
             fontSize: "0.75rem",
-            color: "#dc2626",
+            color: "var(--sk-error)",
             marginLeft: "0.5rem"
           }, children: [
             "Only ",
@@ -1012,8 +1012,8 @@ function EventTile({
               padding: "0.5rem 1rem",
               borderRadius: "6px",
               border: "none",
-              background: soldOut ? "#e5e7eb" : "#2563eb",
-              color: soldOut ? "#666" : "white",
+              background: soldOut ? "var(--sk-border)" : "var(--sk-primary)",
+              color: soldOut ? "var(--sk-text-secondary)" : "var(--sk-bg)",
               cursor: soldOut ? "not-allowed" : "pointer",
               fontWeight: 500,
               fontSize: "0.875rem"
@@ -1063,7 +1063,7 @@ function UpcomingEvents({
     load();
   }, [propEvents, limit, category]);
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `site-kit-upcoming-events ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem", textAlign: "center", color: "#666" }, children: "Loading events..." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `site-kit-upcoming-events ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem", textAlign: "center", color: "var(--sk-text-secondary)" }, children: "Loading events..." }) });
   }
   if (events.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-upcoming-events ${className}`, children: [
@@ -1072,7 +1072,7 @@ function UpcomingEvents({
         fontSize: "1.5rem",
         fontWeight: 600
       }, children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem", textAlign: "center", color: "#666" }, children: emptyMessage })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem", textAlign: "center", color: "var(--sk-text-secondary)" }, children: emptyMessage })
     ] });
   }
   const layoutStyles = layout === "horizontal" ? {
@@ -1101,7 +1101,7 @@ function UpcomingEvents({
         {
           href: viewAllUrl,
           style: {
-            color: "#2563eb",
+            color: "var(--sk-primary)",
             textDecoration: "none",
             fontSize: "0.875rem",
             fontWeight: 500
@@ -1137,8 +1137,8 @@ function UpcomingEvents({
         style: {
           display: "inline-block",
           padding: "0.75rem 1.5rem",
-          background: "#f3f4f6",
-          color: "#333",
+          background: "var(--sk-surface)",
+          color: "var(--sk-text-primary)",
           borderRadius: "8px",
           textDecoration: "none",
           fontWeight: 500
@@ -1192,15 +1192,15 @@ function ProductEmbed({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-product-embed ${className}`, style: {
       padding: "2rem",
       textAlign: "center",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "12px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         width: "40px",
         height: "40px",
         margin: "0 auto",
-        border: "3px solid #e5e7eb",
-        borderTopColor: "#2563eb",
+        border: "3px solid var(--sk-border)",
+        borderTopColor: "var(--sk-primary)",
         borderRadius: "50%",
         animation: "spin 1s linear infinite"
       } }),
@@ -1380,12 +1380,8 @@ var STYLE_BLOCK = `
 }
 
 /*
- * Commerce CSS custom properties are NOT set here \u2014 they inherit from the host site's :root.
- * If the host site does not define them, the inline var() fallbacks in each usage provide defaults.
- * Example: color: var(--commerce-text, #111827) \u2014 uses #111827 if --commerce-text is not defined.
- *
- * Host sites should define these in their CSS:
- *   :root { --commerce-accent: #d9b338; --commerce-surface: #0f0f17; ... }
+ * Commerce uses --sk-* CSS custom properties inherited from the host site's :root.
+ * Host sites define their design tokens via the site-kit theme system.
  */
 
 .skc-detail *, .skc-detail *::before, .skc-detail *::after {
@@ -1421,8 +1417,8 @@ var STYLE_BLOCK = `
 .skc-gallery-main {
   position: relative;
   overflow: hidden;
-  border-radius: var(--commerce-radius, 12px);
-  background: var(--commerce-surface, #f9fafb);
+  border-radius: var(--sk-radius, 12px);
+  background: var(--sk-bg-elevated);
   cursor: crosshair;
   aspect-ratio: 1;
 }
@@ -1446,19 +1442,19 @@ var STYLE_BLOCK = `
   flex: 0 0 auto;
   width: 64px;
   height: 64px;
-  border-radius: var(--commerce-radius-sm, 8px);
+  border-radius: var(--sk-radius-sm, 8px);
   overflow: hidden;
   border: 2px solid transparent;
   padding: 0;
   cursor: pointer;
-  background: var(--commerce-surface, #f9fafb);
+  background: var(--sk-bg-elevated);
   transition: border-color 0.15s ease;
 }
 .skc-gallery-thumb:hover {
-  border-color: var(--commerce-text-muted, #9ca3af);
+  border-color: var(--sk-text-secondary);
 }
 .skc-gallery-thumb.skc-active {
-  border-color: var(--commerce-accent, #2563eb);
+  border-color: var(--sk-primary);
 }
 .skc-gallery-thumb img {
   width: 100%;
@@ -1473,8 +1469,8 @@ var STYLE_BLOCK = `
   left: 0;
   right: 0;
   z-index: 999;
-  background: white;
-  border-top: 1px solid var(--commerce-border, #e5e7eb);
+  background: var(--sk-bg);
+  border-top: 1px solid var(--sk-border);
   padding: 0.75rem 1rem;
   display: flex;
   align-items: center;
@@ -1490,7 +1486,7 @@ var STYLE_BLOCK = `
 /* Tabs */
 .skc-tabs-list {
   display: flex;
-  border-bottom: 1px solid var(--commerce-border, #e5e7eb);
+  border-bottom: 1px solid var(--sk-border);
   gap: 0;
   overflow-x: auto;
   scrollbar-width: none;
@@ -1502,18 +1498,18 @@ var STYLE_BLOCK = `
   background: none;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--commerce-text-secondary, #6b7280);
+  color: var(--sk-text-secondary);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   transition: color 0.15s ease, border-color 0.15s ease;
 }
 .skc-tab-btn:hover {
-  color: var(--commerce-text, #111827);
+  color: var(--sk-text-primary);
 }
 .skc-tab-btn.skc-active {
-  color: var(--commerce-accent, #2563eb);
-  border-bottom-color: var(--commerce-accent, #2563eb);
+  color: var(--sk-primary);
+  border-bottom-color: var(--sk-primary);
 }
 
 /* Checkout overlay */
@@ -1535,8 +1531,8 @@ var STYLE_BLOCK = `
   max-width: 480px;
   max-height: 90vh;
   overflow-y: auto;
-  background: white;
-  border-radius: calc(var(--commerce-radius, 12px) + 4px);
+  background: var(--sk-bg);
+  border-radius: calc(var(--sk-radius, 12px) + 4px);
   box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
   animation: skc-scaleIn 0.25s ease-out;
 }
@@ -1545,20 +1541,20 @@ var STYLE_BLOCK = `
 .skc-input {
   width: 100%;
   padding: 0.625rem 0.75rem;
-  border-radius: var(--commerce-radius-sm, 8px);
-  border: 1px solid var(--commerce-border, #e5e7eb);
+  border-radius: var(--sk-radius-sm, 8px);
+  border: 1px solid var(--sk-border);
   font-size: 0.9375rem;
-  color: var(--commerce-text, #111827);
-  background: white;
+  color: var(--sk-text-primary);
+  background: var(--sk-bg);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   outline: none;
 }
 .skc-input:focus {
-  border-color: var(--commerce-accent, #2563eb);
-  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
+  border-color: var(--sk-primary);
+  box-shadow: 0 0 0 3px rgba(var(--sk-primary-rgb), 0.1);
 }
 .skc-input::placeholder {
-  color: var(--commerce-text-muted, #9ca3af);
+  color: var(--sk-text-secondary);
 }
 
 /* Primary button */
@@ -1569,17 +1565,17 @@ var STYLE_BLOCK = `
   gap: 0.5rem;
   width: 100%;
   padding: 0.875rem 1.5rem;
-  border-radius: var(--commerce-radius-sm, 8px);
+  border-radius: var(--sk-radius-sm, 8px);
   border: none;
-  background: var(--commerce-accent, #2563eb);
-  color: var(--commerce-accent-text, #ffffff);
+  background: var(--sk-primary);
+  color: var(--sk-bg);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.15s ease, transform 0.1s ease;
 }
 .skc-btn-primary:hover:not(:disabled) {
-  background: var(--commerce-accent-hover, #1d4ed8);
+  background: var(--sk-primary-hover);
 }
 .skc-btn-primary:active:not(:disabled) {
   transform: scale(0.98);
@@ -1597,17 +1593,17 @@ var STYLE_BLOCK = `
   gap: 0.5rem;
   width: 100%;
   padding: 0.875rem 1.5rem;
-  border-radius: var(--commerce-radius-sm, 8px);
-  border: 2px solid var(--commerce-accent, #2563eb);
+  border-radius: var(--sk-radius-sm, 8px);
+  border: 2px solid var(--sk-primary);
   background: transparent;
-  color: var(--commerce-accent, #2563eb);
+  color: var(--sk-primary);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.15s ease;
 }
 .skc-btn-secondary:hover:not(:disabled) {
-  background: rgba(37,99,235,0.05);
+  background: rgba(var(--sk-primary-rgb), 0.05);
 }
 .skc-btn-secondary:disabled {
   opacity: 0.55;
@@ -1631,24 +1627,24 @@ var STYLE_BLOCK = `
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--commerce-border, #e5e7eb);
+  background: var(--sk-border);
   transition: background 0.2s ease, transform 0.2s ease;
 }
 .skc-step-dot.skc-active {
-  background: var(--commerce-accent, #2563eb);
+  background: var(--sk-primary);
   transform: scale(1.3);
 }
 .skc-step-dot.skc-done {
-  background: var(--commerce-success, #059669);
+  background: var(--sk-success);
 }
 .skc-step-connector {
   width: 24px;
   height: 2px;
-  background: var(--commerce-border, #e5e7eb);
+  background: var(--sk-border);
   transition: background 0.2s ease;
 }
 .skc-step-connector.skc-done {
-  background: var(--commerce-success, #059669);
+  background: var(--sk-success);
 }
 `;
 function loadSquareSDK(env) {
@@ -1902,11 +1898,11 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
         style: {
           fontSize: "0.875rem",
           fontWeight: 600,
-          color: "var(--commerce-text, #111827)"
+          color: "var(--sk-text-primary)"
         },
         children: [
           label,
-          selected && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary, #6b7280)", marginLeft: 6 }, children: [
+          selected && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "var(--sk-text-secondary)", marginLeft: 6 }, children: [
             "\u2014 ",
             selected.options?.Size || selected.name
           ] })
@@ -1928,10 +1924,10 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
           style: {
             position: "relative",
             padding: variantOutOfStock ? "0.375rem 1rem 0.25rem" : "0.5rem 1rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : variantOutOfStock ? "1px solid var(--commerce-border, #e5e7eb)" : "1px solid var(--commerce-border, #e5e7eb)",
-            backgroundColor: isSelected ? "color-mix(in srgb, var(--commerce-accent, #2563eb) 8%, transparent)" : variantOutOfStock ? "var(--commerce-surface, #f9fafb)" : "var(--commerce-surface, #f9fafb)",
-            color: variantOutOfStock ? "var(--commerce-text-muted, #9ca3af)" : "var(--commerce-text, #111827)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: isSelected ? "2px solid var(--sk-primary)" : variantOutOfStock ? "1px solid var(--sk-border)" : "1px solid var(--sk-border)",
+            backgroundColor: isSelected ? "color-mix(in srgb, var(--sk-primary) 8%, transparent)" : variantOutOfStock ? "var(--sk-bg-elevated)" : "var(--sk-bg-elevated)",
+            color: variantOutOfStock ? "var(--sk-text-secondary)" : "var(--sk-text-primary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: variantOutOfStock ? "not-allowed" : "pointer",
@@ -1949,7 +1945,7 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
             variantOutOfStock && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
               fontSize: "0.5625rem",
               fontWeight: 600,
-              color: "var(--commerce-danger, #dc2626)",
+              color: "var(--sk-error)",
               textTransform: "uppercase",
               letterSpacing: "0.03em",
               lineHeight: 1
@@ -1964,8 +1960,8 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
                   width: 8,
                   height: 8,
                   borderRadius: "50%",
-                  backgroundColor: isLow ? "var(--commerce-warning, #d97706)" : "var(--commerce-success, #059669)",
-                  border: "2px solid var(--commerce-surface, #f9fafb)"
+                  backgroundColor: isLow ? "var(--sk-warning)" : "var(--sk-success)",
+                  border: "2px solid var(--sk-bg-elevated)"
                 },
                 title: isLow ? `Only ${variant.inventory_count} left` : "In stock"
               }
@@ -1986,7 +1982,7 @@ function QuantitySelector({ quantity, max, onChange }) {
           display: "block",
           fontSize: "0.875rem",
           fontWeight: 600,
-          color: "var(--commerce-text, #111827)",
+          color: "var(--sk-text-primary)",
           marginBottom: "0.5rem"
         },
         children: "Quantity"
@@ -1998,8 +1994,8 @@ function QuantitySelector({ quantity, max, onChange }) {
         style: {
           display: "inline-flex",
           alignItems: "center",
-          border: "1px solid var(--commerce-border, #e5e7eb)",
-          borderRadius: "var(--commerce-radius-sm, 8px)",
+          border: "1px solid var(--sk-border)",
+          borderRadius: "var(--sk-radius-sm, 8px)",
           overflow: "hidden"
         },
         children: [
@@ -2013,14 +2009,14 @@ function QuantitySelector({ quantity, max, onChange }) {
                 width: 40,
                 height: 40,
                 border: "none",
-                background: "var(--commerce-surface, #f9fafb)",
+                background: "var(--sk-bg-elevated)",
                 fontSize: "1.125rem",
                 cursor: quantity <= 1 ? "not-allowed" : "pointer",
                 opacity: quantity <= 1 ? 0.4 : 1,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                color: "var(--commerce-text, #111827)"
+                color: "var(--sk-text-primary)"
               },
               children: "-"
             }
@@ -2042,11 +2038,11 @@ function QuantitySelector({ quantity, max, onChange }) {
                 height: 40,
                 textAlign: "center",
                 border: "none",
-                borderLeft: "1px solid var(--commerce-border, #e5e7eb)",
-                borderRight: "1px solid var(--commerce-border, #e5e7eb)",
+                borderLeft: "1px solid var(--sk-border)",
+                borderRight: "1px solid var(--sk-border)",
                 fontSize: "0.9375rem",
                 fontWeight: 500,
-                color: "var(--commerce-text, #111827)",
+                color: "var(--sk-text-primary)",
                 outline: "none",
                 MozAppearance: "textfield",
                 appearance: "textfield"
@@ -2063,14 +2059,14 @@ function QuantitySelector({ quantity, max, onChange }) {
                 width: 40,
                 height: 40,
                 border: "none",
-                background: "var(--commerce-surface, #f9fafb)",
+                background: "var(--sk-bg-elevated)",
                 fontSize: "1.125rem",
                 cursor: quantity >= max ? "not-allowed" : "pointer",
                 opacity: quantity >= max ? 0.4 : 1,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                color: "var(--commerce-text, #111827)"
+                color: "var(--sk-text-primary)"
               },
               children: "+"
             }
@@ -2106,18 +2102,18 @@ function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
               alignItems: "center",
               textAlign: "center",
               padding: "0.75rem 0.5rem",
-              borderRadius: "var(--commerce-radius-sm, 8px)",
-              background: "var(--commerce-surface, #f9fafb)"
+              borderRadius: "var(--sk-radius-sm, 8px)",
+              background: "var(--sk-bg-elevated)"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-text-secondary)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   style: {
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    color: "var(--commerce-text, #111827)",
+                    color: "var(--sk-text-primary)",
                     lineHeight: 1.3
                   },
                   children: badge.label
@@ -2128,7 +2124,7 @@ function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
                 {
                   style: {
                     fontSize: "0.6875rem",
-                    color: "var(--commerce-text-muted, #9ca3af)",
+                    color: "var(--sk-text-secondary)",
                     lineHeight: 1.3
                   },
                   children: badge.sublabel
@@ -2190,7 +2186,7 @@ function ProductTabs({
             "li",
             {
               style: {
-                color: "var(--commerce-text-secondary, #6b7280)",
+                color: "var(--sk-text-secondary)",
                 fontSize: "0.9375rem",
                 lineHeight: 1.6
               },
@@ -2215,7 +2211,7 @@ function ProductTabs({
               {
                 style: {
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text-muted, #9ca3af)",
+                  color: "var(--sk-text-secondary)",
                   fontWeight: 500
                 },
                 children: key
@@ -2227,7 +2223,7 @@ function ProductTabs({
                 style: {
                   margin: 0,
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text, #111827)"
+                  color: "var(--sk-text-primary)"
                 },
                 children: value
               }
@@ -2241,7 +2237,7 @@ function ProductTabs({
           id: "skc-tabpanel-description",
           role: "tabpanel",
           style: {
-            color: "var(--commerce-text-secondary, #6b7280)",
+            color: "var(--sk-text-secondary)",
             lineHeight: 1.7,
             fontSize: "0.9375rem"
           },
@@ -2260,14 +2256,14 @@ function EventInfoBlock({ product, schedule }) {
       style: {
         marginTop: "1.25rem",
         padding: "1rem",
-        borderRadius: "var(--commerce-radius-sm, 8px)",
-        background: "var(--commerce-surface, #f9fafb)",
+        borderRadius: "var(--sk-radius-sm, 8px)",
+        background: "var(--sk-bg-elevated)",
         display: "flex",
         flexDirection: "column",
         gap: "0.5rem"
       },
       children: [
-        schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             formatDate(schedule.starts_at),
@@ -2275,17 +2271,17 @@ function EventInfoBlock({ product, schedule }) {
             formatTime(schedule.starts_at)
           ] })
         ] }),
-        product.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        product.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconMapPin, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.location })
         ] }),
-        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent, #2563eb)" }, children: [
+        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-primary)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconExternalLink, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Virtual Event" })
         ] }),
-        schedule?.capacity != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        schedule?.capacity != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconUsers, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: soldOut ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--commerce-danger, #dc2626)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning, #d97706)", fontWeight: 600 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: soldOut ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-error)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "skc-pulse", style: { color: "var(--sk-warning)", fontWeight: 600 }, children: [
             "Only ",
             schedule.spots_remaining,
             " spot",
@@ -2319,9 +2315,9 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
     onNext();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Contact Information" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Contact Information" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Full Name *" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Full Name *" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2336,7 +2332,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Email Address *" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Email Address *" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2350,7 +2346,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Phone Number" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Phone Number" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2370,10 +2366,10 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
           onClick: onBack,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: "1px solid var(--commerce-border, #e5e7eb)",
-            background: "white",
-            color: "var(--commerce-text-secondary, #6b7280)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: "1px solid var(--sk-border)",
+            background: "var(--sk-bg)",
+            color: "var(--sk-text-secondary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2394,9 +2390,9 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     onChange({ ...address, [field]: value });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Address" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Shipping Address" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Street Address *" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Street Address *" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2411,7 +2407,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Apt / Suite" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Apt / Suite" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2425,7 +2421,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "City *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "City *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2439,7 +2435,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "State *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "State *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2455,7 +2451,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "ZIP Code *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "ZIP Code *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2469,7 +2465,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Country" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Country" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2490,10 +2486,10 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
           onClick: onBack,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: "1px solid var(--commerce-border, #e5e7eb)",
-            background: "white",
-            color: "var(--commerce-text-secondary, #6b7280)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: "1px solid var(--sk-border)",
+            background: "var(--sk-bg)",
+            color: "var(--sk-text-secondary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2514,20 +2510,20 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           style: {
             width: 32,
             height: 32,
-            border: "3px solid var(--commerce-border, #e5e7eb)",
-            borderTopColor: "var(--commerce-accent, #2563eb)",
+            border: "3px solid var(--sk-border)",
+            borderTopColor: "var(--sk-primary)",
             borderRadius: "50%",
             animation: "skc-spin 1s linear infinite",
             margin: "0 auto 1rem"
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
     ] });
   }
   if (!rates.length) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "1.5rem 0" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: "0 0 1rem" }, children: "No shipping rates available for this address. Please check your address and try again." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem", margin: "0 0 1rem" }, children: "No shipping rates available for this address. Please check your address and try again." }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2535,10 +2531,10 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           onClick: onBack,
           style: {
             padding: "0.75rem 1.5rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: "1px solid var(--commerce-border, #e5e7eb)",
-            background: "white",
-            color: "var(--commerce-text-secondary, #6b7280)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: "1px solid var(--sk-border)",
+            background: "var(--sk-bg)",
+            color: "var(--sk-text-secondary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2549,7 +2545,7 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Method" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Shipping Method" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, role: "radiogroup", "aria-label": "Shipping options", children: rates.map((rate, idx) => {
       const isSelected = selected?.objectId === rate.objectId || selected === null && idx === 0;
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2563,23 +2559,23 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
             alignItems: "center",
             justifyContent: "space-between",
             padding: "0.875rem 1rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : "1px solid var(--commerce-border, #e5e7eb)",
-            background: isSelected ? "rgba(37,99,235,0.03)" : "white",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: isSelected ? "2px solid var(--sk-primary)" : "1px solid var(--sk-border)",
+            background: isSelected ? "rgba(var(--sk-primary-rgb), 0.03)" : "var(--sk-bg)",
             cursor: "pointer",
             textAlign: "left",
             width: "100%"
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: [
                 rate.carrier,
                 " \u2014 ",
                 rate.service
               ] }),
-              rate.estimatedDays != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.8125rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
+              rate.estimatedDays != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.8125rem", color: "var(--sk-text-secondary)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
           ]
         },
         rate.objectId || idx
@@ -2593,10 +2589,10 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           onClick: onBack,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: "1px solid var(--commerce-border, #e5e7eb)",
-            background: "white",
-            color: "var(--commerce-text-secondary, #6b7280)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: "1px solid var(--sk-border)",
+            background: "var(--sk-bg)",
+            color: "var(--sk-text-secondary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2819,21 +2815,21 @@ function PaymentStep({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Payment" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Payment" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         style: {
           padding: "1rem",
-          borderRadius: "var(--commerce-radius-sm, 8px)",
-          background: "var(--commerce-surface, #f9fafb)",
+          borderRadius: "var(--sk-radius-sm, 8px)",
+          background: "var(--sk-bg-elevated)",
           display: "flex",
           flexDirection: "column",
           gap: "0.375rem",
           fontSize: "0.875rem"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--sk-text-secondary)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               product.name,
               " ",
@@ -2843,7 +2839,7 @@ function PaymentStep({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(subtotal, product.currency) })
           ] }),
-          shippingRate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+          shippingRate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--sk-text-secondary)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               "Shipping (",
               shippingRate.carrier,
@@ -2860,10 +2856,10 @@ function PaymentStep({
                 display: "flex",
                 justifyContent: "space-between",
                 fontWeight: 700,
-                color: "var(--commerce-text, #111827)",
+                color: "var(--sk-text-primary)",
                 fontSize: "1rem",
                 paddingTop: "0.5rem",
-                borderTop: "1px solid var(--commerce-border, #e5e7eb)",
+                borderTop: "1px solid var(--sk-border)",
                 marginTop: "0.25rem"
               },
               children: [
@@ -2883,7 +2879,7 @@ function PaymentStep({
             display: "block",
             fontSize: "0.8125rem",
             fontWeight: 500,
-            color: "var(--commerce-text-secondary, #6b7280)",
+            color: "var(--sk-text-secondary)",
             marginBottom: 6
           },
           children: "Card Details"
@@ -2896,14 +2892,14 @@ function PaymentStep({
           ref: cardContainerRef,
           style: {
             minHeight: processor === "stripe" ? 80 : 44,
-            border: "1px solid var(--commerce-border, #e5e7eb)",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: "1px solid var(--sk-border)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
             padding: processor === "stripe" ? "0.75rem" : "0.5rem 0.75rem",
-            background: "white"
+            background: "var(--sk-bg)"
           }
         }
       ),
-      !cardReady && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
+      !cardReady && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2913,10 +2909,10 @@ function PaymentStep({
           alignItems: "flex-start",
           gap: 8,
           padding: "0.75rem",
-          background: "#fef2f2",
-          border: "1px solid #fecaca",
-          borderRadius: "var(--commerce-radius-sm, 8px)",
-          color: "var(--commerce-danger, #dc2626)",
+          background: "rgba(var(--sk-error-rgb, 239,68,68), 0.06)",
+          border: "1px solid rgba(var(--sk-error-rgb, 239,68,68), 0.2)",
+          borderRadius: "var(--sk-radius-sm, 8px)",
+          color: "var(--sk-error)",
           fontSize: "0.875rem"
         },
         children: [
@@ -2934,10 +2930,10 @@ function PaymentStep({
           disabled: submitting,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: "1px solid var(--commerce-border, #e5e7eb)",
-            background: "white",
-            color: "var(--commerce-text-secondary, #6b7280)",
+            borderRadius: "var(--sk-radius-sm, 8px)",
+            border: "1px solid var(--sk-border)",
+            background: "var(--sk-bg)",
+            color: "var(--sk-text-secondary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: submitting ? "not-allowed" : "pointer",
@@ -2984,7 +2980,7 @@ function PaymentStep({
         style: {
           textAlign: "center",
           fontSize: "0.6875rem",
-          color: "var(--commerce-text-muted, #9ca3af)",
+          color: "var(--sk-text-secondary)",
           margin: "0.25rem 0 0"
         },
         children: [
@@ -3025,7 +3021,7 @@ function SuccessStep({ result, product, onClose }) {
                 height: "32",
                 viewBox: "0 0 24 24",
                 fill: "none",
-                stroke: "var(--commerce-success, #059669)",
+                stroke: "var(--sk-success)",
                 strokeWidth: "2.5",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
@@ -3047,21 +3043,21 @@ function SuccessStep({ result, product, onClose }) {
               margin: "0 0 0.5rem",
               fontSize: "1.375rem",
               fontWeight: 700,
-              color: "var(--commerce-success, #059669)"
+              color: "var(--sk-success)"
             },
             children: "Order Confirmed!"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--sk-text-secondary)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
           "Thank you for your purchase of ",
           product.name,
           "."
         ] }),
-        result.confirmation_number && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
+        result.confirmation_number && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--sk-text-secondary)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
           "Confirmation: ",
-          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "var(--commerce-text, #111827)" }, children: result.confirmation_number })
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "var(--sk-text-primary)" }, children: result.confirmation_number })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1.5rem", fontSize: "0.875rem" }, children: "A confirmation email has been sent to your inbox." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-text-secondary)", margin: "0 0 1.5rem", fontSize: "0.875rem" }, children: "A confirmation email has been sent to your inbox." }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "skc-btn-primary", onClick: onClose, style: { maxWidth: 240 }, children: "Done" })
       ]
     }
@@ -3111,7 +3107,7 @@ function ProductDetail({
   const [checkoutError, setCheckoutError] = React5.useState(null);
   const [showStickyBar, setShowStickyBar] = React5.useState(false);
   const buyButtonRef = React5.useRef(null);
-  const analytics = chunkFTSXKDP3_js.useAnalyticsOptional();
+  const analytics = chunkRO6DHV6S_js.useAnalyticsOptional();
   React5.useEffect(() => {
     if (propProduct) {
       setProduct(propProduct);
@@ -3243,8 +3239,8 @@ function ProductDetail({
             style: {
               width: 48,
               height: 48,
-              border: "3px solid var(--commerce-border, #e5e7eb)",
-              borderTopColor: "var(--commerce-accent, #2563eb)",
+              border: "3px solid var(--sk-border)",
+              borderTopColor: "var(--sk-primary)",
               borderRadius: "50%",
               animation: "skc-spin 1s linear infinite"
             }
@@ -3254,8 +3250,8 @@ function ProductDetail({
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: STYLE_BLOCK }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text, #111827)" }, children: "Product Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--sk-text-secondary)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--sk-text-primary)" }, children: "Product Not Found" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "0.5rem" }, children: "The product you are looking for does not exist or has been removed." })
       ] })
     ] });
@@ -3425,7 +3421,7 @@ function ProductDetail({
             style: {
               fontSize: "0.75rem",
               fontWeight: 600,
-              color: "var(--commerce-accent, #2563eb)",
+              color: "var(--sk-primary)",
               textTransform: "uppercase",
               letterSpacing: "0.05em",
               marginBottom: "0.375rem"
@@ -3440,7 +3436,7 @@ function ProductDetail({
               margin: 0,
               fontSize: "1.875rem",
               fontWeight: 700,
-              color: "var(--commerce-text, #111827)",
+              color: "var(--sk-text-primary)",
               lineHeight: 1.2
             },
             children: product.name
@@ -3453,7 +3449,7 @@ function ProductDetail({
               marginTop: "0.625rem",
               marginBottom: 0,
               fontSize: "1rem",
-              color: "var(--commerce-text-secondary, #6b7280)",
+              color: "var(--sk-text-secondary)",
               lineHeight: 1.6
             },
             children: product.short_description
@@ -3476,7 +3472,7 @@ function ProductDetail({
                   style: {
                     fontSize: "1.75rem",
                     fontWeight: 700,
-                    color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)"
+                    color: hasDiscount ? "var(--sk-error)" : "var(--sk-text-primary)"
                   },
                   children: formatPrice(currentPrice, product.currency)
                 }
@@ -3487,7 +3483,7 @@ function ProductDetail({
                   {
                     style: {
                       fontSize: "1.125rem",
-                      color: "var(--commerce-text-muted, #9ca3af)",
+                      color: "var(--sk-text-secondary)",
                       textDecoration: "line-through"
                     },
                     children: formatPrice(compareAtPrice, product.currency)
@@ -3499,8 +3495,8 @@ function ProductDetail({
                     style: {
                       fontSize: "0.75rem",
                       fontWeight: 700,
-                      color: "var(--commerce-accent-text, #ffffff)",
-                      background: "var(--commerce-danger, #dc2626)",
+                      color: "var(--sk-bg)",
+                      background: "var(--sk-error)",
                       padding: "2px 8px",
                       borderRadius: 4
                     },
@@ -3512,7 +3508,7 @@ function ProductDetail({
                   }
                 )
               ] }),
-              product.billing_period && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted, #9ca3af)" }, children: [
+              product.billing_period && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
                 "/ ",
                 product.billing_period
               ] })
@@ -3525,7 +3521,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-danger, #dc2626)",
+              color: "var(--sk-error)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3542,7 +3538,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-warning, #d97706)",
+              color: "var(--sk-warning)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3560,7 +3556,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 500,
-              color: "var(--commerce-success, #059669)",
+              color: "var(--sk-success)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3588,7 +3584,7 @@ function ProductDetail({
             style: {
               marginTop: "0.5rem",
               fontSize: "0.8125rem",
-              color: "var(--commerce-text-secondary, #6b7280)",
+              color: "var(--sk-text-secondary)",
               fontStyle: "italic"
             },
             children: product.metadata.sizing_notes
@@ -3600,14 +3596,14 @@ function ProductDetail({
             style: {
               marginTop: "0.75rem",
               padding: "0.625rem 0.875rem",
-              borderRadius: "var(--commerce-radius-sm, 8px)",
-              backgroundColor: "color-mix(in srgb, var(--commerce-warning, #d97706) 10%, transparent)",
-              border: "1px solid color-mix(in srgb, var(--commerce-warning, #d97706) 25%, transparent)",
+              borderRadius: "var(--sk-radius-sm, 8px)",
+              backgroundColor: "color-mix(in srgb, var(--sk-warning) 10%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--sk-warning) 25%, transparent)",
               display: "flex",
               alignItems: "flex-start",
               gap: "0.5rem",
               fontSize: "0.8125rem",
-              color: "var(--commerce-warning, #d97706)",
+              color: "var(--sk-warning)",
               fontWeight: 500,
               lineHeight: 1.4
             },
@@ -3627,14 +3623,14 @@ function ProductDetail({
             style: {
               marginTop: "0.75rem",
               padding: "0.625rem 0.875rem",
-              borderRadius: "var(--commerce-radius-sm, 8px)",
-              backgroundColor: "color-mix(in srgb, var(--commerce-warning, #d97706) 10%, transparent)",
-              border: "1px solid color-mix(in srgb, var(--commerce-warning, #d97706) 25%, transparent)",
+              borderRadius: "var(--sk-radius-sm, 8px)",
+              backgroundColor: "color-mix(in srgb, var(--sk-warning) 10%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--sk-warning) 25%, transparent)",
               display: "flex",
               alignItems: "flex-start",
               gap: "0.5rem",
               fontSize: "0.8125rem",
-              color: "var(--commerce-warning, #d97706)",
+              color: "var(--sk-warning)",
               fontWeight: 500,
               lineHeight: 1.4
             },
@@ -3695,10 +3691,10 @@ function ProductDetail({
             style: {
               marginTop: "0.75rem",
               padding: "0.75rem",
-              background: "#fef2f2",
-              border: "1px solid #fecaca",
-              borderRadius: "var(--commerce-radius-sm, 8px)",
-              color: "var(--commerce-danger, #dc2626)",
+              background: "rgba(var(--sk-error-rgb, 239,68,68), 0.06)",
+              border: "1px solid rgba(var(--sk-error-rgb, 239,68,68), 0.2)",
+              borderRadius: "var(--sk-radius-sm, 8px)",
+              color: "var(--sk-error)",
               fontSize: "0.875rem",
               display: "flex",
               alignItems: "flex-start",
@@ -3717,24 +3713,24 @@ function ProductDetail({
             style: {
               marginTop: "1rem",
               padding: "0.75rem 1rem",
-              borderRadius: "var(--commerce-radius-sm, 8px)",
-              backgroundColor: "color-mix(in srgb, var(--commerce-accent, #2563eb) 6%, transparent)",
-              border: "1px solid color-mix(in srgb, var(--commerce-accent, #2563eb) 18%, transparent)",
+              borderRadius: "var(--sk-radius-sm, 8px)",
+              backgroundColor: "color-mix(in srgb, var(--sk-primary) 6%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--sk-primary) 18%, transparent)",
               display: "flex",
               alignItems: "flex-start",
               gap: "0.625rem",
               fontSize: "0.8125rem",
-              color: "var(--commerce-text-secondary, #6b7280)",
+              color: "var(--sk-text-secondary)",
               lineHeight: 1.5
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--commerce-accent, #2563eb)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 2 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--sk-primary)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 2 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" }),
                 /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
                 /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, color: "var(--commerce-text, #111827)", marginBottom: 2 }, children: "Care Instructions" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, color: "var(--sk-text-primary)", marginBottom: 2 }, children: "Care Instructions" }),
                 product.metadata.care_instructions
               ] })
             ]
@@ -3755,8 +3751,8 @@ function ProductDetail({
     ] }),
     showStickyBar && checkoutState === "browsing" && !isOutOfStock && !needsVariantSelection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "skc-sticky-bar", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem", color: "var(--commerce-text, #111827)", lineHeight: 1.2 }, children: product.name }),
-        product.price_is_public && currentPrice != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)" }, children: formatPrice(currentPrice, product.currency) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem", color: "var(--sk-text-primary)", lineHeight: 1.2 }, children: product.name }),
+        product.price_is_public && currentPrice != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--sk-error)" : "var(--sk-text-primary)" }, children: formatPrice(currentPrice, product.currency) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -3799,13 +3795,13 @@ function ProductDetail({
                     height: 32,
                     borderRadius: "50%",
                     border: "none",
-                    background: "var(--commerce-surface, #f9fafb)",
+                    background: "var(--sk-bg-elevated)",
                     cursor: "pointer",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     zIndex: 10,
-                    color: "var(--commerce-text-secondary, #6b7280)"
+                    color: "var(--sk-text-secondary)"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(IconX, {})
                 }
@@ -3819,15 +3815,15 @@ function ProductDetail({
                       style: {
                         width: 48,
                         height: 48,
-                        border: "3px solid var(--commerce-border, #e5e7eb)",
-                        borderTopColor: "var(--commerce-accent, #2563eb)",
+                        border: "3px solid var(--sk-border)",
+                        borderTopColor: "var(--sk-primary)",
                         borderRadius: "50%",
                         animation: "skc-spin 0.8s linear infinite",
                         margin: "0 auto 1.5rem"
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-text-secondary)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
                 ] }),
                 checkoutState === "success" && checkoutResult && /* @__PURE__ */ jsxRuntime.jsx(SuccessStep, { result: checkoutResult, product, onClose: handleCloseCheckout }),
                 checkoutState === "customer-info" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3889,10 +3885,10 @@ function ProductDetail({
                     style: {
                       marginTop: "0.75rem",
                       padding: "0.75rem",
-                      background: "#fef2f2",
-                      border: "1px solid #fecaca",
-                      borderRadius: "var(--commerce-radius-sm, 8px)",
-                      color: "var(--commerce-danger, #dc2626)",
+                      background: "rgba(var(--sk-error-rgb, 239,68,68), 0.06)",
+                      border: "1px solid rgba(var(--sk-error-rgb, 239,68,68), 0.2)",
+                      borderRadius: "var(--sk-radius-sm, 8px)",
+                      color: "var(--sk-error)",
                       fontSize: "0.875rem",
                       display: "flex",
                       alignItems: "flex-start",
@@ -4033,7 +4029,7 @@ function ProductGrid({
             width: "100%",
             padding: "0.625rem 1rem",
             borderRadius: "8px",
-            border: "1px solid #d1d5db",
+            border: "1px solid var(--sk-border)",
             fontSize: "0.9375rem"
           }
         }
@@ -4047,9 +4043,9 @@ function ProductGrid({
           style: {
             padding: "0.625rem 1rem",
             borderRadius: "8px",
-            border: "1px solid #d1d5db",
+            border: "1px solid var(--sk-border)",
             fontSize: "0.9375rem",
-            backgroundColor: "white",
+            backgroundColor: "var(--sk-bg)",
             minWidth: "150px"
           },
           children: [
@@ -4067,9 +4063,9 @@ function ProductGrid({
           style: {
             padding: "0.625rem 1rem",
             borderRadius: "8px",
-            border: "1px solid #d1d5db",
+            border: "1px solid var(--sk-border)",
             fontSize: "0.9375rem",
-            backgroundColor: "white"
+            backgroundColor: "var(--sk-bg)"
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "newest", children: "Newest First" }),
@@ -4084,7 +4080,7 @@ function ProductGrid({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "site-kit-product-grid__count", style: {
         marginLeft: "auto",
         fontSize: "0.875rem",
-        color: "#6b7280"
+        color: "var(--sk-text-secondary)"
       }, children: [
         searchQuery ? filteredProducts.length : total,
         " product",
@@ -4098,7 +4094,7 @@ function ProductGrid({
     }, children: [
       Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "site-kit-product-grid__skeleton", style: {
         aspectRatio: "1",
-        backgroundColor: "#f3f4f6",
+        backgroundColor: "var(--sk-surface)",
         borderRadius: "12px",
         animation: "pulse 2s infinite"
       } }, i)),
@@ -4130,13 +4126,13 @@ function ProductGrid({
     !loading && filteredProducts.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "site-kit-product-grid__empty", style: {
       textAlign: "center",
       padding: "4rem 2rem",
-      backgroundColor: "#f9fafb",
+      backgroundColor: "var(--sk-bg-elevated)",
       borderRadius: "12px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F6CD}\uFE0F" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
         margin: 0,
-        color: "#6b7280",
+        color: "var(--sk-text-secondary)",
         fontSize: "1rem"
       }, children: searchQuery ? `No products match "${searchQuery}"` : emptyMessage }),
       searchQuery && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4148,8 +4144,8 @@ function ProductGrid({
             padding: "0.5rem 1rem",
             borderRadius: "6px",
             border: "none",
-            backgroundColor: "#2563eb",
-            color: "white",
+            backgroundColor: "var(--sk-primary)",
+            color: "var(--sk-bg)",
             fontSize: "0.875rem",
             cursor: "pointer"
           },
@@ -4233,8 +4229,8 @@ function ProductPage({
       }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         width: "48px",
         height: "48px",
-        border: "3px solid #e5e7eb",
-        borderTopColor: "#2563eb",
+        border: "3px solid var(--sk-border)",
+        borderTopColor: "var(--sk-primary)",
         borderRadius: "50%",
         animation: "spin 1s linear infinite"
       } }) }),
@@ -4247,8 +4243,8 @@ function ProductPage({
       padding: "6rem 2rem"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "4rem", marginBottom: "1rem" }, children: "\u{1F50D}" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, fontSize: "2rem", color: "#111827" }, children: "Product Not Found" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "0.75rem", color: "#6b7280" }, children: "The product you're looking for doesn't exist or has been removed." }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, fontSize: "2rem", color: "var(--sk-text-primary)" }, children: "Product Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "0.75rem", color: "var(--sk-text-secondary)" }, children: "The product you're looking for doesn't exist or has been removed." }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
@@ -4258,8 +4254,8 @@ function ProductPage({
             marginTop: "1.5rem",
             padding: "0.75rem 1.5rem",
             borderRadius: "8px",
-            backgroundColor: "#2563eb",
-            color: "white",
+            backgroundColor: "var(--sk-primary)",
+            color: "var(--sk-bg)",
             textDecoration: "none",
             fontWeight: 600
           },
@@ -4280,22 +4276,22 @@ function ProductPage({
     margin: 0,
     padding: 0
   }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", style: { color: "#6b7280", textDecoration: "none" }, children: "Home" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "#9ca3af" }, children: "/" }),
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: shopBasePath, style: { color: "#6b7280", textDecoration: "none" }, children: "Shop" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", style: { color: "var(--sk-text-secondary)", textDecoration: "none" }, children: "Home" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "var(--sk-text-secondary)" }, children: "/" }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: shopBasePath, style: { color: "var(--sk-text-secondary)", textDecoration: "none" }, children: "Shop" }) }),
     product.category && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "#9ca3af" }, children: "/" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "var(--sk-text-secondary)" }, children: "/" }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
           href: `${shopBasePath}?category=${product.category.id}`,
-          style: { color: "#6b7280", textDecoration: "none" },
+          style: { color: "var(--sk-text-secondary)", textDecoration: "none" },
           children: product.category.name
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "#9ca3af" }, children: "/" }),
-    /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "#111827", fontWeight: 500 }, children: product.name })
+    /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "var(--sk-text-secondary)" }, children: "/" }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { style: { color: "var(--sk-text-primary)", fontWeight: 500 }, children: product.name })
   ] }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-product-page ${className}`, style, children: [
     renderHead?.(product),
@@ -4307,7 +4303,7 @@ function ProductPage({
           display: "inline-flex",
           alignItems: "center",
           gap: "0.5rem",
-          color: "#6b7280",
+          color: "var(--sk-text-secondary)",
           textDecoration: "none",
           fontSize: "0.875rem"
         },
@@ -4336,7 +4332,7 @@ function ProductPage({
       /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
         fontSize: "1.5rem",
         fontWeight: 600,
-        color: "#111827",
+        color: "var(--sk-text-primary)",
         marginBottom: "1.5rem"
       }, children: product.category ? `More ${product.category.name}` : "Related Products" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4400,15 +4396,15 @@ function EventEmbed({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-event-embed ${className}`, style: {
       padding: "2rem",
       textAlign: "center",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "12px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         width: "40px",
         height: "40px",
         margin: "0 auto",
-        border: "3px solid #e5e7eb",
-        borderTopColor: "#2563eb",
+        border: "3px solid var(--sk-border)",
+        borderTopColor: "var(--sk-primary)",
         borderRadius: "50%",
         animation: "spin 1s linear infinite"
       } }),
@@ -4482,7 +4478,7 @@ function CheckoutForm({
   const [discountResult, setDiscountResult] = React5.useState(null);
   const [applyingDiscount, setApplyingDiscount] = React5.useState(false);
   const isProduct = offering.type === "product";
-  const analytics = chunkFTSXKDP3_js.useAnalyticsOptional();
+  const analytics = chunkRO6DHV6S_js.useAnalyticsOptional();
   React5.useEffect(() => {
     fetchProcessorConfig().then((config) => {
       if (config?.processor) setProcessor(config.processor);
@@ -4607,31 +4603,31 @@ function CheckoutForm({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-checkout-success ${className}`, style: {
       padding: "2rem",
       textAlign: "center",
-      background: "#f0fdf4",
+      background: "rgba(var(--sk-success-rgb, 16,185,129), 0.06)",
       borderRadius: "12px",
-      border: "1px solid #bbf7d0"
+      border: "1px solid rgba(var(--sk-success-rgb, 16,185,129), 0.2)"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F389}" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 0.5rem", color: "#166534" }, children: actualMode === "register" ? "Registration Complete!" : "Order Confirmed!" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#15803d", margin: 0 }, children: actualMode === "register" ? `You're registered for ${offering.name}. Check your email for confirmation.` : `Thank you for your order! Check your email for details.` })
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 0.5rem", color: "var(--sk-success)" }, children: actualMode === "register" ? "Registration Complete!" : "Order Confirmed!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-success)", margin: 0 }, children: actualMode === "register" ? `You're registered for ${offering.name}. Check your email for confirmation.` : `Thank you for your order! Check your email for details.` })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `site-kit-checkout ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: formClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
       padding: "1rem",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "8px",
       marginBottom: "1.5rem"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 0.25rem", fontSize: "1rem" }, children: offering.name }),
-          offering.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "0.875rem", color: "#666" }, children: offering.short_description })
+          offering.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: offering.short_description })
         ] }),
         offering.price_is_public && offering.price != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: "1.125rem" }, children: offering.price === 0 ? "Free" : formatPrice(offering.price, offering.currency) })
       ] }),
       showQuantity && !isEvent && offering.price && offering.price > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1rem", display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", color: "#666" }, children: "Quantity:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: "Quantity:" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "select",
           {
@@ -4641,8 +4637,8 @@ function CheckoutForm({
             style: {
               padding: "0.375rem 0.75rem",
               borderRadius: "6px",
-              border: "1px solid #d1d5db",
-              background: "white"
+              border: "1px solid var(--sk-border)",
+              background: "var(--sk-bg)"
             },
             children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: n, children: n }, n))
           }
@@ -4655,13 +4651,13 @@ function CheckoutForm({
       alignItems: "center",
       justifyContent: "space-between",
       padding: "0.625rem 0.875rem",
-      background: "#f0fdf4",
-      border: "1px solid #bbf7d0",
+      background: "rgba(var(--sk-success-rgb, 16,185,129), 0.06)",
+      border: "1px solid rgba(var(--sk-success-rgb, 16,185,129), 0.2)",
       borderRadius: "6px"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#166534" }, children: discountResult.name || discountCode }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "#15803d", marginLeft: "0.5rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--sk-success)" }, children: discountResult.name || discountCode }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "var(--sk-success)", marginLeft: "0.5rem" }, children: [
           "\u2212",
           formatPrice(discountAmount, offering.currency)
         ] })
@@ -4674,7 +4670,7 @@ function CheckoutForm({
           style: {
             background: "none",
             border: "none",
-            color: "#dc2626",
+            color: "var(--sk-error)",
             cursor: "pointer",
             fontSize: "0.75rem",
             fontWeight: 500
@@ -4695,7 +4691,7 @@ function CheckoutForm({
             flex: 1,
             padding: "0.5rem 0.75rem",
             borderRadius: "6px",
-            border: "1px solid #d1d5db",
+            border: "1px solid var(--sk-border)",
             fontSize: "0.875rem"
           }
         }
@@ -4709,8 +4705,8 @@ function CheckoutForm({
           style: {
             padding: "0.5rem 1rem",
             borderRadius: "6px",
-            border: "1px solid #d1d5db",
-            background: "white",
+            border: "1px solid var(--sk-border)",
+            background: "var(--sk-bg)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: applyingDiscount || !discountCode.trim() ? "not-allowed" : "pointer",
@@ -4722,16 +4718,16 @@ function CheckoutForm({
     ] }) }),
     discountResult?.valid && !isFree && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
       padding: "0.75rem 1rem",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "6px",
       marginBottom: "1.5rem",
       fontSize: "0.875rem"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#666" }, children: "Subtotal" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-text-secondary)" }, children: "Subtotal" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(subtotal, offering.currency) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem", color: "#16a34a" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem", color: "var(--sk-success)" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount" }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
           "\u2212",
@@ -4739,10 +4735,10 @@ function CheckoutForm({
         ] })
       ] }),
       shippingCost > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#666" }, children: "Shipping" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-text-secondary)" }, children: "Shipping" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(shippingCost, offering.currency) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", borderTop: "1px solid #e5e7eb", paddingTop: "0.5rem", marginTop: "0.25rem", fontWeight: 600 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--sk-border)", paddingTop: "0.5rem", marginTop: "0.25rem", fontWeight: 600 }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(total, offering.currency) })
       ] })
@@ -4762,7 +4758,7 @@ function CheckoutForm({
               width: "100%",
               padding: "0.625rem 0.75rem",
               borderRadius: "6px",
-              border: "1px solid #d1d5db",
+              border: "1px solid var(--sk-border)",
               fontSize: "1rem"
             }
           }
@@ -4782,7 +4778,7 @@ function CheckoutForm({
               width: "100%",
               padding: "0.625rem 0.75rem",
               borderRadius: "6px",
-              border: "1px solid #d1d5db",
+              border: "1px solid var(--sk-border)",
               fontSize: "1rem"
             }
           }
@@ -4801,14 +4797,14 @@ function CheckoutForm({
               width: "100%",
               padding: "0.625rem 0.75rem",
               borderRadius: "6px",
-              border: "1px solid #d1d5db",
+              border: "1px solid var(--sk-border)",
               fontSize: "1rem"
             }
           }
         )
       ] })
     ] }),
-    shippingEnabled && !isEvent && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid #e5e7eb" }, children: [
+    shippingEnabled && !isEvent && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid var(--sk-border)" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 1rem", fontSize: "1rem" }, children: "Shipping Address" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4822,7 +4818,7 @@ function CheckoutForm({
               onChange: (e) => updateShippingAddress("street1", e.target.value),
               className: inputClassName,
               placeholder: "123 Main St",
-              style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+              style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid var(--sk-border)", fontSize: "1rem" }
             }
           )
         ] }),
@@ -4835,7 +4831,7 @@ function CheckoutForm({
               value: shippingAddress.street2 || "",
               onChange: (e) => updateShippingAddress("street2", e.target.value),
               className: inputClassName,
-              style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+              style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid var(--sk-border)", fontSize: "1rem" }
             }
           )
         ] }),
@@ -4850,7 +4846,7 @@ function CheckoutForm({
                 value: shippingAddress.city,
                 onChange: (e) => updateShippingAddress("city", e.target.value),
                 className: inputClassName,
-                style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+                style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid var(--sk-border)", fontSize: "1rem" }
               }
             )
           ] }),
@@ -4864,7 +4860,7 @@ function CheckoutForm({
                 value: shippingAddress.state,
                 onChange: (e) => updateShippingAddress("state", e.target.value),
                 className: inputClassName,
-                style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+                style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid var(--sk-border)", fontSize: "1rem" }
               }
             )
           ] })
@@ -4879,7 +4875,7 @@ function CheckoutForm({
               value: shippingAddress.zip,
               onChange: (e) => updateShippingAddress("zip", e.target.value),
               className: inputClassName,
-              style: { width: "100%", maxWidth: "120px", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+              style: { width: "100%", maxWidth: "120px", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid var(--sk-border)", fontSize: "1rem" }
             }
           )
         ] })
@@ -4894,9 +4890,9 @@ function CheckoutForm({
             marginTop: "1rem",
             padding: "0.625rem 1.25rem",
             borderRadius: "6px",
-            border: "1px solid #2563eb",
-            background: "white",
-            color: "#2563eb",
+            border: "1px solid var(--sk-primary)",
+            background: "var(--sk-bg)",
+            color: "var(--sk-primary)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: loadingRates ? "not-allowed" : "pointer"
@@ -4915,8 +4911,8 @@ function CheckoutForm({
               gap: "0.75rem",
               padding: "0.75rem",
               borderRadius: "6px",
-              border: `2px solid ${selectedRate === rate ? "#2563eb" : "#e5e7eb"}`,
-              background: selectedRate === rate ? "#eff6ff" : "white",
+              border: `2px solid ${selectedRate === rate ? "var(--sk-primary)" : "var(--sk-border)"}`,
+              background: selectedRate === rate ? "rgba(var(--sk-primary-rgb), 0.06)" : "var(--sk-bg)",
               cursor: "pointer"
             },
             children: [
@@ -4935,7 +4931,7 @@ function CheckoutForm({
                 rate.service
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: formatPrice(parseFloat(rate.amount), rate.currency || "USD") }),
-              rate.estimatedDays && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+              rate.estimatedDays && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)" }, children: [
                 "(",
                 rate.estimatedDays,
                 " days)"
@@ -4952,7 +4948,7 @@ function CheckoutForm({
             style: {
               marginTop: "0.75rem",
               fontSize: "0.875rem",
-              color: "#6b7280",
+              color: "var(--sk-text-secondary)",
               background: "none",
               border: "none",
               cursor: "pointer",
@@ -4966,10 +4962,10 @@ function CheckoutForm({
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       marginTop: "1rem",
       padding: "0.75rem",
-      background: "#fef2f2",
-      border: "1px solid #fecaca",
+      background: "rgba(var(--sk-error-rgb, 239,68,68), 0.06)",
+      border: "1px solid rgba(var(--sk-error-rgb, 239,68,68), 0.2)",
       borderRadius: "6px",
-      color: "#dc2626",
+      color: "var(--sk-error)",
       fontSize: "0.875rem"
     }, children: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4986,7 +4982,7 @@ function CheckoutForm({
           fontWeight: 600,
           borderRadius: "8px",
           border: "none",
-          background: loading ? "#93c5fd" : "#2563eb",
+          background: loading ? "var(--sk-primary-hover)" : "var(--sk-primary)",
           color: "white",
           cursor: loading ? "not-allowed" : "pointer"
         },
@@ -4996,7 +4992,7 @@ function CheckoutForm({
     !isFree && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
       textAlign: "center",
       fontSize: "0.75rem",
-      color: "#666",
+      color: "var(--sk-text-secondary)",
       marginTop: "0.75rem"
     }, children: "You'll be redirected to our secure payment page" }),
     processor && !isFree && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
@@ -5011,7 +5007,7 @@ function CheckoutForm({
         /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "24", rx: "4", fill: "#3E4348" }),
         /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "white" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.625rem", color: "#999", letterSpacing: "0.02em" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.625rem", color: "var(--sk-text-secondary)", letterSpacing: "0.02em" }, children: [
         "Powered by ",
         processor === "stripe" ? "Stripe" : "Square"
       ] })
@@ -5070,13 +5066,13 @@ function RegistrationForm({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-registration-success ${className}`, style: {
       padding: "2rem",
       textAlign: "center",
-      background: "#f0fdf4",
+      background: "rgba(var(--sk-success-rgb, 16,185,129), 0.06)",
       borderRadius: "12px",
-      border: "1px solid #bbf7d0"
+      border: "1px solid rgba(var(--sk-success-rgb, 16,185,129), 0.2)"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F389}" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 0.5rem", color: "#166534" }, children: "You're Registered!" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#15803d", margin: 0 }, children: successMessage || `You've been registered for ${event.name}. Check your email for confirmation.` })
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 0.5rem", color: "var(--sk-success)" }, children: "You're Registered!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-success)", margin: 0 }, children: successMessage || `You've been registered for ${event.name}. Check your email for confirmation.` })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-registration ${className}`, children: [
@@ -5097,7 +5093,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5117,7 +5113,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5136,7 +5132,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5160,7 +5156,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem",
                 minHeight: "80px"
               }
@@ -5176,9 +5172,9 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem",
-                background: "white"
+                background: "var(--sk-bg)"
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select..." }),
@@ -5198,7 +5194,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5208,10 +5204,10 @@ function RegistrationForm({
       error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         marginTop: "1rem",
         padding: "0.75rem",
-        background: "#fef2f2",
-        border: "1px solid #fecaca",
+        background: "rgba(var(--sk-error-rgb, 239,68,68), 0.06)",
+        border: "1px solid rgba(var(--sk-error-rgb, 239,68,68), 0.2)",
         borderRadius: "6px",
-        color: "#dc2626",
+        color: "var(--sk-error)",
         fontSize: "0.875rem"
       }, children: error }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5228,7 +5224,7 @@ function RegistrationForm({
             fontWeight: 600,
             borderRadius: "8px",
             border: "none",
-            background: loading ? "#93c5fd" : "#2563eb",
+            background: loading ? "var(--sk-primary-hover)" : "var(--sk-primary)",
             color: "white",
             cursor: loading ? "not-allowed" : "pointer"
           },
@@ -5290,7 +5286,7 @@ function CalendarEventCell({
                 borderRadius: "4px",
                 cursor: "pointer",
                 overflow: "hidden",
-                background: imageUrl ? "transparent" : "#dbeafe"
+                background: imageUrl ? "transparent" : "rgba(var(--sk-primary-rgb), 0.125)"
               },
               children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
                 "img",
@@ -5305,7 +5301,7 @@ function CalendarEventCell({
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
                 fontSize: "0.65rem",
-                color: "#1d4ed8",
+                color: "var(--sk-primary)",
                 fontWeight: 500,
                 padding: "2px 4px",
                 display: "block",
@@ -5325,8 +5321,8 @@ function CalendarEventCell({
                 left: "50%",
                 transform: "translateX(-50%) translateY(-4px)",
                 padding: "8px 12px",
-                background: "#1f2937",
-                color: "white",
+                background: "var(--sk-text-primary)",
+                color: "var(--sk-bg)",
                 borderRadius: "8px",
                 fontSize: "0.75rem",
                 minWidth: "180px",
@@ -5367,8 +5363,8 @@ function CalendarEventCell({
         textAlign: "left",
         border: "none",
         borderRadius: "3px",
-        background: "#dbeafe",
-        color: "#1d4ed8",
+        background: "rgba(var(--sk-primary-rgb), 0.125)",
+        color: "var(--sk-primary)",
         cursor: "pointer",
         overflow: "hidden",
         whiteSpace: "nowrap",
@@ -5491,7 +5487,7 @@ function CalendarView({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-calendar ${className}`, style: {
-    background: "white",
+    background: "var(--sk-bg)",
     borderRadius: "12px",
     overflow: "hidden",
     boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
@@ -5505,7 +5501,7 @@ function CalendarView({
           alignItems: "center",
           justifyContent: "space-between",
           padding: "1rem 1.25rem",
-          borderBottom: "1px solid #e5e7eb"
+          borderBottom: "1px solid var(--sk-border)"
         },
         children: [
           showNavigation && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5515,7 +5511,7 @@ function CalendarView({
               style: {
                 padding: "0.5rem",
                 border: "none",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 borderRadius: "6px",
                 cursor: "pointer",
                 fontSize: "1.25rem",
@@ -5541,7 +5537,7 @@ function CalendarView({
                   fontSize: "0.75rem",
                   border: "none",
                   background: "transparent",
-                  color: "#2563eb",
+                  color: "var(--sk-primary)",
                   cursor: "pointer"
                 },
                 children: "Today"
@@ -5555,7 +5551,7 @@ function CalendarView({
               style: {
                 padding: "0.5rem",
                 border: "none",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 borderRadius: "6px",
                 cursor: "pointer",
                 fontSize: "1.25rem",
@@ -5571,7 +5567,7 @@ function CalendarView({
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(7, 1fr)",
-      borderBottom: "1px solid #e5e7eb"
+      borderBottom: "1px solid var(--sk-border)"
     }, children: dayHeaders.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -5580,7 +5576,7 @@ function CalendarView({
           textAlign: "center",
           fontSize: "0.75rem",
           fontWeight: 600,
-          color: "#666",
+          color: "var(--sk-text-secondary)",
           textTransform: "uppercase"
         },
         children: day
@@ -5598,9 +5594,9 @@ function CalendarView({
         style: {
           minHeight: "100px",
           padding: "0.5rem",
-          borderRight: (index + 1) % 7 !== 0 ? "1px solid #e5e7eb" : "none",
-          borderBottom: "1px solid #e5e7eb",
-          background: day.isCurrentMonth ? "white" : "#f9fafb",
+          borderRight: (index + 1) % 7 !== 0 ? "1px solid var(--sk-border)" : "none",
+          borderBottom: "1px solid var(--sk-border)",
+          background: day.isCurrentMonth ? "var(--sk-bg)" : "var(--sk-bg-elevated)",
           cursor: day.events.length > 0 || onDayClick ? "pointer" : "default"
         },
         children: [
@@ -5617,8 +5613,8 @@ function CalendarView({
             borderRadius: "50%",
             fontSize: "0.875rem",
             fontWeight: day.isToday ? 600 : 400,
-            color: day.isToday ? "white" : day.isCurrentMonth ? "#111" : "#9ca3af",
-            background: day.isToday ? "#2563eb" : "transparent"
+            color: day.isToday ? "var(--sk-bg)" : day.isCurrentMonth ? "var(--sk-text-primary)" : "var(--sk-text-secondary)",
+            background: day.isToday ? "var(--sk-primary)" : "transparent"
           }, children: day.date.getDate() }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
             day.events.slice(0, 3).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -5634,7 +5630,7 @@ function CalendarView({
             )),
             day.events.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
               fontSize: "0.65rem",
-              color: "#666",
+              color: "var(--sk-text-secondary)",
               textAlign: "center"
             }, children: [
               "+",
@@ -5871,7 +5867,7 @@ function EventModal({
             maxWidth: "500px",
             maxHeight: "90vh",
             overflow: "auto",
-            background: "white",
+            background: "var(--sk-bg)",
             borderRadius: "16px",
             boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
           },
@@ -5887,7 +5883,7 @@ function EventModal({
                   right: "1rem",
                   padding: "0.5rem",
                   border: "none",
-                  background: "#f3f4f6",
+                  background: "var(--sk-surface)",
                   borderRadius: "50%",
                   cursor: "pointer",
                   fontSize: "1.25rem",
@@ -5921,8 +5917,8 @@ function EventModal({
                 position: "absolute",
                 top: "1rem",
                 left: "1rem",
-                background: "#ef4444",
-                color: "white",
+                background: "var(--sk-error)",
+                color: "var(--sk-bg)",
                 padding: "0.25rem 0.75rem",
                 borderRadius: "4px",
                 fontSize: "0.875rem",
@@ -5931,8 +5927,8 @@ function EventModal({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `site-kit-modal-content ${contentClassName}`, style: { padding: "1.5rem" }, children: success ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "2rem 0" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "4rem", marginBottom: "1rem" }, children: "\u{1F389}" }),
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 0.5rem", color: "#166534" }, children: "You're Registered!" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#15803d", margin: "0 0 1.5rem" }, children: "Check your email for confirmation details." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 0.5rem", color: "var(--sk-success)" }, children: "You're Registered!" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sk-success)", margin: "0 0 1.5rem" }, children: "Check your email for confirmation details." }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -5943,8 +5939,8 @@ function EventModal({
                     fontWeight: 500,
                     border: "none",
                     borderRadius: "8px",
-                    background: "#2563eb",
-                    color: "white",
+                    background: "var(--sk-primary)",
+                    color: "var(--sk-bg)",
                     cursor: "pointer"
                   },
                   children: "Done"
@@ -5953,7 +5949,7 @@ function EventModal({
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "1.5rem" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 0.5rem", fontSize: "1.5rem", fontWeight: 600, paddingRight: "2rem" }, children: event.name }),
-                schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", color: "#666", fontSize: "0.9rem" }, children: [
+                schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", color: "var(--sk-text-secondary)", fontSize: "0.9rem" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                     "\u{1F4C5} ",
                     formatDate(schedule.starts_at)
@@ -5967,13 +5963,13 @@ function EventModal({
                     event.location
                   ] })
                 ] }),
-                event.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.75rem 0 0", color: "#666", fontSize: "0.9rem" }, children: event.short_description }),
+                event.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.75rem 0 0", color: "var(--sk-text-secondary)", fontSize: "0.9rem" }, children: event.short_description }),
                 spotsRemaining !== null && spotsRemaining <= 10 && spotsRemaining > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
                   marginTop: "0.75rem",
                   padding: "0.5rem 0.75rem",
-                  background: "#fef3c7",
+                  background: "rgba(var(--sk-warning-rgb, 245,158,11), 0.1)",
                   borderRadius: "6px",
-                  color: "#92400e",
+                  color: "var(--sk-warning)",
                   fontSize: "0.875rem"
                 }, children: [
                   "\u26A0\uFE0F Only ",
@@ -5986,22 +5982,22 @@ function EventModal({
               soldOut ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
                 padding: "2rem",
                 textAlign: "center",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 borderRadius: "8px"
-              }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "#666" }, children: "This event is sold out. Check back for future dates!" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+              }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary)" }, children: "This event is sold out. Check back for future dates!" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
                 !isFree && event.price_is_public && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
                   padding: "1rem",
-                  background: "#f9fafb",
+                  background: "var(--sk-bg-elevated)",
                   borderRadius: "8px",
                   marginBottom: "1rem"
                 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "1.25rem" }, children: formatPrice(event.price, event.currency) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#666", fontSize: "0.875rem" }, children: " per ticket" })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem" }, children: " per ticket" })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", color: "#666" }, children: "Qty:" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: "Qty:" }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "select",
                         {
@@ -6010,8 +6006,8 @@ function EventModal({
                           style: {
                             padding: "0.5rem",
                             borderRadius: "6px",
-                            border: "1px solid #d1d5db",
-                            background: "white",
+                            border: "1px solid var(--sk-border)",
+                            background: "var(--sk-bg)",
                             fontSize: "1rem"
                           },
                           children: [...Array(Math.min(10, spotsRemaining || 10))].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i + 1, children: i + 1 }, i + 1))
@@ -6022,7 +6018,7 @@ function EventModal({
                   quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
                     marginTop: "0.75rem",
                     paddingTop: "0.75rem",
-                    borderTop: "1px solid #e5e7eb",
+                    borderTop: "1px solid var(--sk-border)",
                     display: "flex",
                     justifyContent: "space-between"
                   }, children: [
@@ -6045,7 +6041,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6065,7 +6061,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6084,7 +6080,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6107,7 +6103,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem",
                           minHeight: "80px",
                           resize: "vertical"
@@ -6123,9 +6119,9 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem",
-                          background: "white"
+                          background: "var(--sk-bg)"
                         },
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select..." }),
@@ -6144,7 +6140,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6156,7 +6152,7 @@ function EventModal({
                     display: "block",
                     fontSize: "0.875rem",
                     fontWeight: 500,
-                    color: "#374151",
+                    color: "var(--sk-text-primary)",
                     marginBottom: "0.375rem"
                   }, children: "Card Details *" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -6166,22 +6162,22 @@ function EventModal({
                       ref: cardContainerRef,
                       style: {
                         minHeight: "42px",
-                        border: "1px solid #d1d5db",
+                        border: "1px solid var(--sk-border)",
                         borderRadius: "6px",
                         padding: "0.5rem 0.75rem",
-                        background: "#fff"
+                        background: "var(--sk-bg)"
                       }
                     }
                   ),
-                  !cardReady && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "#9ca3af", marginTop: "0.25rem" }, children: "Loading card form..." })
+                  !cardReady && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)", marginTop: "0.25rem" }, children: "Loading card form..." })
                 ] }),
                 error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
                   marginTop: "1rem",
                   padding: "0.75rem",
-                  background: "#fef2f2",
-                  border: "1px solid #fecaca",
+                  background: "rgba(var(--sk-error-rgb, 239,68,68), 0.06)",
+                  border: "1px solid rgba(var(--sk-error-rgb, 239,68,68), 0.2)",
                   borderRadius: "6px",
-                  color: "#dc2626",
+                  color: "var(--sk-error)",
                   fontSize: "0.875rem"
                 }, children: error }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -6197,8 +6193,8 @@ function EventModal({
                       fontWeight: 600,
                       borderRadius: "8px",
                       border: "none",
-                      background: loading || !isFree && processor === "square" && !cardReady ? "#93c5fd" : "#2563eb",
-                      color: "white",
+                      background: loading || !isFree && processor === "square" && !cardReady ? "var(--sk-primary-hover)" : "var(--sk-primary)",
+                      color: "var(--sk-bg)",
                       cursor: loading || !isFree && processor === "square" && !cardReady ? "not-allowed" : "pointer"
                     },
                     children: loading ? "Processing..." : isFree ? "Register Free" : `Pay ${formatPrice(total, event.currency)}`
@@ -6207,13 +6203,13 @@ function EventModal({
                 !isFree && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
                   textAlign: "center",
                   fontSize: "0.75rem",
-                  color: "#666",
+                  color: "var(--sk-text-secondary)",
                   margin: "0.75rem 0 0"
                 }, children: [
                   "\u{1F512} Secure checkout via ",
                   processor === "square" ? "Square" : processor === "stripe" ? "Stripe" : "secure payment"
                 ] }),
-                !isFree && processor && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.625rem", color: "#999", margin: "0.25rem 0 0", textAlign: "center" }, children: [
+                !isFree && processor && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.625rem", color: "var(--sk-text-secondary)", margin: "0.25rem 0 0", textAlign: "center" }, children: [
                   "Powered by ",
                   processor === "stripe" ? "Stripe" : "Square"
                 ] })
@@ -6423,15 +6419,15 @@ function EventsWidget({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
       (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-header ${headerClassName}`, style: { marginBottom: "1.5rem" }, children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "#666" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "var(--sk-text-secondary)" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           width: "40px",
           height: "40px",
           margin: "0 auto 1rem",
-          border: "3px solid #e5e7eb",
-          borderTopColor: "#3b82f6",
+          border: "3px solid var(--sk-border)",
+          borderTopColor: "var(--sk-primary)",
           borderRadius: "50%",
           animation: "site-kit-spin 1s linear infinite"
         } }),
@@ -6448,22 +6444,22 @@ function EventsWidget({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
       (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-header ${headerClassName}`, style: { marginBottom: "1.5rem" }, children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "#dc2626" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "var(--sk-error)" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) })
     ] });
   }
   if (events.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
       (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-header ${headerClassName}`, style: { marginBottom: "1.5rem" }, children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "#666" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "var(--sk-text-secondary)" }, children: [
         showEmptyIcon && /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
-            style: { width: "64px", height: "64px", margin: "0 auto 1rem", color: "#d1d5db" },
+            style: { width: "64px", height: "64px", margin: "0 auto 1rem", color: "var(--sk-border)" },
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -6491,7 +6487,7 @@ function EventsWidget({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
           ] }),
           showViewToggle && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
@@ -6500,7 +6496,7 @@ function EventsWidget({
               style: {
                 display: "flex",
                 gap: "0.25rem",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 padding: "0.25rem",
                 borderRadius: "0.5rem"
               },
@@ -6516,8 +6512,8 @@ function EventsWidget({
                       padding: "0.5rem 1rem",
                       border: "none",
                       borderRadius: "0.375rem",
-                      background: viewMode === "list" ? "#fff" : "transparent",
-                      color: viewMode === "list" ? "#1f2937" : "#6b7280",
+                      background: viewMode === "list" ? "var(--sk-bg)" : "transparent",
+                      color: viewMode === "list" ? "var(--sk-text-primary)" : "var(--sk-text-secondary)",
                       fontWeight: 500,
                       fontSize: "0.875rem",
                       cursor: "pointer",
@@ -6541,8 +6537,8 @@ function EventsWidget({
                       padding: "0.5rem 1rem",
                       border: "none",
                       borderRadius: "0.375rem",
-                      background: viewMode === "grid" ? "#fff" : "transparent",
-                      color: viewMode === "grid" ? "#1f2937" : "#6b7280",
+                      background: viewMode === "grid" ? "var(--sk-bg)" : "transparent",
+                      color: viewMode === "grid" ? "var(--sk-text-primary)" : "var(--sk-text-secondary)",
                       fontWeight: 500,
                       fontSize: "0.875rem",
                       cursor: "pointer",
@@ -6566,8 +6562,8 @@ function EventsWidget({
                       padding: "0.5rem 1rem",
                       border: "none",
                       borderRadius: "0.375rem",
-                      background: viewMode === "calendar" ? "#fff" : "transparent",
-                      color: viewMode === "calendar" ? "#1f2937" : "#6b7280",
+                      background: viewMode === "calendar" ? "var(--sk-bg)" : "transparent",
+                      color: viewMode === "calendar" ? "var(--sk-text-primary)" : "var(--sk-text-secondary)",
                       fontWeight: 500,
                       fontSize: "0.875rem",
                       cursor: "pointer",
@@ -6602,8 +6598,8 @@ function EventsWidget({
               flexDirection: "row",
               gap: 0,
               padding: 0,
-              background: "#fff",
-              border: "1px solid #e5e7eb",
+              background: "var(--sk-bg)",
+              border: "1px solid var(--sk-border)",
               borderRadius: "0.75rem",
               cursor: nextSchedule ? "pointer" : "default",
               transition: "all 150ms",
@@ -6611,12 +6607,12 @@ function EventsWidget({
             },
             onMouseEnter: (e) => {
               if (nextSchedule) {
-                e.currentTarget.style.borderColor = "#3b82f6";
+                e.currentTarget.style.borderColor = "var(--sk-primary)";
                 e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
               }
             },
             onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "#e5e7eb";
+              e.currentTarget.style.borderColor = "var(--sk-border)";
               e.currentTarget.style.boxShadow = "none";
             },
             children: [
@@ -6624,7 +6620,7 @@ function EventsWidget({
                 width: "160px",
                 minWidth: "160px",
                 flexShrink: 0,
-                background: "#f3f4f6"
+                background: "var(--sk-surface)"
               }, children: [
                 imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
@@ -6657,7 +6653,7 @@ function EventsWidget({
                       display: imageUrl ? "none" : "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      color: "#9ca3af"
+                      color: "var(--sk-text-secondary)"
                     },
                     "aria-hidden": true,
                     children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {})
@@ -6667,20 +6663,20 @@ function EventsWidget({
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.75rem", padding: "1.25rem" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "1rem" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "#1f2937" }, children: eventItem.name }),
-                    eventItem.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#6b7280", fontSize: "0.875rem", lineHeight: 1.5 }, children: eventItem.short_description })
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: eventItem.name }),
+                    eventItem.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)", fontSize: "0.875rem", lineHeight: 1.5 }, children: eventItem.short_description })
                   ] }),
                   eventItem.price_is_public && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
                     padding: "0.375rem 0.75rem",
-                    background: isFree ? "#dcfce7" : "#dbeafe",
-                    color: isFree ? "#166534" : "#1e40af",
+                    background: isFree ? "rgba(var(--sk-success-rgb, 16,185,129), 0.1)" : "rgba(var(--sk-primary-rgb), 0.125)",
+                    color: isFree ? "var(--sk-success)" : "var(--sk-primary)",
                     borderRadius: "9999px",
                     fontSize: "0.875rem",
                     fontWeight: 600,
                     whiteSpace: "nowrap"
                   }, children: isFree ? "Free" : formatPrice(eventItem.price ?? 0, eventItem.currency) })
                 ] }),
-                nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
+                nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
                     formatDate(nextSchedule.starts_at)
@@ -6694,7 +6690,7 @@ function EventsWidget({
                     eventItem.location
                   ] }),
                   nextSchedule.spots_remaining !== null && nextSchedule.spots_remaining !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                    color: nextSchedule.spots_remaining < 5 ? "#dc2626" : "#6b7280",
+                    color: nextSchedule.spots_remaining < 5 ? "var(--sk-error)" : "var(--sk-text-secondary)",
                     fontWeight: nextSchedule.spots_remaining < 5 ? 500 : 400
                   }, children: nextSchedule.spots_remaining === 0 ? "Sold Out" : `${nextSchedule.spots_remaining} spots left` })
                 ] })
@@ -6711,8 +6707,8 @@ function EventsWidget({
           style: {
             display: "inline-block",
             padding: "0.75rem 1.5rem",
-            background: "#f3f4f6",
-            color: "#1f2937",
+            background: "var(--sk-surface)",
+            color: "var(--sk-text-primary)",
             borderRadius: "0.5rem",
             textDecoration: "none",
             fontWeight: 500,
@@ -6744,7 +6740,7 @@ function EventsWidget({
               overflow: "hidden",
               cursor: nextSchedule ? "pointer" : "default",
               transition: "all 150ms",
-              border: "1px solid #e5e7eb"
+              border: "1px solid var(--sk-border)"
             },
             onMouseEnter: (e) => {
               if (nextSchedule) {
@@ -6769,9 +6765,9 @@ function EventsWidget({
                 flexDirection: "column",
                 justifyContent: "flex-end",
                 padding: "1.25rem",
-                color: "#fff"
+                color: "var(--sk-bg)"
               }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "#fff", textShadow: "0 1px 2px rgba(0,0,0,0.5)" }, children: eventItem.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-bg)", textShadow: "0 1px 2px rgba(0,0,0,0.5)" }, children: eventItem.name }),
                 eventItem.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.25rem 0 0", fontSize: "0.8125rem", opacity: 0.95, lineHeight: 1.4, overflow: "hidden", textOverflow: "ellipsis", maxHeight: "2.8em" }, children: eventItem.short_description }),
                 nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", marginTop: "0.75rem", fontSize: "0.8125rem", opacity: 0.95 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
@@ -6806,8 +6802,8 @@ function EventsWidget({
           style: {
             display: "inline-block",
             padding: "0.75rem 1.5rem",
-            background: "#f3f4f6",
-            color: "#1f2937",
+            background: "var(--sk-surface)",
+            color: "var(--sk-text-primary)",
             borderRadius: "0.5rem",
             textDecoration: "none",
             fontWeight: 500,
@@ -6899,5 +6895,5 @@ exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
 exports.validateAddress = validateAddress;
 exports.validateDiscountCode = validateDiscountCode;
-//# sourceMappingURL=chunk-WW7UM7XY.js.map
-//# sourceMappingURL=chunk-WW7UM7XY.js.map
+//# sourceMappingURL=chunk-TZAD7CZD.js.map
+//# sourceMappingURL=chunk-TZAD7CZD.js.map