@sonordev/site-kit 1.5.4 → 2.0.0

package/dist/{chunk-4X5TFGKD.mjs → chunk-P3POHQWW.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { useAnalyticsOptional } from './chunk-KRPFLF62.mjs';
+import { useAnalyticsOptional } from './chunk-F5NXD7VQ.mjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 
@@ -283,7 +283,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",
@@ -354,7 +354,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",
@@ -377,7 +377,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",
@@ -497,7 +497,7 @@ function OfferingCard({
           fontWeight: 600
         }, children: offering.name }),
         isEvent && nextSchedule && /* @__PURE__ */ jsxs("div", { className: "site-kit-offering-date", style: {
-          color: "#666",
+          color: "var(--sk-text-secondary)",
           fontSize: "0.875rem",
           marginTop: "0.25rem"
         }, children: [
@@ -505,19 +505,19 @@ function OfferingCard({
           offering.location && ` \u2022 ${offering.location}`
         ] }),
         showDescription && offering.short_description && /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem", marginTop: "0.5rem" }, children: [
           showPrice && offering.price_is_public && offering.price != null && /* @__PURE__ */ 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__ */ 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) })
@@ -531,8 +531,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
               },
@@ -547,7 +547,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__ */ jsxs("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ jsx(
@@ -567,8 +567,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",
@@ -577,7 +577,7 @@ function OfferingCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { padding: "1rem" }, children: [
       isEvent && nextSchedule && /* @__PURE__ */ jsx("div", { className: "site-kit-offering-date", style: {
-        color: "#2563eb",
+        color: "var(--sk-primary)",
         fontSize: "0.875rem",
         fontWeight: 500,
         marginBottom: "0.25rem"
@@ -586,14 +586,14 @@ function OfferingCard({
         margin: 0,
         fontSize: "1.125rem",
         fontWeight: 600,
-        color: "#111"
+        color: "var(--sk-text-primary)"
       }, children: offering.name }),
-      isEvent && offering.location && /* @__PURE__ */ jsxs("div", { style: { color: "#666", fontSize: "0.875rem", marginTop: "0.25rem" }, children: [
+      isEvent && offering.location && /* @__PURE__ */ jsxs("div", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem", marginTop: "0.25rem" }, children: [
         "\u{1F4CD} ",
         offering.location
       ] }),
       showDescription && offering.short_description && /* @__PURE__ */ 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
@@ -605,10 +605,10 @@ function OfferingCard({
         marginTop: "1rem"
       }, children: [
         showPrice && offering.price_is_public && offering.price != null ? /* @__PURE__ */ jsxs("div", { className: `site-kit-offering-price ${priceClassName}`, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "1.25rem", color: "#111" }, children: formatPrice(offering.price, offering.currency) }),
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "1.25rem", color: "var(--sk-text-primary)" }, children: formatPrice(offering.price, offering.currency) }),
           offering.compare_at_price && /* @__PURE__ */ 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) })
@@ -622,8 +622,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"
@@ -712,8 +712,8 @@ function OfferingList({
       /* @__PURE__ */ 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"
       } }),
@@ -728,7 +728,7 @@ function OfferingList({
     return /* @__PURE__ */ 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) {
@@ -738,7 +738,7 @@ function OfferingList({
     return /* @__PURE__ */ 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" ? {
@@ -770,9 +770,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"
               },
@@ -787,9 +787,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"
               },
@@ -878,7 +878,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: [
@@ -886,11 +886,11 @@ function EventTile({
         minWidth: "48px",
         textAlign: "center",
         padding: "0.5rem",
-        background: "#f3f4f6",
+        background: "var(--sk-surface)",
         borderRadius: "6px"
       }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "#666", textTransform: "uppercase" }, children: new Date(schedule.starts_at).toLocaleDateString("en-US", { month: "short" }) }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: "#111" }, children: new Date(schedule.starts_at).getDate() })
+        /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: "var(--sk-text-primary)" }, children: new Date(schedule.starts_at).getDate() })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsx("h4", { className: `site-kit-event-title ${titleClassName}`, style: {
@@ -901,7 +901,7 @@ function EventTile({
           overflow: "hidden",
           textOverflow: "ellipsis"
         }, children: event.name }),
-        showTime && schedule && /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+        showTime && schedule && /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)" }, children: [
           formatTime(schedule.starts_at),
           showLocation && event.location && ` \u2022 ${event.location}`
         ] })
@@ -917,8 +917,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"
@@ -929,7 +929,7 @@ function EventTile({
     ] });
   }
   return /* @__PURE__ */ 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)"
@@ -954,26 +954,26 @@ function EventTile({
         marginBottom: "0.5rem"
       }, children: [
         /* @__PURE__ */ 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__ */ jsx("span", { style: { fontSize: "0.875rem", color: "#666" }, children: formatDate(schedule.starts_at) })
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: formatDate(schedule.starts_at) })
       ] }),
       /* @__PURE__ */ 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__ */ jsxs("div", { style: { fontSize: "0.875rem", color: "#666", marginBottom: "0.5rem" }, children: [
+      showLocation && event.location && /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)", marginBottom: "0.5rem" }, children: [
         "\u{1F4CD} ",
         event.location
       ] }),
