@saasicat/ui-vue 0.21.0 → 0.22.0

package/src/pages-standard/MarketingCatalogPage.vue

@@ -1,5 +1,5 @@
 <!--
-  MarketingCatalogPage — marketing catalog for SuperAdmin (SPEC_V2 §11.1 M3).
+  MarketingCatalogPage — marketing catalog for SuperAdmin.
 
   Public marketing projection per plan: filtered view for website,
   pricing page and checkout. Two tabs:
@@ -35,81 +35,95 @@
             </template>
         </AdminHero>
 
-        <div v-if="pageError" class="sa-marketing-banner sa-marketing-banner--error" role="alert">
-            <strong>{{ common.error }}:</strong> {{ pageError }}
-            <button class="sa-marketing-banner-x" type="button" @click="pageError = null">×</button>
-        </div>
-
-        <MarketingCatalogToolbar
-            v-model:tab="tab"
-            :active-promo-count="activePromoCount"
-            :catalog-version="catalogVersion"
-            :active-locale="activeLocale"
-        />
-
-        <div v-if="loading" class="sa-marketing-loading">{{ msg.page.loading }}</div>
-
-        <!-- ─── Tab: Promotions ─── -->
-        <MarketingPromotionsTab
-            v-else-if="tab === 'promos'"
-            :promotions="promotions"
-            :plans="promoPlanOptions"
-            :active-locales="activeLocaleSet"
-            :busy="busy"
-            :project-key="projectKey"
-            :create="promotionsApi.create"
-            :update="promotionsApi.update"
-            :remove="promotionsApi.remove"
-        />
-
-        <div v-else-if="rows.length === 0" class="sa-marketing-banner sa-marketing-banner--info">
-            {{ msg.page.emptyPlansBefore }} <strong>{{ msg.page.emptyPlansLink }}</strong>
-            {{ msg.page.emptyPlansAfter }}
-        </div>
-
-        <MarketingCatalogPreview
-            v-else-if="tab === 'preview'"
-            :visible-rows="visibleRows"
-            :preview-url="previewUrl"
-            :monthly-of="monthlyOf"
-            :yearly-of="yearlyOf"
-            :format-euro="formatEuro"
-            :promo-of="promoOf"
-            :promo-result-of="promoResultOf"
-            :promo-badge-of="promoBadgeOf"
-            :promo-fineprint-of="promoFineprintOf"
-            :promo-color-of="promoColorOf"
-            :cta-text="ctaText"
-            :show-trial-note="showTrialNote"
-            :top-feature-label="topFeatureLabel"
-        />
-
-        <MarketingCatalogAdmin
-            v-else
-            :admin-rows="adminRows"
-            :busy="busy"
-            :expanded-key="expandedKey"
-            :active-locale="activeLocale"
-            :default-locale="defaultLocale"
-            :edit-features="editFeatures"
-            :format-version-title="formatVersionTitle"
-            :format-version-tab="formatVersionTab"
-            :auto-cta-text="autoCtaText"
-            :cta-value="ctaValue"
-            :resolve-component-label="resolveComponentLabel"
-            :suggestions-for="suggestionsFor"
-            @select-version="selectVersion"
-            @patch="patch"
-            @patch-display-label="patchDisplayLabel"
-            @toggle-expand="toggleExpand"
-            @update-feature-label="updateFeatureLabel"
-            @update-feature-strong="updateFeatureStrong"
-            @persist-features="persistFeatures"
-            @move-feature="moveFeature"
-            @remove-feature="removeFeature"
-            @add-feature="addFeature"
-            @add-suggestion="addSuggestion"
-        />
+        <AdminBody>
+            <AdminSection>
+                <div
+                    v-if="pageError"
+                    class="sa-marketing-banner sa-marketing-banner--error"
+                    role="alert"
+                >
+                    <strong>{{ common.error }}:</strong> {{ pageError }}
+                    <button class="sa-marketing-banner-x" type="button" @click="pageError = null">
+                        ×
+                    </button>
+                </div>
+
+                <MarketingCatalogToolbar
+                    v-model:tab="tab"
+                    :active-promo-count="activePromoCount"
+                    :catalog-version="catalogVersion"
+                    :active-locale="activeLocale"
+                />
+            </AdminSection>
+            <AdminSection>
+                <div v-if="loading" class="sa-marketing-loading">{{ msg.page.loading }}</div>
+
+                <!-- ─── Tab: Promotions ─── -->
+                <MarketingPromotionsTab
+                    v-else-if="tab === 'promos'"
+                    :promotions="promotions"
+                    :plans="promoPlanOptions"
+                    :active-locales="activeLocaleSet"
+                    :busy="busy"
+                    :project-key="projectKey"
+                    :create="promotionsApi.create"
+                    :update="promotionsApi.update"
+                    :remove="promotionsApi.remove"
+                />
+
+                <div
+                    v-else-if="rows.length === 0"
+                    class="sa-marketing-banner sa-marketing-banner--info"
+                >
+                    {{ msg.page.emptyPlansBefore }} <strong>{{ msg.page.emptyPlansLink }}</strong>
+                    {{ msg.page.emptyPlansAfter }}
+                </div>
+
+                <MarketingCatalogPreview
+                    v-else-if="tab === 'preview'"
+                    :visible-rows="visibleRows"
+                    :preview-url="previewUrl"
+                    :monthly-of="monthlyOf"
+                    :yearly-of="yearlyOf"
+                    :format-euro="formatEuro"
+                    :promo-of="promoOf"
+                    :promo-result-of="promoResultOf"
+                    :promo-badge-of="promoBadgeOf"
+                    :promo-fineprint-of="promoFineprintOf"
+                    :promo-color-of="promoColorOf"
+                    :cta-text="ctaText"
+                    :show-trial-note="showTrialNote"
+                    :top-feature-label="topFeatureLabel"
+                />
+
+                <MarketingCatalogAdmin
+                    v-else
+                    :admin-rows="adminRows"
+                    :busy="busy"
+                    :expanded-key="expandedKey"
+                    :active-locale="activeLocale"
+                    :default-locale="defaultLocale"
+                    :edit-features="editFeatures"
+                    :format-version-title="formatVersionTitle"
+                    :format-version-tab="formatVersionTab"
+                    :auto-cta-text="autoCtaText"
+                    :cta-value="ctaValue"
+                    :resolve-component-label="resolveComponentLabel"
+                    :suggestions-for="suggestionsFor"
+                    @select-version="selectVersion"
+                    @patch="patch"
+                    @patch-display-label="patchDisplayLabel"
+                    @toggle-expand="toggleExpand"
+                    @update-feature-label="updateFeatureLabel"
+                    @update-feature-strong="updateFeatureStrong"
+                    @persist-features="persistFeatures"
+                    @move-feature="moveFeature"
+                    @remove-feature="removeFeature"
+                    @add-feature="addFeature"
+                    @add-suggestion="addSuggestion"
+                />
+            </AdminSection>
+        </AdminBody>
     </AdminPage>
 </template>
 
