@sonordev/site-kit 1.5.5 → 2.0.0

package/dist/brand.css

@@ -0,0 +1,87 @@
+/**
+ * @sonordev/site-kit — Brand Token Contract
+ *
+ * Import this file in your root layout or globals.css to get sensible defaults
+ * for all site-kit components. Override any token in your project's globals.css.
+ *
+ * Usage:
+ *   import '@sonordev/site-kit/brand.css'
+ *
+ * Then override in your globals.css:
+ *   :root {
+ *     --sk-primary: #54b948;
+ *     --sk-primary-rgb: 84, 185, 72;
+ *   }
+ *
+ * All site-kit components (forms, commerce, booking, chat, popups, blog)
+ * read from these tokens. Set them once and every widget matches your brand.
+ */
+
+:root {
+  /* ── Brand colors ─────────────────────────────────────────────────────── */
+  --sk-primary: #3b82f6;
+  --sk-primary-rgb: 59, 130, 246;
+  --sk-primary-hover: #2563eb;
+  --sk-primary-light: #dbeafe;
+  --sk-secondary: #8b5cf6;
+  --sk-secondary-rgb: 139, 92, 246;
+
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --sk-bg: #ffffff;
+  --sk-bg-elevated: #f8fafc;
+  --sk-surface: #f1f5f9;
+  --sk-surface-hover: #e2e8f0;
+  --sk-surface-border: #e2e8f0;
+
+  /* ── Text ──────────────────────────────────────────────────────────────── */
+  --sk-text-primary: #0f172a;
+  --sk-text-secondary: #475569;
+  --sk-text-tertiary: #94a3b8;
+
+  /* ── Feedback ──────────────────────────────────────────────────────────── */
+  --sk-error: #ef4444;
+  --sk-success: #059669;
+  --sk-warning: #d97706;
+
+  /* ── Typography ────────────────────────────────────────────────────────── */
+  --sk-font: inherit;
+  --sk-font-size: 16px;
+  --sk-label-color: inherit;
+  --sk-label-weight: 500;
+
+  /* ── Borders & Radius ──────────────────────────────────────────────────── */
+  --sk-radius-sm: 0.375rem;
+  --sk-radius: 0.5rem;
+  --sk-radius-lg: 0.75rem;
+  --sk-border: #d1d5db;
+  --sk-border-focus: var(--sk-primary);
+
+  /* ── Inputs ────────────────────────────────────────────────────────────── */
+  --sk-input-bg: #ffffff;
+  --sk-input-border: var(--sk-border);
+  --sk-input-border-focus: var(--sk-border-focus);
+  --sk-input-border-error: var(--sk-error);
+  --sk-input-radius: var(--sk-radius-sm);
+  --sk-input-padding: 10px 12px;
+
+  /* ── Buttons ───────────────────────────────────────────────────────────── */
+  --sk-btn-bg: var(--sk-primary);
+  --sk-btn-color: #ffffff;
+  --sk-btn-hover-bg: var(--sk-primary-hover);
+  --sk-btn-radius: var(--sk-radius-sm);
+  --sk-btn-padding: 10px 20px;
+  --sk-btn-secondary-bg: transparent;
+  --sk-btn-secondary-color: var(--sk-text-primary);
+  --sk-btn-secondary-border: var(--sk-border);
+
+  /* ── Progress & Rating ─────────────────────────────────────────────────── */
+  --sk-progress-bg: #e5e7eb;
+  --sk-progress-fill: var(--sk-primary);
+  --sk-rating-active: #fbbf24;
+  --sk-rating-inactive: #d1d5db;
+
+  /* ── Shadows ───────────────────────────────────────────────────────────── */
+  --sk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --sk-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --sk-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}

package/dist/{chunk-ZU6YPEAF.mjs → chunk-2OJCYWSQ.mjs}