-      showTime && schedule && /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", color: "#666", marginBottom: "0.75rem" }, children: [
+      showTime && schedule && /* @__PURE__ */ 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)}`
@@ -985,10 +985,10 @@ function EventTile({
         marginTop: "0.75rem"
       }, children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          showPrice && event.price_is_public && event.price != null && /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#111" }, children: event.price === 0 ? "Free" : `$${event.price}` }),
+          showPrice && event.price_is_public && event.price != null && /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--sk-text-primary)" }, children: event.price === 0 ? "Free" : `$${event.price}` }),
           showCapacity && spotsRemaining !== null && spotsRemaining <= 10 && !soldOut && /* @__PURE__ */ jsxs("span", { style: {
             fontSize: "0.75rem",
-            color: "#dc2626",
+            color: "var(--sk-error)",
             marginLeft: "0.5rem"
           }, children: [
             "Only ",
@@ -1006,8 +1006,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"
@@ -1057,7 +1057,7 @@ function UpcomingEvents({
     load();
   }, [propEvents, limit, category]);
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: `site-kit-upcoming-events ${className}`, children: /* @__PURE__ */ jsx("div", { style: { padding: "2rem", textAlign: "center", color: "#666" }, children: "Loading events..." }) });
+    return /* @__PURE__ */ jsx("div", { className: `site-kit-upcoming-events ${className}`, children: /* @__PURE__ */ jsx("div", { style: { padding: "2rem", textAlign: "center", color: "var(--sk-text-secondary)" }, children: "Loading events..." }) });
   }
   if (events.length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: `site-kit-upcoming-events ${className}`, children: [
@@ -1066,7 +1066,7 @@ function UpcomingEvents({
         fontSize: "1.5rem",
         fontWeight: 600
       }, children: title }),
-      /* @__PURE__ */ jsx("div", { style: { padding: "2rem", textAlign: "center", color: "#666" }, children: emptyMessage })
+      /* @__PURE__ */ jsx("div", { style: { padding: "2rem", textAlign: "center", color: "var(--sk-text-secondary)" }, children: emptyMessage })
     ] });
   }
   const layoutStyles = layout === "horizontal" ? {
@@ -1095,7 +1095,7 @@ function UpcomingEvents({
         {
           href: viewAllUrl,
           style: {
-            color: "#2563eb",
+            color: "var(--sk-primary)",
             textDecoration: "none",
             fontSize: "0.875rem",
             fontWeight: 500
@@ -1131,8 +1131,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
@@ -1186,15 +1186,15 @@ function ProductEmbed({
     return /* @__PURE__ */ jsxs("div", { className: `site-kit-product-embed ${className}`, style: {
       padding: "2rem",
       textAlign: "center",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "12px"
     }, children: [
       /* @__PURE__ */ 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"
       } }),
@@ -1374,12 +1374,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 {
@@ -1415,8 +1411,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;
 }
@@ -1440,19 +1436,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%;
@@ -1467,8 +1463,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;
@@ -1484,7 +1480,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;
@@ -1496,18 +1492,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 */
@@ -1529,8 +1525,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;
 }
@@ -1539,20 +1535,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 */
@@ -1563,17 +1559,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);
@@ -1591,17 +1587,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;
@@ -1625,24 +1621,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) {
@@ -1896,11 +1892,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__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary, #6b7280)", marginLeft: 6 }, children: [
+          selected && /* @__PURE__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--sk-text-secondary)", marginLeft: 6 }, children: [
             "\u2014 ",
             selected.options?.Size || selected.name
           ] })
@@ -1922,10 +1918,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",
@@ -1943,7 +1939,7 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
             variantOutOfStock && /* @__PURE__ */ jsx("span", { style: {
               fontSize: "0.5625rem",
               fontWeight: 600,
-              color: "var(--commerce-danger, #dc2626)",
+              color: "var(--sk-error)",
               textTransform: "uppercase",
               letterSpacing: "0.03em",
               lineHeight: 1
@@ -1958,8 +1954,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"
               }
@@ -1980,7 +1976,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"
@@ -1992,8 +1988,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: [
@@ -2007,14 +2003,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: "-"
             }
@@ -2036,11 +2032,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"
@@ -2057,14 +2053,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: "+"
             }
@@ -2100,18 +2096,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__ */ jsx("span", { style: { color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-text-secondary)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   style: {
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    color: "var(--commerce-text, #111827)",
+                    color: "var(--sk-text-primary)",
                     lineHeight: 1.3
                   },
                   children: badge.label
@@ -2122,7 +2118,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
@@ -2184,7 +2180,7 @@ function ProductTabs({
             "li",
             {
               style: {
-                color: "var(--commerce-text-secondary, #6b7280)",
+                color: "var(--sk-text-secondary)",
                 fontSize: "0.9375rem",
                 lineHeight: 1.6
               },
@@ -2209,7 +2205,7 @@ function ProductTabs({
               {
                 style: {
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text-muted, #9ca3af)",
+                  color: "var(--sk-text-secondary)",
                   fontWeight: 500
                 },
                 children: key
@@ -2221,7 +2217,7 @@ function ProductTabs({
                 style: {
                   margin: 0,
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text, #111827)"
+                  color: "var(--sk-text-primary)"
                 },
                 children: value
               }
@@ -2235,7 +2231,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"
           },
@@ -2254,14 +2250,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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
           /* @__PURE__ */ jsx(IconCalendar, {}),
           /* @__PURE__ */ jsxs("span", { children: [
             formatDate(schedule.starts_at),
@@ -2269,17 +2265,17 @@ function EventInfoBlock({ product, schedule }) {
             formatTime(schedule.starts_at)
           ] })
         ] }),
-        product.location && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        product.location && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
           /* @__PURE__ */ jsx(IconMapPin, {}),
           /* @__PURE__ */ jsx("span", { children: product.location })
         ] }),
-        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-primary)" }, children: [
           /* @__PURE__ */ jsx(IconExternalLink, {}),
           /* @__PURE__ */ jsx("span", { children: "Virtual Event" })
         ] }),
-        schedule?.capacity != null && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        schedule?.capacity != null && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
           /* @__PURE__ */ jsx(IconUsers, {}),
-          /* @__PURE__ */ jsx("span", { children: soldOut ? /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-danger, #dc2626)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning, #d97706)", fontWeight: 600 }, children: [
+          /* @__PURE__ */ jsx("span", { children: soldOut ? /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-error)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxs("span", { className: "skc-pulse", style: { color: "var(--sk-warning)", fontWeight: 600 }, children: [
             "Only ",
             schedule.spots_remaining,
             " spot",
@@ -2313,9 +2309,9 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
     onNext();
   };
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Contact Information" }),
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Contact Information" }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Full Name *" }),
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Full Name *" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2330,7 +2326,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Email Address *" }),
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Email Address *" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2344,7 +2340,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Phone Number" }),
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Phone Number" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2364,10 +2360,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"
@@ -2388,9 +2384,9 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     onChange({ ...address, [field]: value });
   };
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Address" }),
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Shipping Address" }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Street Address *" }),
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Street Address *" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2405,7 +2401,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Apt / Suite" }),
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Apt / Suite" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2419,7 +2415,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "City *" }),
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "City *" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2433,7 +2429,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "State *" }),
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "State *" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2449,7 +2445,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "ZIP Code *" }),
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "ZIP Code *" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2463,7 +2459,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Country" }),
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--sk-text-secondary)", marginBottom: 4 }, children: "Country" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2484,10 +2480,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"
@@ -2508,20 +2504,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__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
     ] });
   }
   if (!rates.length) {
     return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "1.5rem 0" }, children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
         "button",
         {
@@ -2529,10 +2525,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"
@@ -2543,7 +2539,7 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Method" }),
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Shipping Method" }),
     /* @__PURE__ */ 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__ */ jsxs(
@@ -2557,23 +2553,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__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: [
                 rate.carrier,
                 " \u2014 ",
                 rate.service
               ] }),
-              rate.estimatedDays != null && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
           ]
         },
         rate.objectId || idx
@@ -2587,10 +2583,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"
@@ -2813,21 +2809,21 @@ function PaymentStep({
     }
   };
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Payment" }),
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: "Payment" }),
     /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--sk-text-secondary)" }, children: [
             /* @__PURE__ */ jsxs("span", { children: [
               product.name,
               " ",
@@ -2837,7 +2833,7 @@ function PaymentStep({
             ] }),
             /* @__PURE__ */ jsx("span", { children: formatPrice(subtotal, product.currency) })
           ] }),
-          shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+          shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--sk-text-secondary)" }, children: [
             /* @__PURE__ */ jsxs("span", { children: [
               "Shipping (",
               shippingRate.carrier,
@@ -2854,10 +2850,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: [
@@ -2877,7 +2873,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"
@@ -2890,14 +2886,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__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
+      !cardReady && !error && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
     ] }),
     error && /* @__PURE__ */ jsxs(
       "div",
@@ -2907,10 +2903,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: [
@@ -2928,10 +2924,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",
@@ -2978,7 +2974,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: [
@@ -3019,7 +3015,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",
@@ -3041,21 +3037,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__ */ jsxs("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
+        /* @__PURE__ */ 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__ */ jsxs("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
+        result.confirmation_number && /* @__PURE__ */ jsxs("p", { style: { color: "var(--sk-text-secondary)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
           "Confirmation: ",
-          /* @__PURE__ */ jsx("strong", { style: { color: "var(--commerce-text, #111827)" }, children: result.confirmation_number })
+          /* @__PURE__ */ jsx("strong", { style: { color: "var(--sk-text-primary)" }, children: result.confirmation_number })
         ] }),
-        /* @__PURE__ */ 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__ */ 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__ */ jsx("button", { className: "skc-btn-primary", onClick: onClose, style: { maxWidth: 240 }, children: "Done" })
       ]
     }
@@ -3237,8 +3233,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"
             }
@@ -3248,8 +3244,8 @@ function ProductDetail({
     }
     return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
       /* @__PURE__ */ jsx("style", { children: STYLE_BLOCK }),
-      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
-        /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text, #111827)" }, children: "Product Not Found" }),
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--sk-text-secondary)" }, children: [
+        /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--sk-text-primary)" }, children: "Product Not Found" }),
         /* @__PURE__ */ jsx("p", { style: { marginTop: "0.5rem" }, children: "The product you are looking for does not exist or has been removed." })
       ] })
     ] });
@@ -3419,7 +3415,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"
@@ -3434,7 +3430,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
@@ -3447,7 +3443,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
@@ -3470,7 +3466,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)
                 }
@@ -3481,7 +3477,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)
@@ -3493,8 +3489,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
                     },
@@ -3506,7 +3502,7 @@ function ProductDetail({
                   }
                 )
               ] }),
-              product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted, #9ca3af)" }, children: [
+              product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
                 "/ ",
                 product.billing_period
               ] })
@@ -3519,7 +3515,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-danger, #dc2626)",
+              color: "var(--sk-error)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3536,7 +3532,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-warning, #d97706)",
+              color: "var(--sk-warning)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3554,7 +3550,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 500,
-              color: "var(--commerce-success, #059669)",
+              color: "var(--sk-success)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3582,7 +3578,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
@@ -3594,14 +3590,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
             },
@@ -3621,14 +3617,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
             },
@@ -3689,10 +3685,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",
@@ -3711,24 +3707,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__ */ 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__ */ 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__ */ 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__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
                 /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "var(--commerce-text, #111827)", marginBottom: 2 }, children: "Care Instructions" }),
+                /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "var(--sk-text-primary)", marginBottom: 2 }, children: "Care Instructions" }),
                 product.metadata.care_instructions
               ] })
             ]
@@ -3749,8 +3745,8 @@ function ProductDetail({
     ] }),
     showStickyBar && checkoutState === "browsing" && !isOutOfStock && !needsVariantSelection && /* @__PURE__ */ jsxs("div", { className: "skc-sticky-bar", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ 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__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)" }, children: formatPrice(currentPrice, product.currency) })
+        /* @__PURE__ */ 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__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--sk-error)" : "var(--sk-text-primary)" }, children: formatPrice(currentPrice, product.currency) })
       ] }),
       /* @__PURE__ */ jsx(
         "button",
@@ -3793,13 +3789,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__ */ jsx(IconX, {})
                 }
@@ -3813,15 +3809,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__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
+                  /* @__PURE__ */ jsx("p", { style: { color: "var(--sk-text-secondary)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
                 ] }),
                 checkoutState === "success" && checkoutResult && /* @__PURE__ */ jsx(SuccessStep, { result: checkoutResult, product, onClose: handleCloseCheckout }),
                 checkoutState === "customer-info" && /* @__PURE__ */ jsx(
@@ -3883,10 +3879,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",
@@ -4027,7 +4023,7 @@ function ProductGrid({
             width: "100%",
             padding: "0.625rem 1rem",
             borderRadius: "8px",
-            border: "1px solid #d1d5db",
+            border: "1px solid var(--sk-border)",
             fontSize: "0.9375rem"
           }
         }
@@ -4041,9 +4037,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: [
@@ -4061,9 +4057,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__ */ jsx("option", { value: "newest", children: "Newest First" }),
@@ -4078,7 +4074,7 @@ function ProductGrid({
       /* @__PURE__ */ 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",
@@ -4092,7 +4088,7 @@ function ProductGrid({
     }, children: [
       Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "site-kit-product-grid__skeleton", style: {
         aspectRatio: "1",
-        backgroundColor: "#f3f4f6",
+        backgroundColor: "var(--sk-surface)",
         borderRadius: "12px",
         animation: "pulse 2s infinite"
       } }, i)),
@@ -4124,13 +4120,13 @@ function ProductGrid({
     !loading && filteredProducts.length === 0 && /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F6CD}\uFE0F" }),
       /* @__PURE__ */ jsx("p", { style: {
         margin: 0,
-        color: "#6b7280",
+        color: "var(--sk-text-secondary)",
         fontSize: "1rem"
       }, children: searchQuery ? `No products match "${searchQuery}"` : emptyMessage }),
       searchQuery && /* @__PURE__ */ jsx(
@@ -4142,8 +4138,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"
           },
@@ -4227,8 +4223,8 @@ function ProductPage({
       }, children: /* @__PURE__ */ 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"
       } }) }),
@@ -4241,8 +4237,8 @@ function ProductPage({
       padding: "6rem 2rem"
     }, children: [
       /* @__PURE__ */ jsx("div", { style: { fontSize: "4rem", marginBottom: "1rem" }, children: "\u{1F50D}" }),
-      /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: "2rem", color: "#111827" }, children: "Product Not Found" }),
-      /* @__PURE__ */ jsx("p", { style: { marginTop: "0.75rem", color: "#6b7280" }, children: "The product you're looking for doesn't exist or has been removed." }),
+      /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: "2rem", color: "var(--sk-text-primary)" }, children: "Product Not Found" }),
+      /* @__PURE__ */ 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__ */ jsx(
         "a",
         {
@@ -4252,8 +4248,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
           },
@@ -4274,22 +4270,22 @@ function ProductPage({
     margin: 0,
     padding: 0
   }, children: [
-    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "/", style: { color: "#6b7280", textDecoration: "none" }, children: "Home" }) }),
-    /* @__PURE__ */ jsx("li", { style: { color: "#9ca3af" }, children: "/" }),
-    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: shopBasePath, style: { color: "#6b7280", textDecoration: "none" }, children: "Shop" }) }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "/", style: { color: "var(--sk-text-secondary)", textDecoration: "none" }, children: "Home" }) }),
+    /* @__PURE__ */ jsx("li", { style: { color: "var(--sk-text-secondary)" }, children: "/" }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: shopBasePath, style: { color: "var(--sk-text-secondary)", textDecoration: "none" }, children: "Shop" }) }),
     product.category && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("li", { style: { color: "#9ca3af" }, children: "/" }),
+      /* @__PURE__ */ jsx("li", { style: { color: "var(--sk-text-secondary)" }, children: "/" }),
       /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ jsx("li", { style: { color: "#9ca3af" }, children: "/" }),
-    /* @__PURE__ */ jsx("li", { style: { color: "#111827", fontWeight: 500 }, children: product.name })
+    /* @__PURE__ */ jsx("li", { style: { color: "var(--sk-text-secondary)" }, children: "/" }),
+    /* @__PURE__ */ jsx("li", { style: { color: "var(--sk-text-primary)", fontWeight: 500 }, children: product.name })
   ] }) });
   return /* @__PURE__ */ jsxs("div", { className: `site-kit-product-page ${className}`, style, children: [
     renderHead?.(product),
@@ -4301,7 +4297,7 @@ function ProductPage({
           display: "inline-flex",
           alignItems: "center",
           gap: "0.5rem",
-          color: "#6b7280",
+          color: "var(--sk-text-secondary)",
           textDecoration: "none",
           fontSize: "0.875rem"
         },
@@ -4330,7 +4326,7 @@ function ProductPage({
       /* @__PURE__ */ 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__ */ jsx(
@@ -4394,15 +4390,15 @@ function EventEmbed({
     return /* @__PURE__ */ jsxs("div", { className: `site-kit-event-embed ${className}`, style: {
       padding: "2rem",
       textAlign: "center",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "12px"
     }, children: [
       /* @__PURE__ */ 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"
       } }),
@@ -4601,31 +4597,31 @@ function CheckoutForm({
     return /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F389}" }),
-      /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 0.5rem", color: "#166534" }, children: actualMode === "register" ? "Registration Complete!" : "Order Confirmed!" }),
-      /* @__PURE__ */ 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__ */ jsx("h3", { style: { margin: "0 0 0.5rem", color: "var(--sk-success)" }, children: actualMode === "register" ? "Registration Complete!" : "Order Confirmed!" }),
+      /* @__PURE__ */ 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__ */ jsx("div", { className: `site-kit-checkout ${className}`, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: formClassName, children: [
     /* @__PURE__ */ jsxs("div", { style: {
       padding: "1rem",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "8px",
       marginBottom: "1.5rem"
     }, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 0.25rem", fontSize: "1rem" }, children: offering.name }),
-          offering.short_description && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "0.875rem", color: "#666" }, children: offering.short_description })
+          offering.short_description && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { marginTop: "1rem", display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-        /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", color: "#666" }, children: "Quantity:" }),
+        /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: "Quantity:" }),
         /* @__PURE__ */ jsx(
           "select",
           {
@@ -4635,8 +4631,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__ */ jsx("option", { value: n, children: n }, n))
           }
@@ -4649,13 +4645,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__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#166534" }, children: discountResult.name || discountCode }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "#15803d", marginLeft: "0.5rem" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--sk-success)" }, children: discountResult.name || discountCode }),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--sk-success)", marginLeft: "0.5rem" }, children: [
           "\u2212",
           formatPrice(discountAmount, offering.currency)
         ] })
@@ -4668,7 +4664,7 @@ function CheckoutForm({
           style: {
             background: "none",
             border: "none",
-            color: "#dc2626",
+            color: "var(--sk-error)",
             cursor: "pointer",
             fontSize: "0.75rem",
             fontWeight: 500
@@ -4689,7 +4685,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"
           }
         }
@@ -4703,8 +4699,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",
@@ -4716,16 +4712,16 @@ function CheckoutForm({
     ] }) }),
     discountResult?.valid && !isFree && /* @__PURE__ */ jsxs("div", { style: {
       padding: "0.75rem 1rem",
-      background: "#f9fafb",
+      background: "var(--sk-bg-elevated)",
       borderRadius: "6px",
       marginBottom: "1.5rem",
       fontSize: "0.875rem"
     }, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Subtotal" }),
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-text-secondary)" }, children: "Subtotal" }),
         /* @__PURE__ */ jsx("span", { children: formatPrice(subtotal, offering.currency) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem", color: "#16a34a" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem", color: "var(--sk-success)" }, children: [
         /* @__PURE__ */ jsx("span", { children: "Discount" }),
         /* @__PURE__ */ jsxs("span", { children: [
           "\u2212",
@@ -4733,10 +4729,10 @@ function CheckoutForm({
         ] })
       ] }),
       shippingCost > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Shipping" }),
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-text-secondary)" }, children: "Shipping" }),
         /* @__PURE__ */ jsx("span", { children: formatPrice(shippingCost, offering.currency) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", borderTop: "1px solid #e5e7eb", paddingTop: "0.5rem", marginTop: "0.25rem", fontWeight: 600 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--sk-border)", paddingTop: "0.5rem", marginTop: "0.25rem", fontWeight: 600 }, children: [
         /* @__PURE__ */ jsx("span", { children: "Total" }),
         /* @__PURE__ */ jsx("span", { children: formatPrice(total, offering.currency) })
       ] })
@@ -4756,7 +4752,7 @@ function CheckoutForm({
               width: "100%",
               padding: "0.625rem 0.75rem",
               borderRadius: "6px",
-              border: "1px solid #d1d5db",
+              border: "1px solid var(--sk-border)",
               fontSize: "1rem"
             }
           }
@@ -4776,7 +4772,7 @@ function CheckoutForm({
               width: "100%",
               padding: "0.625rem 0.75rem",
               borderRadius: "6px",
-              border: "1px solid #d1d5db",
+              border: "1px solid var(--sk-border)",
               fontSize: "1rem"
             }
           }
@@ -4795,14 +4791,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__ */ jsxs("div", { style: { marginTop: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid #e5e7eb" }, children: [
+    shippingEnabled && !isEvent && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid var(--sk-border)" }, children: [
       /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 1rem", fontSize: "1rem" }, children: "Shipping Address" }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
         /* @__PURE__ */ jsxs("div", { children: [
@@ -4816,7 +4812,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" }
             }
           )
         ] }),
@@ -4829,7 +4825,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" }
             }
           )
         ] }),
@@ -4844,7 +4840,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" }
               }
             )
           ] }),
@@ -4858,7 +4854,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" }
               }
             )
           ] })
@@ -4873,7 +4869,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" }
             }
           )
         ] })
@@ -4888,9 +4884,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"
@@ -4909,8 +4905,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: [
@@ -4929,7 +4925,7 @@ function CheckoutForm({
                 rate.service
               ] }),
               /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: formatPrice(parseFloat(rate.amount), rate.currency || "USD") }),
-              rate.estimatedDays && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+              rate.estimatedDays && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)" }, children: [
                 "(",
                 rate.estimatedDays,
                 " days)"
@@ -4946,7 +4942,7 @@ function CheckoutForm({
             style: {
               marginTop: "0.75rem",
               fontSize: "0.875rem",
-              color: "#6b7280",
+              color: "var(--sk-text-secondary)",
               background: "none",
               border: "none",
               cursor: "pointer",
@@ -4960,10 +4956,10 @@ function CheckoutForm({
     error && /* @__PURE__ */ 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__ */ jsx(
@@ -4980,7 +4976,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"
         },
@@ -4990,7 +4986,7 @@ function CheckoutForm({
     !isFree && /* @__PURE__ */ 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__ */ jsxs("div", { style: {
@@ -5005,7 +5001,7 @@ function CheckoutForm({
         /* @__PURE__ */ jsx("rect", { width: "24", height: "24", rx: "4", fill: "#3E4348" }),
         /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "white" })
       ] }),
-      /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.625rem", color: "#999", letterSpacing: "0.02em" }, children: [
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.625rem", color: "var(--sk-text-secondary)", letterSpacing: "0.02em" }, children: [
         "Powered by ",
         processor === "stripe" ? "Stripe" : "Square"
       ] })
@@ -5064,13 +5060,13 @@ function RegistrationForm({
     return /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F389}" }),
-      /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 0.5rem", color: "#166534" }, children: "You're Registered!" }),
-      /* @__PURE__ */ jsx("p", { style: { color: "#15803d", margin: 0 }, children: successMessage || `You've been registered for ${event.name}. Check your email for confirmation.` })
+      /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 0.5rem", color: "var(--sk-success)" }, children: "You're Registered!" }),
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: `site-kit-registration ${className}`, children: [
@@ -5091,7 +5087,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5111,7 +5107,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5130,7 +5126,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5154,7 +5150,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"
               }