@@ -117,6 +131,8 @@
 import { computed, onMounted, ref } from 'vue';
 import AdminHero from '../components/admin-page/AdminHero.vue';
 import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
 import {
     applyPromo,
     pickActivePromo,
@@ -177,8 +193,8 @@ const tab = ref<MarketingCatalogTab>('preview');
 const expandedKey = ref<string | null>(null);
 const activeLocale = ref<string>(availableLocales.value[0]);
 
-// LocaleManager — `availableLocales` is the allowed pool (app config,
-// SPEC_V2 §6.5), `activeLocaleSet` the runtime-activated subset.
+// LocaleManager — `availableLocales` is the allowed pool (app config),
+// `activeLocaleSet` the runtime-activated subset.
 // Persisted via `/admin/catalog/marketing-settings` (MarketingSettings).
 const defaultLocale = computed(() => availableLocales.value[0]);
 const activeLocaleSet = ref<string[]>([...availableLocales.value]);
@@ -268,7 +284,7 @@ const promotionsApi = usePromotions({
 });
 
 // Catalog entries (features + quotas with i18n) — provides the translated
-// labels for the top-features editor (SPEC_V2 §6.3 + §6.5).
+// labels for the top-features editor.
 const catalogEntriesApi = useCatalogEntries({
     adminEndpoint: props.adminEndpoint,
     projectKey: props.projectKey,
@@ -407,7 +423,7 @@ function publishedVersionsOf(plan: PlanRow): PlanVersionRow[] {
 }
 
 /**
- * Version active as of `asOf` (SPEC_V2 §4.2): `validFrom <= asOf` and
+ * Version active as of `asOf`: `validFrom <= asOf` and
  * (`validUntil == null OR validUntil > asOf`). Default is the version
  * active today. Fallback when no `validFrom` data is maintained:
  * highest version.
@@ -603,7 +619,7 @@ function formatEuro(value: number): string {
     return formatCurrency(Math.round(value * 100) / 100, locale.value);
 }
 
-// ─── Promo application in the preview (SPEC_V2 §9a) ───
+// ─── Promo application in the preview ───
 const promoToday = new Date();
 function promoOf(row: MarketingRow): PromotionRow | null {
     return pickActivePromo(
@@ -822,31 +838,13 @@ async function onLocaleChange(loc: string): Promise<void> {
 
 <style>
 .sa-marketing {
-    --sa-marketing-bg: #f6f7f9;
-    --sa-marketing-surface: #ffffff;
-    --sa-marketing-surface-2: #f8fafc;
-    --sa-marketing-border: #e5e7eb;
-    --sa-marketing-border-strong: #d1d5db;
-    --sa-marketing-text: #0f172a;
-    --sa-marketing-text-2: #475569;
-    --sa-marketing-text-3: #94a3b8;
-    --sa-marketing-primary: #2563eb;
-    --sa-marketing-primary-700: #1d4ed8;
-    --sa-marketing-primary-50: #eff6ff;
-    --sa-marketing-font-sans:
-        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    --sa-marketing-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
-
     padding: 22px 26px;
-    background: var(--sa-marketing-bg);
-    color: var(--sa-marketing-text);
-    font-family: var(--sa-marketing-font-sans);
+    background: var(--sa-bg-app);
+    color: var(--sa-heading);
+    font-family: var(--sa-font-body);
     min-height: 100%;
     box-sizing: border-box;
 }
-.sa-marketing * {
-    box-sizing: border-box;
-}
 
 .sa-marketing-head-actions {
     display: flex;
@@ -857,8 +855,8 @@ async function onLocaleChange(loc: string): Promise<void> {
 .sa-marketing-locale-switch {
     display: inline-flex;
     gap: 2px;
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 3px;
 }
@@ -867,13 +865,13 @@ async function onLocaleChange(loc: string): Promise<void> {
     border: 0;
     background: transparent;
     border-radius: 6px;
-    font: 500 12px var(--sa-marketing-font-mono);
-    color: var(--sa-marketing-text-2);
+    font: 500 12px var(--sa-font-mono);
+    color: var(--sa-muted-dark);
     cursor: pointer;
 }
 .sa-marketing-locale-btn.active {
-    background: var(--sa-marketing-primary-50);
-    color: var(--sa-marketing-primary-700);
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     font-weight: 600;
 }
 .sa-marketing-locale-mgr {
@@ -884,35 +882,35 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-locale-mgr-label {
     font-size: 11px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
 }
 .sa-marketing-locale-pill {
     display: inline-flex;
     align-items: center;
-    border: 1px solid var(--sa-marketing-border);
+    border: 1px solid var(--sa-border);
     border-radius: 7px;
     overflow: hidden;
 }
 .sa-marketing-locale-pill.active {
-    border-color: var(--sa-marketing-primary-700);
-    background: var(--sa-marketing-primary-50);
+    border-color: var(--sa-primary-strong);
+    background: var(--sa-primary-50);
 }
 .sa-marketing-locale-pill-btn {
     border: 0;
     background: transparent;
     padding: 4px 8px;
-    font: 600 11px var(--sa-marketing-font-mono);
-    color: var(--sa-marketing-text-2);
+    font: 600 11px var(--sa-font-mono);
+    color: var(--sa-muted-dark);
     cursor: pointer;
 }
 .sa-marketing-locale-pill.active .sa-marketing-locale-pill-btn {
-    color: var(--sa-marketing-primary-700);
+    color: var(--sa-primary-strong);
 }
 .sa-marketing-locale-x {
     border: 0;
     background: transparent;
     padding: 4px 7px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     cursor: pointer;
     font-size: 13px;
 }
@@ -923,12 +921,12 @@ async function onLocaleChange(loc: string): Promise<void> {
     position: relative;
 }
 .sa-marketing-locale-add {
-    border: 1px dashed var(--sa-marketing-border);
+    border: 1px dashed var(--sa-border);
     background: transparent;
     border-radius: 7px;
     padding: 4px 9px;
     font-size: 11px;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     cursor: pointer;
 }
 .sa-marketing-locale-add:disabled {
@@ -940,8 +938,8 @@ async function onLocaleChange(loc: string): Promise<void> {
     top: 100%;
     right: 0;
     margin-top: 4px;
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     padding: 4px;
@@ -957,39 +955,11 @@ async function onLocaleChange(loc: string): Promise<void> {
     padding: 6px 10px;
     text-align: left;
     border-radius: 6px;
-    font: 600 11px var(--sa-marketing-font-mono);
+    font: 600 11px var(--sa-font-mono);
     cursor: pointer;
 }
 .sa-marketing-locale-picker-row:hover {
-    background: var(--sa-marketing-primary-50);
-}
-
-.sa-marketing-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 8px 14px;
-    border-radius: 7px;
-    font: 500 13px var(--sa-marketing-font-sans);
-    cursor: pointer;
-    border: 1px solid var(--sa-marketing-border-strong);
-    background: var(--sa-marketing-surface);
-    color: var(--sa-marketing-text);
-    transition:
-        background 0.12s,
-        border-color 0.12s;
-}
-.sa-marketing-btn:hover:not(:disabled) {
-    background: #f8fafc;
-}
-.sa-marketing-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.sa-marketing-btn--sm {
-    padding: 5px 9px;
-    font-size: 12px;
-    gap: 5px;
+    background: var(--sa-primary-50);
 }
 
 .sa-marketing-banner {
@@ -1007,7 +977,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     border: 1px solid #fca5a5;
 }
 .sa-marketing-banner--info {
-    background: var(--sa-marketing-primary-50);
+    background: var(--sa-primary-50);
     color: #1e40af;
     border: 1px solid #bfdbfe;
 }
@@ -1023,7 +993,7 @@ async function onLocaleChange(loc: string): Promise<void> {
 .sa-marketing-loading {
     padding: 40px;
     text-align: center;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     font-size: 13px;
 }
 
@@ -1031,21 +1001,21 @@ async function onLocaleChange(loc: string): Promise<void> {
     display: flex;
     gap: 12px;
     align-items: center;
-    margin: 4px 0 16px;
+    margin: 0px;
 }
 .sa-marketing-tabbar {
     display: inline-flex;
     gap: 2px;
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 3px;
 }
 .sa-marketing-tab {
     padding: 6px 14px;
     border-radius: 6px;
-    font: 500 13px var(--sa-marketing-font-sans);
-    color: var(--sa-marketing-text-2);
+    font: 500 13px var(--sa-font-body);
+    color: var(--sa-muted-dark);
     background: transparent;
     border: 0;
     cursor: pointer;
@@ -1054,11 +1024,11 @@ async function onLocaleChange(loc: string): Promise<void> {
         color 0.12s;
 }
 .sa-marketing-tab:hover {
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
 }
 .sa-marketing-tab.active {
-    background: var(--sa-marketing-primary-50);
-    color: var(--sa-marketing-primary-700);
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     font-weight: 600;
 }
 .sa-marketing-tab-count {
@@ -1074,30 +1044,30 @@ async function onLocaleChange(loc: string): Promise<void> {
 .sa-marketing-meta {
     margin-left: auto;
     font-size: 12px;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     display: flex;
     align-items: center;
     gap: 8px;
 }
 .sa-marketing-meta code {
-    font: 500 11px var(--sa-marketing-font-mono);
-    background: #f1f5f9;
-    color: #475569;
+    font: 500 11px var(--sa-font-mono);
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
     padding: 2px 7px;
     border-radius: 4px;
 }
 
 /* ── Public catalog preview ── */
 .sa-marketing-window {
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 12px;
     overflow: hidden;
 }
 .sa-marketing-chrome {
     height: 36px;
-    background: #f1f5f9;
-    border-bottom: 1px solid var(--sa-marketing-border);
+    background: var(--sa-border-soft);
+    border-bottom: 1px solid var(--sa-border);
     display: flex;
     align-items: center;
     padding: 0 14px;
@@ -1111,12 +1081,12 @@ async function onLocaleChange(loc: string): Promise<void> {
 .sa-marketing-chrome-url {
     margin-left: 18px;
     flex: 1;
-    background: var(--sa-marketing-surface);
-    border: 1px solid #e2e8f0;
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 6px;
     padding: 4px 10px;
-    font: 500 11.5px var(--sa-marketing-font-mono);
-    color: #475569;
+    font: 500 11.5px var(--sa-font-mono);
+    color: var(--sa-muted-dark);
     max-width: 380px;
 }
 .sa-marketing-canvas {
@@ -1124,23 +1094,23 @@ async function onLocaleChange(loc: string): Promise<void> {
     padding: 36px 32px 28px;
 }
 .sa-marketing-eyebrow {
-    font: 700 11px var(--sa-marketing-font-sans);
+    font: 700 11px var(--sa-font-body);
     letter-spacing: 0.14em;
     text-transform: uppercase;
-    color: var(--sa-marketing-primary);
+    color: var(--sa-primary);
     text-align: center;
 }
 .sa-marketing-hero {
     font-size: 32px;
     font-weight: 700;
     letter-spacing: -0.025em;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
     text-align: center;
     margin: 10px 0 6px;
 }
 .sa-marketing-sub {
     font-size: 14px;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     text-align: center;
     max-width: 540px;
     margin: 0 auto 26px;
@@ -1151,8 +1121,8 @@ async function onLocaleChange(loc: string): Promise<void> {
     gap: 16px;
 }
 .sa-marketing-card {
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 12px;
     padding: 22px 20px 20px;
     display: flex;
@@ -1176,9 +1146,9 @@ async function onLocaleChange(loc: string): Promise<void> {
     top: -10px;
     left: 50%;
     transform: translateX(-50%);
-    background: var(--sa-marketing-primary);
+    background: var(--sa-primary);
     color: #fff;
-    font: 700 10.5px var(--sa-marketing-font-sans);
+    font: 700 10.5px var(--sa-font-body);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 4px 12px;
@@ -1186,21 +1156,21 @@ async function onLocaleChange(loc: string): Promise<void> {
     white-space: nowrap;
 }
 .sa-marketing-card-key {
-    font: 700 10.5px var(--sa-marketing-font-mono);
+    font: 700 10.5px var(--sa-font-mono);
     letter-spacing: 0.08em;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     text-transform: uppercase;
 }
 .sa-marketing-card-name {
     font-size: 22px;
     font-weight: 700;
     letter-spacing: -0.02em;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
     margin: 2px 0 4px;
 }
 .sa-marketing-card-desc {
     font-size: 12.5px;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     line-height: 1.4;
     min-height: 36px;
 }
@@ -1214,15 +1184,15 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-size: 32px;
     font-weight: 700;
     letter-spacing: -0.03em;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
 }
 .sa-marketing-card-price-unit {
     font-size: 13px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
 }
 .sa-marketing-card-price-y {
     font-size: 11.5px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     margin-bottom: 12px;
 }
 .sa-marketing-card-cta {
@@ -1230,29 +1200,29 @@ async function onLocaleChange(loc: string): Promise<void> {
     margin-top: 14px;
     padding: 9px 12px;
     border-radius: 8px;
-    border: 1px solid var(--sa-marketing-border);
-    background: var(--sa-marketing-surface);
-    color: var(--sa-marketing-text);
-    font: 600 13px var(--sa-marketing-font-sans);
+    border: 1px solid var(--sa-border);
+    background: var(--sa-bg-surface);
+    color: var(--sa-heading);
+    font: 600 13px var(--sa-font-body);
     cursor: pointer;
     transition:
         background 0.12s,
         border-color 0.12s;
 }
 .sa-marketing-card-cta:hover {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .sa-marketing-card.featured .sa-marketing-card-cta {
-    background: var(--sa-marketing-primary);
-    border-color: var(--sa-marketing-primary);
+    background: var(--sa-primary);
+    border-color: var(--sa-primary);
     color: #fff;
 }
 .sa-marketing-card.featured .sa-marketing-card-cta:hover {
-    background: var(--sa-marketing-primary-700);
+    background: var(--sa-primary-strong);
 }
 .sa-marketing-card-trialnote {
     font-size: 11px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     text-align: center;
     margin-top: 6px;
 }
@@ -1276,14 +1246,14 @@ async function onLocaleChange(loc: string): Promise<void> {
     margin-top: 2px;
 }
 .sa-marketing-card-price-strike s {
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     font-size: 14px;
 }
 .sa-marketing-price-regular {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
 }
 .sa-marketing-card-fineprint {
     font-size: 10px;
@@ -1296,7 +1266,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     font-weight: 700;
 }
 .sa-marketing-card-features {
@@ -1321,24 +1291,24 @@ async function onLocaleChange(loc: string): Promise<void> {
     margin-top: 1px;
 }
 .sa-marketing-card-features b {
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
     font-weight: 700;
 }
 .sa-marketing-card-features-empty {
     margin-top: 8px;
     font-size: 12px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
 }
 
 /* ── Marketing administration ── */
 .sa-marketing-admin {
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
 }
 .sa-marketing-admin-head {
     padding: 14px 16px;
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-border-soft);
     display: flex;
     align-items: center;
     gap: 12px;
@@ -1347,11 +1317,11 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: -0.01em;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
 }
 .sa-marketing-admin-sub {
     font-size: 11.5px;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
 }
 .sa-marketing-admin-grid {
     display: grid;
@@ -1367,20 +1337,20 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-size: 10.5px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     font-weight: 700;
-    border-bottom: 1px solid var(--sa-marketing-border);
+    border-bottom: 1px solid var(--sa-border);
 }
 .sa-marketing-admin-row {
     display: contents;
 }
 .sa-marketing-admin-row > div {
     padding: 12px 14px;
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-border-soft);
     display: flex;
     align-items: center;
     font-size: 12.5px;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
 }
 .sa-marketing-admin-row--disabled > div {
     background: #fcfcfd;
@@ -1400,36 +1370,36 @@ async function onLocaleChange(loc: string): Promise<void> {
     border-radius: 8px;
     display: grid;
     place-items: center;
-    font: 700 10px var(--sa-marketing-font-mono);
+    font: 700 10px var(--sa-font-mono);
     border: 1px solid;
 }
 .sa-marketing-plan-label {
     font-size: 13px;
     font-weight: 700;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
 }
 .sa-marketing-plan-key {
-    font: 500 11px var(--sa-marketing-font-mono);
-    color: var(--sa-marketing-text-3);
+    font: 500 11px var(--sa-font-mono);
+    color: var(--sa-muted-light);
 }
 
 .sa-marketing-field {
     width: 100%;
     padding: 5px 8px;
-    font: 400 12px var(--sa-marketing-font-sans);
-    color: var(--sa-marketing-text);
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border-strong);
+    font: 400 12px var(--sa-font-body);
+    color: var(--sa-heading);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border-strong);
     border-radius: 6px;
 }
 .sa-marketing-field:focus {
     outline: none;
-    border-color: var(--sa-marketing-primary);
-    box-shadow: 0 0 0 3px var(--sa-marketing-primary-50);
+    border-color: var(--sa-primary);
+    box-shadow: 0 0 0 3px var(--sa-primary-50);
 }
 .sa-marketing-field:disabled {
-    background: #f1f5f9;
-    color: var(--sa-marketing-text-3);
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-light);
     cursor: not-allowed;
 }
 .sa-marketing-field--area {
@@ -1468,7 +1438,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 .sa-marketing-toggle input:checked + span {
-    background: var(--sa-marketing-primary);
+    background: var(--sa-primary);
 }
 .sa-marketing-toggle input:checked + span::before {
     transform: translateX(16px);
@@ -1489,17 +1459,17 @@ async function onLocaleChange(loc: string): Promise<void> {
     border: 1px solid;
 }
 .sa-marketing-chip--muted {
-    background: #f1f5f9;
-    color: #475569;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
     border-color: #cbd5e1;
 }
 .sa-marketing-chip--featured {
-    background: var(--sa-marketing-primary-50);
-    color: var(--sa-marketing-primary-700);
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     border-color: #bfdbfe;
 }
 .sa-marketing-chip--live {
-    background: #ecfdf5;
+    background: var(--sa-positive-bg);
     color: #047857;
     border-color: #a7f3d0;
 }
@@ -1520,16 +1490,16 @@ async function onLocaleChange(loc: string): Promise<void> {
     border: 1px solid transparent;
     border-radius: 6px;
     cursor: pointer;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     transition:
         background 0.12s,
         color 0.12s,
         border-color 0.12s;
 }
 .sa-marketing-expand-btn:hover {
-    background: #f1f5f9;
-    color: var(--sa-marketing-primary);
-    border-color: #e2e8f0;
+    background: var(--sa-border-soft);
+    color: var(--sa-primary);
+    border-color: var(--sa-border);
 }
 .sa-marketing-chev {
     display: inline-flex;
@@ -1542,7 +1512,7 @@ async function onLocaleChange(loc: string): Promise<void> {
 .sa-marketing-admin-expand {
     grid-column: 1 / -1;
     background: linear-gradient(180deg, #fbfbfd 0%, #fff 100%);
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-border-soft);
     padding: 18px 20px 22px;
 }
 .sa-marketing-expand-grid {
@@ -1564,12 +1534,12 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-size: 10.5px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     font-weight: 700;
 }
 .sa-marketing-expand-hint {
     font-size: 11px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
 }
 .sa-marketing-field-head {
     display: flex;
@@ -1579,10 +1549,10 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-source-hint {
     font-size: 11px;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
 }
 .sa-marketing-source-hint em {
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
     font-style: normal;
 }
 .sa-marketing-locked-value {
@@ -1590,16 +1560,16 @@ async function onLocaleChange(loc: string): Promise<void> {
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 6px;
     font-size: 13px;
-    color: var(--sa-marketing-text-1);
+    color: var(--sa-heading);
 }
 .sa-marketing-locked-hint {
     font-size: 10px;
     text-transform: uppercase;
-    color: var(--sa-marketing-text-3);
+    color: var(--sa-muted-light);
     background: rgba(148, 163, 184, 0.15);
     padding: 1px 6px;
     border-radius: 4px;
@@ -1609,14 +1579,14 @@ async function onLocaleChange(loc: string): Promise<void> {
     display: flex;
     align-items: center;
     gap: 10px;
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 8px 12px;
 }
 .sa-marketing-trial-label {
     font-size: 13px;
-    color: var(--sa-marketing-text);
+    color: var(--sa-heading);
 }
 .sa-marketing-trial-days {
     margin-left: auto;
@@ -1626,7 +1596,7 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-trial-unit {
     font-size: 12px;
-    color: var(--sa-marketing-text-2);
+    color: var(--sa-muted-dark);
 }
 
 .sa-marketing-tf-head {
@@ -1645,8 +1615,8 @@ async function onLocaleChange(loc: string): Promise<void> {
     align-items: center;
 }
 .sa-marketing-tf-num {
-    font: 600 11px var(--sa-marketing-font-mono);
-    color: var(--sa-marketing-text-3);
+    font: 600 11px var(--sa-font-mono);
+    color: var(--sa-muted-light);
     text-align: center;
 }
 .sa-marketing-tf-actions {
@@ -1658,19 +1628,19 @@ async function onLocaleChange(loc: string): Promise<void> {
     height: 24px;
     display: grid;
     place-items: center;
-    background: var(--sa-marketing-surface);
-    border: 1px solid var(--sa-marketing-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 5px;
     cursor: pointer;
-    font: 600 10px var(--sa-marketing-font-sans);
-    color: var(--sa-marketing-text-2);
+    font: 600 10px var(--sa-font-body);
+    color: var(--sa-muted-dark);
     padding: 0;
     transition:
         background 0.12s,
         border-color 0.12s;
 }
 .sa-marketing-iconbtn:hover:not(:disabled) {
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     border-color: #cbd5e1;
 }
 .sa-marketing-iconbtn:disabled {
@@ -1688,8 +1658,8 @@ async function onLocaleChange(loc: string): Promise<void> {
     padding: 14px;
     text-align: center;
     font-size: 12px;
-    color: var(--sa-marketing-text-3);
-    background: var(--sa-marketing-surface);
+    color: var(--sa-muted-light);
+    background: var(--sa-bg-surface);
     border: 1px dashed #cbd5e1;
     border-radius: 8px;
 }
@@ -1711,10 +1681,10 @@ async function onLocaleChange(loc: string): Promise<void> {
     gap: 5px;
     padding: 3px 9px;
     border-radius: 999px;
-    background: var(--sa-marketing-surface);
+    background: var(--sa-bg-surface);
     border: 1px dashed #cbd5e1;
     font-size: 11.5px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     cursor: pointer;
     transition:
         background 0.12s,
@@ -1723,14 +1693,14 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-tf-chip em {
     font-style: normal;
-    color: var(--sa-marketing-text-3);
-    font: 500 11px var(--sa-marketing-font-mono);
+    color: var(--sa-muted-light);
+    font: 500 11px var(--sa-font-mono);
 }
 .sa-marketing-tf-chip:hover:not(:disabled) {
-    background: var(--sa-marketing-primary-50);
+    background: var(--sa-primary-50);
     border-color: #93c5fd;
     border-style: solid;
-    color: var(--sa-marketing-primary-700);
+    color: var(--sa-primary-strong);
 }
 .sa-marketing-tf-chip:disabled {
     opacity: 0.5;
@@ -1753,12 +1723,12 @@ async function onLocaleChange(loc: string): Promise<void> {
     margin-top: 6px;
 }
 .sa-marketing-version-tab {
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     background: #fff;
     border-radius: 6px;
     padding: 2px 8px;
     font: 600 10.5px var(--sa-font-mono, ui-monospace, monospace);
-    color: #64748b;
+    color: var(--sa-muted);
     cursor: pointer;
     letter-spacing: 0.02em;
     transition:
@@ -1768,12 +1738,12 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-version-tab:hover {
     border-color: #cbd5e1;
-    background: #f8fafc;
-    color: #475569;
+    background: var(--sa-bg-surface-2);
+    color: var(--sa-muted-dark);
 }
 .sa-marketing-version-tab--active {
-    border-color: #1d4ed8;
-    background: #eff6ff;
-    color: #1d4ed8;
+    border-color: var(--sa-primary-strong);
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
 }
 </style>