@@ -219,7 +219,7 @@ function GlobeIcon() {
 }
 function CheckCircleIcon() {
   return /* @__PURE__ */ jsxs("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "28", fill: "var(--bw-primary)" }),
+    /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "28", fill: "var(--sk-primary)" }),
     /* @__PURE__ */ jsx("path", { d: "M18 28.5L24.5 35L38 21.5", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
@@ -410,11 +410,23 @@ function BookingWidget({
     return { morning, afternoon, evening };
   }, [slots]);
   const cssVars = {
-    "--bw-primary": styles.primaryColor || "#0069ff",
-    "--bw-primary-light": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, white)` : "#e8f1ff",
-    "--bw-primary-hover": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 90%, black)` : "#0055d4",
-    "--bw-radius": styles.borderRadius || "8px",
-    "--bw-font": styles.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+    "--sk-primary": styles.primaryColor || "#0069ff",
+    "--sk-primary-hover": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 90%, black)` : "#0055d4",
+    "--sk-primary-light": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, white)` : "#e8f1ff",
+    "--sk-bg": "#ffffff",
+    "--sk-bg-elevated": "#f9fafb",
+    "--sk-surface": "#f3f4f6",
+    "--sk-text-primary": "#1a1a1a",
+    "--sk-text-secondary": "#6b7280",
+    "--sk-text-tertiary": "#9ca3af",
+    "--sk-border": "#e5e7eb",
+    "--sk-error": "#ef4444",
+    "--sk-success": "#10b981",
+    "--sk-warning": "#f59e0b",
+    "--sk-radius": styles.borderRadius || "8px",
+    "--sk-font": styles.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    "--sk-input-border": "#e5e7eb",
+    "--sk-input-focus-ring": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, white)` : "#e8f1ff"
   };
   return /* @__PURE__ */ jsxs("div", { className: `bw-root ${className}`, style: cssVars, children: [
     error && /* @__PURE__ */ jsxs("div", { className: "bw-error", role: "alert", children: [
@@ -692,8 +704,8 @@ function TimeButton({
 var WIDGET_CSS = `
 /* \u2500\u2500 Base \u2500\u2500 */
 .bw-root {
-  font-family: var(--bw-font);
-  color: #1a1a1a;
+  font-family: var(--sk-font);
+  color: var(--sk-text-primary);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
@@ -711,7 +723,7 @@ var WIDGET_CSS = `
 .bw-error {
   display: flex; align-items: center; justify-content: space-between; gap: 12px;
   background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
-  padding: 10px 14px; border-radius: var(--bw-radius); margin-bottom: 16px; font-size: 0.875rem;
+  padding: 10px 14px; border-radius: var(--sk-radius); margin-bottom: 16px; font-size: 0.875rem;
 }
 .bw-error button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0; }
 
@@ -720,67 +732,67 @@ var WIDGET_CSS = `
 .bw-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
 .bw-badge {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: 0.8125rem; color: #6b7280; font-weight: 400;
+  font-size: 0.8125rem; color: var(--sk-text-secondary); font-weight: 400;
 }
 .bw-badge-accent {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: 0.8125rem; color: var(--bw-primary); font-weight: 500;
+  font-size: 0.8125rem; color: var(--sk-primary); font-weight: 500;
 }
 
 /* \u2500\u2500 Info Header \u2500\u2500 */
 .bw-info-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
 .bw-back {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e5e7eb;
-  background: #fff; cursor: pointer; color: #4b5563; flex-shrink: 0; margin-top: 1px;
+  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sk-border);
+  background: var(--sk-bg); cursor: pointer; color: var(--sk-text-secondary); flex-shrink: 0; margin-top: 1px;
   transition: all 0.15s;
 }
-.bw-back:hover { background: #f3f4f6; border-color: #d1d5db; }
+.bw-back:hover { background: var(--sk-surface); border-color: var(--sk-border); }
 
 /* \u2500\u2500 Loading \u2500\u2500 */
 .bw-loading {
   display: flex; align-items: center; justify-content: center; gap: 8px;
-  padding: 32px; color: #6b7280; font-size: 0.875rem;
+  padding: 32px; color: var(--sk-text-secondary); font-size: 0.875rem;
 }
 
 /* \u2500\u2500 Type Selection \u2500\u2500 */
 .bw-type-list { display: flex; flex-direction: column; gap: 10px; }
 .bw-type-card {
   display: flex; flex-direction: column; text-align: left; gap: 4px;
-  padding: 16px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
-  background: #fff; cursor: pointer; transition: all 0.15s;
+  padding: 16px; border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius);
+  background: var(--sk-bg); cursor: pointer; transition: all 0.15s;
 }
-.bw-type-card:hover { border-color: var(--bw-primary); box-shadow: 0 0 0 3px var(--bw-primary-light); }
+.bw-type-card:hover { border-color: var(--sk-primary); box-shadow: 0 0 0 3px var(--sk-primary-light); }
 .bw-type-name { font-weight: 600; font-size: 0.9375rem; }