@@ -5170,9 +5166,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__ */ jsx("option", { value: "", children: "Select..." }),
@@ -5192,7 +5188,7 @@ function RegistrationForm({
                 width: "100%",
                 padding: "0.625rem 0.75rem",
                 borderRadius: "6px",
-                border: "1px solid #d1d5db",
+                border: "1px solid var(--sk-border)",
                 fontSize: "1rem"
               }
             }
@@ -5202,10 +5198,10 @@ function RegistrationForm({
       error && /* @__PURE__ */ 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__ */ jsx(
@@ -5222,7 +5218,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"
           },
@@ -5284,7 +5280,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__ */ jsx(
                 "img",
@@ -5299,7 +5295,7 @@ function CalendarEventCell({
                 }
               ) : /* @__PURE__ */ jsx("span", { style: {
                 fontSize: "0.65rem",
-                color: "#1d4ed8",
+                color: "var(--sk-primary)",
                 fontWeight: 500,
                 padding: "2px 4px",
                 display: "block",
@@ -5319,8 +5315,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",
@@ -5361,8 +5357,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",
@@ -5485,7 +5481,7 @@ function CalendarView({
     }
   };
   return /* @__PURE__ */ 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)"
@@ -5499,7 +5495,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__ */ jsx(
@@ -5509,7 +5505,7 @@ function CalendarView({
               style: {
                 padding: "0.5rem",
                 border: "none",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 borderRadius: "6px",
                 cursor: "pointer",
                 fontSize: "1.25rem",
@@ -5535,7 +5531,7 @@ function CalendarView({
                   fontSize: "0.75rem",
                   border: "none",
                   background: "transparent",
-                  color: "#2563eb",
+                  color: "var(--sk-primary)",
                   cursor: "pointer"
                 },
                 children: "Today"
@@ -5549,7 +5545,7 @@ function CalendarView({
               style: {
                 padding: "0.5rem",
                 border: "none",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 borderRadius: "6px",
                 cursor: "pointer",
                 fontSize: "1.25rem",
@@ -5565,7 +5561,7 @@ function CalendarView({
     /* @__PURE__ */ jsx("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(7, 1fr)",
-      borderBottom: "1px solid #e5e7eb"
+      borderBottom: "1px solid var(--sk-border)"
     }, children: dayHeaders.map((day) => /* @__PURE__ */ jsx(
       "div",
       {
@@ -5574,7 +5570,7 @@ function CalendarView({
           textAlign: "center",
           fontSize: "0.75rem",
           fontWeight: 600,
-          color: "#666",
+          color: "var(--sk-text-secondary)",
           textTransform: "uppercase"
         },
         children: day
@@ -5592,9 +5588,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: [
@@ -5611,8 +5607,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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
             day.events.slice(0, 3).map((item) => /* @__PURE__ */ jsx(
@@ -5628,7 +5624,7 @@ function CalendarView({
             )),
             day.events.length > 3 && /* @__PURE__ */ jsxs("span", { style: {
               fontSize: "0.65rem",
-              color: "#666",
+              color: "var(--sk-text-secondary)",
               textAlign: "center"
             }, children: [
               "+",
@@ -5865,7 +5861,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)"
           },
@@ -5881,7 +5877,7 @@ function EventModal({
                   right: "1rem",
                   padding: "0.5rem",
                   border: "none",
-                  background: "#f3f4f6",
+                  background: "var(--sk-surface)",
                   borderRadius: "50%",
                   cursor: "pointer",
                   fontSize: "1.25rem",
@@ -5915,8 +5911,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",
@@ -5925,8 +5921,8 @@ function EventModal({
             ] }),
             /* @__PURE__ */ jsx("div", { className: `site-kit-modal-content ${contentClassName}`, style: { padding: "1.5rem" }, children: success ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "2rem 0" }, children: [
               /* @__PURE__ */ jsx("div", { style: { fontSize: "4rem", marginBottom: "1rem" }, children: "\u{1F389}" }),
-              /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 0.5rem", color: "#166534" }, children: "You're Registered!" }),
-              /* @__PURE__ */ jsx("p", { style: { color: "#15803d", margin: "0 0 1.5rem" }, children: "Check your email for confirmation details." }),
+              /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 0.5rem", color: "var(--sk-success)" }, children: "You're Registered!" }),
+              /* @__PURE__ */ jsx("p", { style: { color: "var(--sk-success)", margin: "0 0 1.5rem" }, children: "Check your email for confirmation details." }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -5937,8 +5933,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"
@@ -5947,7 +5943,7 @@ function EventModal({
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.5rem" }, children: [
                 /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 0.5rem", fontSize: "1.5rem", fontWeight: 600, paddingRight: "2rem" }, children: event.name }),
-                schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", color: "#666", fontSize: "0.9rem" }, children: [
+                schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", color: "var(--sk-text-secondary)", fontSize: "0.9rem" }, children: [
                   /* @__PURE__ */ jsxs("span", { children: [
                     "\u{1F4C5} ",
                     formatDate(schedule.starts_at)
@@ -5961,13 +5957,13 @@ function EventModal({
                     event.location
                   ] })
                 ] }),
-                event.short_description && /* @__PURE__ */ jsx("p", { style: { margin: "0.75rem 0 0", color: "#666", fontSize: "0.9rem" }, children: event.short_description }),
+                event.short_description && /* @__PURE__ */ 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__ */ 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 ",
@@ -5980,22 +5976,22 @@ function EventModal({
               soldOut ? /* @__PURE__ */ jsx("div", { style: {
                 padding: "2rem",
                 textAlign: "center",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 borderRadius: "8px"
-              }, children: /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#666" }, children: "This event is sold out. Check back for future dates!" }) }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+              }, children: /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary)" }, children: "This event is sold out. Check back for future dates!" }) }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
                 !isFree && event.price_is_public && /* @__PURE__ */ jsxs("div", { style: {
                   padding: "1rem",
-                  background: "#f9fafb",
+                  background: "var(--sk-bg-elevated)",
                   borderRadius: "8px",
                   marginBottom: "1rem"
                 }, children: [
                   /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsxs("div", { children: [
                       /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "1.25rem" }, children: formatPrice(event.price, event.currency) }),
-                      /* @__PURE__ */ jsx("span", { style: { color: "#666", fontSize: "0.875rem" }, children: " per ticket" })
+                      /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-text-secondary)", fontSize: "0.875rem" }, children: " per ticket" })
                     ] }),
                     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-                      /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", color: "#666" }, children: "Qty:" }),
+                      /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: "Qty:" }),
                       /* @__PURE__ */ jsx(
                         "select",
                         {
@@ -6004,8 +6000,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__ */ jsx("option", { value: i + 1, children: i + 1 }, i + 1))
@@ -6016,7 +6012,7 @@ function EventModal({
                   quantity > 1 && /* @__PURE__ */ 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: [
@@ -6039,7 +6035,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6059,7 +6055,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6078,7 +6074,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6101,7 +6097,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"
@@ -6117,9 +6113,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__ */ jsx("option", { value: "", children: "Select..." }),
@@ -6138,7 +6134,7 @@ function EventModal({
                           width: "100%",
                           padding: "0.625rem 0.75rem",
                           borderRadius: "6px",
-                          border: "1px solid #d1d5db",
+                          border: "1px solid var(--sk-border)",
                           fontSize: "1rem"
                         }
                       }
@@ -6150,7 +6146,7 @@ function EventModal({
                     display: "block",
                     fontSize: "0.875rem",
                     fontWeight: 500,
-                    color: "#374151",
+                    color: "var(--sk-text-primary)",
                     marginBottom: "0.375rem"
                   }, children: "Card Details *" }),
                   /* @__PURE__ */ jsx(
@@ -6160,22 +6156,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__ */ jsx("p", { style: { fontSize: "0.75rem", color: "#9ca3af", marginTop: "0.25rem" }, children: "Loading card form..." })
+                  !cardReady && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--sk-text-secondary)", marginTop: "0.25rem" }, children: "Loading card form..." })
                 ] }),
                 error && /* @__PURE__ */ 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__ */ jsx(
@@ -6191,8 +6187,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)}`
@@ -6201,13 +6197,13 @@ function EventModal({
                 !isFree && /* @__PURE__ */ 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__ */ jsxs("p", { style: { fontSize: "0.625rem", color: "#999", margin: "0.25rem 0 0", textAlign: "center" }, children: [
+                !isFree && processor && /* @__PURE__ */ 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"
                 ] })
@@ -6417,15 +6413,15 @@ function EventsWidget({
     return /* @__PURE__ */ jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: `site-kit-events-header ${headerClassName}`, style: { marginBottom: "1.5rem" }, children: [
         title && /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+        subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "#666" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "var(--sk-text-secondary)" }, children: [
         /* @__PURE__ */ 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"
         } }),
@@ -6442,22 +6438,22 @@ function EventsWidget({
     return /* @__PURE__ */ jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: `site-kit-events-header ${headerClassName}`, style: { marginBottom: "1.5rem" }, children: [
         title && /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+        subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "#dc2626" }, children: /* @__PURE__ */ jsx("p", { children: error }) })
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "var(--sk-error)" }, children: /* @__PURE__ */ jsx("p", { children: error }) })
     ] });
   }
   if (events.length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: `site-kit-events-header ${headerClassName}`, style: { marginBottom: "1.5rem" }, children: [
         title && /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+        subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "#666" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "3rem 1rem", color: "var(--sk-text-secondary)" }, children: [
         showEmptyIcon && /* @__PURE__ */ 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",
@@ -6485,7 +6481,7 @@ function EventsWidget({
         children: [
           /* @__PURE__ */ jsxs("div", { children: [
             title && /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600 }, children: title }),
-            subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "#666" }, children: subtitle })
+            subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary)" }, children: subtitle })
           ] }),
           showViewToggle && /* @__PURE__ */ jsxs(
             "div",
@@ -6494,7 +6490,7 @@ function EventsWidget({
               style: {
                 display: "flex",
                 gap: "0.25rem",
-                background: "#f3f4f6",
+                background: "var(--sk-surface)",
                 padding: "0.25rem",
                 borderRadius: "0.5rem"
               },
@@ -6510,8 +6506,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",
@@ -6535,8 +6531,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",
@@ -6560,8 +6556,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",
@@ -6596,8 +6592,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",
@@ -6605,12 +6601,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: [
@@ -6618,7 +6614,7 @@ function EventsWidget({
                 width: "160px",
                 minWidth: "160px",
                 flexShrink: 0,
-                background: "#f3f4f6"
+                background: "var(--sk-surface)"
               }, children: [
                 imageUrl ? /* @__PURE__ */ jsx(
                   "img",
@@ -6651,7 +6647,7 @@ function EventsWidget({
                       display: imageUrl ? "none" : "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      color: "#9ca3af"
+                      color: "var(--sk-text-secondary)"
                     },
                     "aria-hidden": true,
                     children: /* @__PURE__ */ jsx(CalendarIcon, {})
@@ -6661,20 +6657,20 @@ function EventsWidget({
               /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.75rem", padding: "1.25rem" }, children: [
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "1rem" }, children: [
                   /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "#1f2937" }, children: eventItem.name }),
-                    eventItem.short_description && /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "#6b7280", fontSize: "0.875rem", lineHeight: 1.5 }, children: eventItem.short_description })
+                    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--sk-text-primary)" }, children: eventItem.name }),
+                    eventItem.short_description && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
+                nextSchedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
                   /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsx(CalendarIcon, {}),
                     formatDate(nextSchedule.starts_at)
@@ -6688,7 +6684,7 @@ function EventsWidget({
                     eventItem.location
                   ] }),
                   nextSchedule.spots_remaining !== null && nextSchedule.spots_remaining !== void 0 && /* @__PURE__ */ 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` })
                 ] })
@@ -6705,8 +6701,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,
@@ -6738,7 +6734,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) {
@@ -6763,9 +6759,9 @@ function EventsWidget({
                 flexDirection: "column",
                 justifyContent: "flex-end",
                 padding: "1.25rem",
-                color: "#fff"
+                color: "var(--sk-bg)"
               }, children: [
-                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", marginTop: "0.75rem", fontSize: "0.8125rem", opacity: 0.95 }, children: [
                   /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
@@ -6800,8 +6796,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,
@@ -6850,5 +6846,5 @@ function getApiKey2() {
 }
 
 export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, createPaymentIntent, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress, validateDiscountCode };
-//# sourceMappingURL=chunk-4X5TFGKD.mjs.map
-//# sourceMappingURL=chunk-4X5TFGKD.mjs.map
+//# sourceMappingURL=chunk-P3POHQWW.mjs.map
+//# sourceMappingURL=chunk-P3POHQWW.mjs.map