-.bw-type-desc { color: #6b7280; font-size: 0.8125rem; }
-.bw-type-meta { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: #9ca3af; margin-top: 4px; }
+.bw-type-desc { color: var(--sk-text-secondary); font-size: 0.8125rem; }
+.bw-type-meta { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--sk-text-tertiary); margin-top: 4px; }
 
 /* \u2500\u2500 Date-Time Layout \u2500\u2500 */
 .bw-datetime-layout {
-  display: flex; gap: 0; border-top: 1px solid #f0f0f0; padding-top: 16px;
+  display: flex; gap: 0; border-top: 1px solid var(--sk-border); padding-top: 16px;
 }
 @media (max-width: 559px) {
   .bw-datetime-layout { flex-direction: column; }
 }
 @media (min-width: 560px) {
   .bw-datetime-layout { min-height: 400px; }
-  .bw-calendar { flex: 1 1 auto; padding-right: 16px; border-right: 1px solid #f0f0f0; }
+  .bw-calendar { flex: 1 1 auto; padding-right: 16px; border-right: 1px solid var(--sk-border); }
   .bw-times { width: 180px; flex-shrink: 0; padding-left: 16px; }
 }
 
 /* \u2500\u2500 Calendar \u2500\u2500 */
 .bw-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
-.bw-cal-title { font-weight: 600; font-size: 0.9375rem; color: #111827; }
+.bw-cal-title { font-weight: 600; font-size: 0.9375rem; color: var(--sk-text-primary); }
 .bw-cal-nav {
   display: inline-flex; align-items: center; justify-content: center;
   width: 32px; height: 32px; border-radius: 50%; border: none;
-  background: transparent; cursor: pointer; color: #374151; transition: background 0.15s;
+  background: transparent; cursor: pointer; color: var(--sk-text-primary); transition: background 0.15s;
 }
-.bw-cal-nav:hover:not(:disabled) { background: #f3f4f6; }
+.bw-cal-nav:hover:not(:disabled) { background: var(--sk-surface); }
 .bw-cal-nav:disabled { opacity: 0.25; cursor: default; }
 
 .bw-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; margin-bottom: 4px; }
-.bw-cal-wd { font-size: 0.6875rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
+.bw-cal-wd { font-size: 0.6875rem; font-weight: 600; color: var(--sk-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
 
 .bw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
 .bw-cal-empty { aspect-ratio: 1; }
@@ -788,19 +800,19 @@ var WIDGET_CSS = `
   aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
   border: none; background: none; border-radius: 50%;
   font-size: 0.8125rem; font-weight: 500; cursor: pointer;
-  color: #111827; transition: all 0.15s; position: relative;
+  color: var(--sk-text-primary); transition: all 0.15s; position: relative;
 }
-.bw-cal-day:hover:not(.disabled):not(.selected) { background: #f3f4f6; }
+.bw-cal-day:hover:not(.disabled):not(.selected) { background: var(--sk-surface); }
 .bw-cal-day.today:not(.selected)::after {
   content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
-  width: 4px; height: 4px; border-radius: 50%; background: var(--bw-primary);
+  width: 4px; height: 4px; border-radius: 50%; background: var(--sk-primary);
 }
 .bw-cal-day.selected {
-  background: var(--bw-primary); color: #fff; font-weight: 600;
+  background: var(--sk-primary); color: #fff; font-weight: 600;
 }
 /* Past / out-of-range: visible on light and dark parent pages */
 .bw-root button.bw-cal-day.disabled {
-  color: #9ca3af;
+  color: var(--sk-text-tertiary);
   cursor: default;
   opacity: 1;
 }
@@ -811,86 +823,86 @@ var WIDGET_CSS = `
 .bw-times.visible { opacity: 1; }
 .bw-times-placeholder {
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
-  height: 100%; min-height: 160px; color: #9ca3af; font-size: 0.8125rem; text-align: center; padding: 16px;
+  height: 100%; min-height: 160px; color: var(--sk-text-tertiary); font-size: 0.8125rem; text-align: center; padding: 16px;
 }
 .bw-times-empty {
   display: flex; align-items: center; justify-content: center;
-  height: 100%; min-height: 160px; color: #9ca3af; font-size: 0.8125rem; text-align: center; padding: 16px;
+  height: 100%; min-height: 160px; color: var(--sk-text-tertiary); font-size: 0.8125rem; text-align: center; padding: 16px;
 }
 .bw-times-scroll { overflow-y: auto; max-height: 400px; overflow-x: hidden; }
-.bw-times-date { font-weight: 600; font-size: 0.8125rem; color: #374151; margin: 0 0 12px 0; }
+.bw-times-date { font-weight: 600; font-size: 0.8125rem; color: var(--sk-text-primary); margin: 0 0 12px 0; }
 .bw-time-group { margin-bottom: 16px; }
 .bw-times-scroll-hint {
-  font-size: 0.6875rem; color: #9ca3af; text-align: center; margin: 8px 0 0 0; padding-bottom: 8px;
+  font-size: 0.6875rem; color: var(--sk-text-tertiary); text-align: center; margin: 8px 0 0 0; padding-bottom: 8px;
 }
-.bw-time-label { display: block; font-size: 0.6875rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
+.bw-time-label { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--sk-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
 
 .bw-time-btn {
   display: block; width: 100%;
   padding: 10px 12px; margin-bottom: 6px;
-  border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
-  background: #fff; cursor: pointer;
-  font-size: 0.875rem; font-weight: 500; color: var(--bw-primary); text-align: center;
+  border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius);
+  background: var(--sk-bg); cursor: pointer;
+  font-size: 0.875rem; font-weight: 500; color: var(--sk-primary); text-align: center;
   transition: all 0.15s;
 }
 .bw-time-btn:hover:not(:disabled) {
-  border-color: var(--bw-primary); background: var(--bw-primary-light);
+  border-color: var(--sk-primary); background: var(--sk-primary-light);
 }
 .bw-time-btn.selected {
-  border-color: var(--bw-primary); background: var(--bw-primary); color: #fff;
+  border-color: var(--sk-primary); background: var(--sk-primary); color: #fff;
 }
 .bw-time-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .bw-time-btn-wrap {
   display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
-  border: 1.5px solid var(--bw-primary); border-radius: var(--bw-radius); overflow: hidden;
+  border: 1.5px solid var(--sk-primary); border-radius: var(--sk-radius); overflow: hidden;
   animation: bw-fade-in 0.15s ease-out;
 }
 .bw-time-btn-wrap .bw-time-text {
-  flex: 1; padding: 10px 12px; font-size: 0.875rem; font-weight: 500; color: #374151; text-align: center;
-  background: var(--bw-primary-light);
+  flex: 1; padding: 10px 12px; font-size: 0.875rem; font-weight: 500; color: var(--sk-text-primary); text-align: center;
+  background: var(--sk-primary-light);
 }
 .bw-time-confirm {
   display: inline-flex; align-items: center; justify-content: center; gap: 4px;
   padding: 10px 16px; border: none;
-  background: var(--bw-primary); color: #fff;
+  background: var(--sk-primary); color: #fff;
   font-size: 0.8125rem; font-weight: 600; cursor: pointer;
   transition: background 0.15s;
 }
-.bw-time-confirm:hover:not(:disabled) { background: var(--bw-primary-hover); }
+.bw-time-confirm:hover:not(:disabled) { background: var(--sk-primary-hover); }
 .bw-time-confirm:disabled { opacity: 0.7; cursor: not-allowed; }
 
 /* \u2500\u2500 Form \u2500\u2500 */
 .bw-hold-notice {
   display: flex; align-items: center; gap: 8px;
-  background: var(--bw-primary-light); color: var(--bw-primary);
-  padding: 10px 14px; border-radius: var(--bw-radius);
+  background: var(--sk-primary-light); color: var(--sk-primary);
+  padding: 10px 14px; border-radius: var(--sk-radius);
   font-size: 0.8125rem; font-weight: 500; margin-bottom: 20px;
 }
 .bw-form { display: flex; flex-direction: column; gap: 16px; }
 .bw-field label {
-  display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 4px;
+  display: block; font-size: 0.8125rem; font-weight: 500; color: var(--sk-text-primary); margin-bottom: 4px;
 }
-.bw-req { color: #ef4444; }
+.bw-req { color: var(--sk-error); }
 .bw-field input, .bw-field textarea {
   display: block; width: 100%;
-  padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
-  font-size: 0.9375rem; font-family: inherit; color: #1a1a1a; background: #fff;
+  padding: 10px 12px; border: 1.5px solid var(--sk-input-border); border-radius: var(--sk-radius);
+  font-size: 0.9375rem; font-family: inherit; color: var(--sk-text-primary); background: var(--sk-bg);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
-.bw-field input::placeholder, .bw-field textarea::placeholder { color: #c0c5cc; }
+.bw-field input::placeholder, .bw-field textarea::placeholder { color: var(--sk-text-tertiary); }
 .bw-field input:focus, .bw-field textarea:focus {
-  outline: none; border-color: var(--bw-primary);
-  box-shadow: 0 0 0 3px var(--bw-primary-light);
+  outline: none; border-color: var(--sk-primary);
+  box-shadow: 0 0 0 3px var(--sk-input-focus-ring);
 }
 .bw-submit {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
   width: 100%; padding: 14px; margin-top: 4px;
-  background: var(--bw-primary); color: #fff; border: none;
-  border-radius: var(--bw-radius); font-size: 0.9375rem; font-weight: 600;
+  background: var(--sk-primary); color: #fff; border: none;
+  border-radius: var(--sk-radius); font-size: 0.9375rem; font-weight: 600;
   cursor: pointer; transition: background 0.15s;
 }
-.bw-submit:hover:not(:disabled) { background: var(--bw-primary-hover); }
+.bw-submit:hover:not(:disabled) { background: var(--sk-primary-hover); }
 .bw-submit:disabled { opacity: 0.55; cursor: not-allowed; }
 
 /* \u2500\u2500 Success \u2500\u2500 */
@@ -898,33 +910,33 @@ var WIDGET_CSS = `
 .bw-success-icon { margin: 0 auto 16px; width: 56px; height: 56px; animation: bw-fade-in 0.4s ease-out; }
 .bw-conf-code {
   display: inline-block; font-family: 'SF Mono', 'Fira Code', monospace;
-  background: #f3f4f6; padding: 6px 14px; border-radius: 6px;
-  font-size: 0.8125rem; color: #6b7280; margin: 4px 0 20px; letter-spacing: 0.04em;
+  background: var(--sk-surface); padding: 6px 14px; border-radius: 6px;
+  font-size: 0.8125rem; color: var(--sk-text-secondary); margin: 4px 0 20px; letter-spacing: 0.04em;
 }
 
 .bw-details-card {
-  text-align: left; background: #f9fafb; border: 1px solid #f0f0f0;
-  border-radius: var(--bw-radius); padding: 16px; margin-bottom: 20px;
+  text-align: left; background: var(--sk-bg-elevated); border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius); padding: 16px; margin-bottom: 20px;
 }
-.bw-detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
+.bw-detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sk-border); }
 .bw-detail-row:last-child { border-bottom: none; }
-.bw-detail-label { width: 70px; flex-shrink: 0; font-size: 0.8125rem; color: #9ca3af; font-weight: 500; }
-.bw-detail-value { font-size: 0.875rem; font-weight: 500; color: #374151; }
+.bw-detail-label { width: 70px; flex-shrink: 0; font-size: 0.8125rem; color: var(--sk-text-tertiary); font-weight: 500; }
+.bw-detail-value { font-size: 0.875rem; font-weight: 500; color: var(--sk-text-primary); }
 
-.bw-cal-links-label { font-size: 0.8125rem; color: #6b7280; margin: 0 0 8px 0; }
+.bw-cal-links-label { font-size: 0.8125rem; color: var(--sk-text-secondary); margin: 0 0 8px 0; }
 .bw-cal-links { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
 .bw-cal-link {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 8px 14px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
-  text-decoration: none; color: #374151; font-size: 0.8125rem; font-weight: 500;
+  padding: 8px 14px; border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius);
+  text-decoration: none; color: var(--sk-text-primary); font-size: 0.8125rem; font-weight: 500;
   transition: all 0.15s;
 }
-.bw-cal-link:hover { border-color: var(--bw-primary); color: var(--bw-primary); }
+.bw-cal-link:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
 
-.bw-email-notice { font-size: 0.8125rem; color: #9ca3af; margin: 0; }
-.bw-email-notice strong { color: #374151; font-weight: 500; }
+.bw-email-notice { font-size: 0.8125rem; color: var(--sk-text-tertiary); margin: 0; }
+.bw-email-notice strong { color: var(--sk-text-primary); font-weight: 500; }
 `;
 
 export { BookingWidget, createBooking, createSlotHold, detectTimezone, fetchAvailability, fetchAvailableDates, fetchBookingTypeDetails, fetchBookingTypes, formatDate, formatDuration, formatTime, releaseSlotHold };
-//# sourceMappingURL=chunk-ZU6YPEAF.mjs.map
-//# sourceMappingURL=chunk-ZU6YPEAF.mjs.map
+//# sourceMappingURL=chunk-2OJCYWSQ.mjs.map
+//# sourceMappingURL=chunk-2OJCYWSQ.mjs.map