@commonpub/layer 0.86.3 → 0.86.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.86.3",
+  "version": "0.86.5",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,17 +54,17 @@
     "vue-advanced-cropper": "^2.8.9",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.8.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/explainer": "0.8.0",
-    "@commonpub/schema": "0.48.0",
-    "@commonpub/protocol": "0.14.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/editor": "0.9.0",
     "@commonpub/config": "0.23.0",
+    "@commonpub/schema": "0.48.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/server": "2.92.0",
+    "@commonpub/auth": "0.8.0",
+    "@commonpub/protocol": "0.14.0",
     "@commonpub/ui": "0.13.1",
-    "@commonpub/learning": "0.5.2"
+    "@commonpub/server": "2.92.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/about.vue

@@ -80,7 +80,7 @@ const { hubs: hubsEnabled, learning: learningEnabled, contests: contestsEnabled,
   background-size: 32px 32px; opacity: 0.2;
 }
 .cpub-about-hero-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
-.cpub-about-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border: var(--border-width-default) solid var(--green); background: var(--green-bg); color: var(--green); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
+.cpub-about-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border: var(--border-width-default) solid var(--green); background: var(--green-bg); color: var(--green-text); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
 .cpub-about-title { font-size: 36px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; }
 .cpub-about-subtitle { font-size: 15px; color: var(--text-dim); line-height: 1.6; }
 

package/pages/admin/api-keys.vue

@@ -449,7 +449,7 @@ function fmtErrorRate(rate: number): string {
   border: var(--border-width-default) solid var(--border); font-family: inherit;
 }
 .cpub-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-.cpub-form-error { color: var(--red); font-size: 12px; margin: 8px 0; }
+.cpub-form-error { color: var(--red-text); font-size: 12px; margin: 8px 0; }
 .cpub-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
 
 .cpub-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
@@ -472,7 +472,7 @@ function fmtErrorRate(rate: number): string {
 .cpub-btn-primary { background: var(--accent); color: var(--color-text-inverse); border-color: var(--accent); }
 .cpub-btn-link { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px 8px; font-size: 12px; }
 .cpub-btn-link:hover { color: var(--text); }
-.cpub-btn-danger { color: var(--red); }
+.cpub-btn-danger { color: var(--red-text); }
 
 .cpub-key-table {
   width: 100%; border-collapse: collapse;
@@ -493,9 +493,9 @@ function fmtErrorRate(rate: number): string {
 }
 
 .cpub-key-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
-.cpub-key-badge-green { background: var(--green-bg); color: var(--green); border: var(--border-width-default) solid var(--green); }
-.cpub-key-badge-yellow { background: var(--yellow-bg); color: var(--yellow); border: var(--border-width-default) solid var(--yellow); }
-.cpub-key-badge-red { background: var(--red-bg); color: var(--red); border: var(--border-width-default) solid var(--red); }
+.cpub-key-badge-green { background: var(--green-bg); color: var(--green-text); border: var(--border-width-default) solid var(--green); }
+.cpub-key-badge-yellow { background: var(--yellow-bg); color: var(--yellow-text); border: var(--border-width-default) solid var(--yellow); }
+.cpub-key-badge-red { background: var(--red-bg); color: var(--red-text); border: var(--border-width-default) solid var(--red); }
 
 .cpub-key-actions { display: flex; gap: 8px; }
 .cpub-key-usage-row td { background: var(--surface2); padding: 16px; }

package/pages/admin/categories.vue

@@ -243,11 +243,11 @@ async function deleteCategory(cat: Category): Promise<void> {
 .cpub-admin-actions { display: flex; gap: 6px; }
 .cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .cpub-admin-action:hover { color: var(--accent); }
-.cpub-admin-action--danger:hover { color: var(--red); }
+.cpub-admin-action--danger:hover { color: var(--red-text); }
 
 .cpub-cat-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
 .cpub-cat-type { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 2px 8px; }
-.cpub-cat-system { color: var(--teal); background: var(--teal-bg, var(--surface2)); border: var(--border-width-default) solid var(--teal-border, var(--border2)); }
+.cpub-cat-system { color: var(--teal-text); background: var(--teal-bg, var(--surface2)); border: var(--border-width-default) solid var(--teal-border, var(--border2)); }
 .cpub-cat-custom { color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border2); }
 
 .cpub-empty { color: var(--text-faint); text-align: center; padding: var(--space-10) 0; }

package/pages/admin/content.vue

@@ -279,20 +279,20 @@ async function setCategory(id: string, categoryId: string | null): Promise<void>
 .cpub-admin-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
 .cpub-admin-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
 .cpub-status-badge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 2px 8px; }
-.cpub-status-published { color: var(--green); background: var(--green-bg); border: var(--border-width-default) solid var(--green-border); }
+.cpub-status-published { color: var(--green-text); background: var(--green-bg); border: var(--border-width-default) solid var(--green-border); }
 .cpub-status-draft { color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border2); }
 .cpub-admin-actions { display: flex; gap: 6px; }
 .cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .cpub-admin-action:hover { color: var(--accent); }
-.cpub-admin-action--active { color: var(--teal); }
-.cpub-admin-action--active-star { color: var(--yellow, #e6b800); }
-.cpub-admin-action--danger:hover { color: var(--red); }
+.cpub-admin-action--active { color: var(--teal-text); }
+.cpub-admin-action--active-star { color: var(--yellow-text, #e6b800); }
+.cpub-admin-action--danger:hover { color: var(--red-text); }
 .cpub-admin-federated-tag { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 3px; }
 .cpub-row-selected { background: var(--accent-bg); }
 .cpub-admin-badges { display: flex; gap: 4px; margin-top: 2px; }
 .cpub-mini-badge { font-family: var(--font-mono); font-size: 9px; display: inline-flex; align-items: center; gap: 3px; }
-.cpub-mini-badge--editorial { color: var(--teal); }
-.cpub-mini-badge--featured { color: var(--yellow, #e6b800); }
+.cpub-mini-badge--editorial { color: var(--teal-text); }
+.cpub-mini-badge--featured { color: var(--yellow-text, #e6b800); }
 .cpub-cat-select {
   font-family: var(--font-mono);
   font-size: 10px;

package/pages/admin/features.vue

@@ -264,7 +264,7 @@ async function resetOverride(key: string): Promise<void> {
 }
 
 .cpub-flag-badge--override { color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
-.cpub-flag-badge--pending { color: var(--yellow); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow); }
+.cpub-flag-badge--pending { color: var(--yellow-text); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow); }
 
 .cpub-flag-reset {
   background: none;
@@ -330,7 +330,7 @@ async function resetOverride(key: string): Promise<void> {
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
-  color: var(--yellow, var(--text-dim));
+  color: var(--yellow-text, var(--text-dim));
   flex: 1;
 }
 

package/pages/admin/federation.vue

@@ -726,7 +726,7 @@ async function refederate(): Promise<void> {
 }
 .cpub-fed-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
 .cpub-fed-btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
-.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red); }
+.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red-text); }
 
 .cpub-fed-activity-list {
   border: var(--border-width-default) solid var(--border); overflow: hidden;
@@ -751,9 +751,9 @@ async function refederate(): Promise<void> {
 .cpub-fed-status.delivered, .cpub-fed-status.processed, .cpub-fed-status.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
 .cpub-fed-status.pending { color: var(--text-dim); }
 .cpub-fed-status.paused { color: var(--text-dim); background: var(--surface2); }
-.cpub-fed-status.failed { color: var(--red); border-color: var(--red); }
+.cpub-fed-status.failed { color: var(--red-text); border-color: var(--red); }
 .cpub-fed-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }
-.cpub-fed-error { font-size: 10px; color: var(--red); font-family: var(--font-mono); cursor: help; }
+.cpub-fed-error { font-size: 10px; color: var(--red-text); font-family: var(--font-mono); cursor: help; }
 .cpub-fed-info-text { font-size: 0.75rem; color: var(--text-dim); margin-top: 12px; }
 .cpub-fed-info-text code { font-family: var(--font-mono); background: var(--surface2); padding: 1px 4px; }
 

package/pages/admin/homepage.vue

@@ -289,8 +289,8 @@ const { layoutEngine } = useFeatures();
 .cpub-section-actions { display: flex; gap: 6px; flex-shrink: 0; }
 .cpub-section-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .cpub-section-action:hover { color: var(--accent); }
-.cpub-section-action--active { color: var(--green); }
-.cpub-section-action--danger:hover { color: var(--red); }
+.cpub-section-action--active { color: var(--green-text); }
+.cpub-section-action--danger:hover { color: var(--red-text); }
 
 .cpub-section-editor { width: 100%; padding: 12px 0 0; border-top: var(--border-width-default) solid var(--border2); margin-top: 8px; }
 .cpub-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@@ -302,7 +302,7 @@ const { layoutEngine } = useFeatures();
 .cpub-editor-textarea { font-size: 12px; font-family: var(--font-mono); padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; resize: vertical; }
 
 .cpub-sections-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-top: var(--space-4); background: var(--yellow-bg, var(--surface2)); border: var(--border-width-default) solid var(--yellow, var(--border)); }
-.cpub-sections-footer-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow, var(--text-dim)); flex: 1; }
+.cpub-sections-footer-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow-text, var(--text-dim)); flex: 1; }
 
 @media (max-width: 768px) {
   .cpub-admin-header { flex-direction: column; }
@@ -324,7 +324,7 @@ const { layoutEngine } = useFeatures();
   border: 1px solid var(--yellow, var(--border));
   margin-bottom: var(--space-4);
 }
-.cpub-admin-homepage-deprecation i { color: var(--yellow, var(--text-dim)); font-size: var(--text-lg); margin-top: 2px; }
+.cpub-admin-homepage-deprecation i { color: var(--yellow-text, var(--text-dim)); font-size: var(--text-lg); margin-top: 2px; }
 .cpub-admin-homepage-deprecation p { margin: 0 0 var(--space-1) 0; color: var(--text); }
 .cpub-admin-homepage-deprecation-link {
   display: inline-flex; align-items: center; gap: var(--space-1);

package/pages/admin/layouts/[id].vue

@@ -841,7 +841,7 @@ async function onConflictForceSave(): Promise<void> {
   flex-shrink: 0;
 }
 .cpub-admin-layouts-editor-thrash-icon {
-  color: var(--yellow);
+  color: var(--yellow-text);
   font-size: var(--text-lg);
   flex-shrink: 0;
 }
@@ -894,7 +894,7 @@ async function onConflictForceSave(): Promise<void> {
 }
 .cpub-admin-layouts-editor-thrash-btn--primary:hover { filter: brightness(1.1); background: var(--accent); }
 .cpub-admin-layouts-editor-thrash-btn--danger {
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red);
 }
 .cpub-admin-layouts-editor-thrash-btn--danger:hover {

package/pages/admin/layouts/index.vue

@@ -352,5 +352,5 @@ const sortedLayouts = computed<LayoutRecord[]>(() => {
 }
 .cpub-admin-layouts-btn:hover { background: var(--surface2); }
 .cpub-admin-layouts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.cpub-admin-layouts-btn--danger:hover { color: var(--red); border-color: var(--red); }
+.cpub-admin-layouts-btn--danger:hover { color: var(--red-text); border-color: var(--red); }
 </style>

package/pages/admin/navigation.vue

@@ -316,7 +316,7 @@ const editingId = ref<string | null>(null);
 .cpub-nav-actions { display: flex; gap: 6px; flex-shrink: 0; }
 .cpub-nav-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .cpub-nav-action:hover { color: var(--accent); }
-.cpub-nav-action--danger:hover { color: var(--red); }
+.cpub-nav-action--danger:hover { color: var(--red-text); }
 
 .cpub-nav-editor { width: 100%; padding: 12px 0 0; border-top: var(--border-width-default) solid var(--border2); margin-top: 8px; }
 .cpub-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@@ -337,7 +337,7 @@ const editingId = ref<string | null>(null);
 .cpub-children-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
 
 .cpub-nav-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-top: var(--space-4); background: var(--yellow-bg, var(--surface2)); border: var(--border-width-default) solid var(--yellow, var(--border)); }
-.cpub-nav-footer-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow, var(--text-dim)); flex: 1; }
+.cpub-nav-footer-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow-text, var(--text-dim)); flex: 1; }
 
 @media (max-width: 768px) {
   .cpub-admin-header { flex-direction: column; }

package/pages/admin/reports.vue

@@ -117,7 +117,7 @@ watch(statusFilter, () => {
       <button v-if="statusFilter === 'pending'" class="cpub-btn cpub-btn-sm" @click="bulkAction('reviewed')">
         <i class="fa-solid fa-eye" /> Mark Reviewed
       </button>
-      <button class="cpub-btn cpub-btn-sm" style="color: var(--green); border-color: var(--green-border);" @click="bulkAction('resolved')">
+      <button class="cpub-btn cpub-btn-sm" style="color: var(--green-text); border-color: var(--green-border);" @click="bulkAction('resolved')">
         <i class="fa-solid fa-check" /> Resolve
       </button>
       <button class="cpub-btn cpub-btn-sm" @click="bulkAction('dismissed')">
@@ -149,7 +149,7 @@ watch(statusFilter, () => {
           <button v-if="report.status === 'pending'" class="cpub-btn cpub-btn-sm" @click="resolveReport(report.id, 'reviewed')">
             <i class="fa-solid fa-eye" /> Mark Reviewed
           </button>
-          <button class="cpub-btn cpub-btn-sm" style="color: var(--green); border-color: var(--green-border);" @click="resolveReport(report.id, 'resolved')">
+          <button class="cpub-btn cpub-btn-sm" style="color: var(--green-text); border-color: var(--green-border);" @click="resolveReport(report.id, 'resolved')">
             <i class="fa-solid fa-check" /> Resolve
           </button>
           <button class="cpub-btn cpub-btn-sm" @click="resolveReport(report.id, 'dismissed')">
@@ -183,9 +183,9 @@ watch(statusFilter, () => {
 .cpub-report-checkbox { display: flex; align-items: center; cursor: pointer; }
 .cpub-report-checkbox input { cursor: pointer; accent-color: var(--accent); }
 .cpub-report-status { font-size: 10px; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; padding: 2px 8px; }
-.cpub-status-pending { background: var(--yellow-bg); color: var(--yellow); border: var(--border-width-default) solid var(--yellow-border); }
+.cpub-status-pending { background: var(--yellow-bg); color: var(--yellow-text); border: var(--border-width-default) solid var(--yellow-border); }
 .cpub-status-reviewed { background: var(--blue-bg, var(--accent-bg)); color: var(--blue, var(--accent)); border: var(--border-width-default) solid var(--blue-border, var(--accent-border)); }
-.cpub-status-resolved { background: var(--green-bg); color: var(--green); border: var(--border-width-default) solid var(--green-border); }
+.cpub-status-resolved { background: var(--green-bg); color: var(--green-text); border: var(--border-width-default) solid var(--green-border); }
 .cpub-status-dismissed { background: var(--surface2); color: var(--text-faint); border: var(--border-width-default) solid var(--border2); }
 .cpub-report-type { font-size: 10px; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); padding: 2px 6px; border: var(--border-width-default) solid var(--accent-border); }
 .cpub-report-date { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }

package/pages/admin/theme/edit/[id].vue

@@ -774,7 +774,7 @@ onBeforeUnmount(() => {
   padding: var(--space-3) var(--space-4);
   background: var(--red-bg);
   border-bottom: var(--border-width-default) solid var(--red);
-  color: var(--red);
+  color: var(--red-text);
   font-size: var(--text-sm);
   display: flex;
   align-items: center;

package/pages/admin/users.vue

@@ -208,11 +208,11 @@ async function deleteUser(userId: string, username: string): Promise<void> {
 .admin-role-select { padding: 3px 6px; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-dim); font-size: 11px; font-family: var(--font-mono); text-transform: capitalize; cursor: pointer; }
 .admin-role-select:focus { border-color: var(--accent); outline: none; }
 .admin-status-btn { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; cursor: pointer; border: var(--border-width-default) solid; background: none; }
-.status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
-.status-suspended { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+.status-active { color: var(--green-text); border-color: var(--green-border); background: var(--green-bg); }
+.status-suspended { color: var(--red-text); border-color: var(--red-border); background: var(--red-bg); }
 .admin-status-btn:hover { opacity: 0.8; }
 .admin-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
-.admin-delete-btn:hover { color: var(--red); }
+.admin-delete-btn:hover { color: var(--red-text); }
 .admin-roles-btn { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-dim); cursor: pointer; }
 .admin-roles-btn:hover { border-color: var(--accent); color: var(--text); }
 .admin-roles-row td { background: var(--surface2); }

package/pages/admin/video-categories.vue

@@ -190,7 +190,7 @@ async function deleteCategory(cat: VideoCategory): Promise<void> {
 .cpub-admin-actions { display: flex; gap: 6px; }
 .cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .cpub-admin-action:hover { color: var(--accent); }
-.cpub-admin-action--danger:hover { color: var(--red); }
+.cpub-admin-action--danger:hover { color: var(--red-text); }
 
 .cpub-cat-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
 

package/pages/auth/forgot-password.vue

@@ -88,7 +88,7 @@ async function handleSubmit(): Promise<void> {
 .cpub-forgot-success-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
 .cpub-back-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); text-decoration: none; justify-content: center; margin-top: var(--space-4); }
 .cpub-back-link:hover { text-decoration: underline; }
-.cpub-form-error { padding: var(--space-3); background: var(--red-bg); color: var(--red); border: var(--border-width-default) solid var(--red); border-radius: var(--radius); font-size: 12px; }
+.cpub-form-error { padding: var(--space-3); background: var(--red-bg); color: var(--red-text); border: var(--border-width-default) solid var(--red); border-radius: var(--radius); font-size: 12px; }
 .cpub-field { display: flex; flex-direction: column; gap: 4px; }
 .cpub-field-label { font-size: 12px; font-weight: 500; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
 .cpub-field-input { padding: 8px 12px; border: var(--border-width-default) solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 13px; font-family: var(--font-sans); outline: none; width: 100%; transition: border-color 0.15s; }

package/pages/auth/login.vue

@@ -308,7 +308,7 @@ function handleMastodonLogin(): void {
 .form-error {
   padding: var(--space-3);
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
   border: var(--border-width-default) solid var(--red);
   border-radius: var(--radius);
   font-size: 12px;

package/pages/auth/register.vue

@@ -141,7 +141,7 @@ async function handleSubmit(): Promise<void> {
 .form-error {
   padding: var(--space-3);
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
   border: var(--border-width-default) solid var(--red);
   border-radius: var(--radius);
   font-size: 12px;
@@ -251,7 +251,7 @@ async function handleSubmit(): Promise<void> {
 
 .register-success-icon {
   font-size: 36px;
-  color: var(--green);
+  color: var(--green-text);
   margin-bottom: 16px;
 }
 

package/pages/auth/reset-password.vue

@@ -55,7 +55,7 @@ async function handleSubmit(): Promise<void> {
 
     <template v-if="success">
       <div class="cpub-reset-success">
-        <i class="fa-solid fa-check-circle" style="font-size: 24px; color: var(--green); margin-bottom: 12px;"></i>
+        <i class="fa-solid fa-check-circle" style="font-size: 24px; color: var(--green-text); margin-bottom: 12px;"></i>
         <p class="cpub-reset-success-text">Your password has been reset successfully.</p>
       </div>
       <NuxtLink to="/auth/login" class="cpub-back-link">
@@ -65,7 +65,7 @@ async function handleSubmit(): Promise<void> {
 
     <template v-else-if="tokenError">
       <div class="cpub-reset-error-state">
-        <i class="fa-solid fa-circle-xmark" style="font-size: 24px; color: var(--red); margin-bottom: 12px;"></i>
+        <i class="fa-solid fa-circle-xmark" style="font-size: 24px; color: var(--red-text); margin-bottom: 12px;"></i>
         <p class="cpub-reset-success-text">This reset link is invalid or has expired.</p>
       </div>
       <NuxtLink to="/auth/forgot-password" class="cpub-back-link">
@@ -123,7 +123,7 @@ async function handleSubmit(): Promise<void> {
 .cpub-reset-success-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
 .cpub-back-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); text-decoration: none; justify-content: center; margin-top: var(--space-4); }
 .cpub-back-link:hover { text-decoration: underline; }
-.cpub-form-error { padding: var(--space-3); background: var(--red-bg); color: var(--red); border: var(--border-width-default) solid var(--red); border-radius: var(--radius); font-size: 12px; }
+.cpub-form-error { padding: var(--space-3); background: var(--red-bg); color: var(--red-text); border: var(--border-width-default) solid var(--red); border-radius: var(--radius); font-size: 12px; }
 .cpub-field { display: flex; flex-direction: column; gap: 4px; }
 .cpub-field-label { font-size: 12px; font-weight: 500; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
 .cpub-field-input { padding: 8px 12px; border: var(--border-width-default) solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 13px; font-family: var(--font-sans); outline: none; width: 100%; transition: border-color 0.15s; }

package/pages/auth/verify-email.vue

@@ -43,7 +43,7 @@ if (!token.value) {
 
     <!-- Success -->
     <div v-else-if="status === 'success'" class="verify-status">
-      <i class="fa-solid fa-check-circle" style="font-size: 24px; color: var(--green); margin-bottom: 12px;"></i>
+      <i class="fa-solid fa-check-circle" style="font-size: 24px; color: var(--green-text); margin-bottom: 12px;"></i>
       <p class="verify-text">Your email has been verified successfully!</p>
       <NuxtLink to="/auth/login" class="verify-link">
         <i class="fa-solid fa-arrow-right"></i> Continue to login
@@ -52,7 +52,7 @@ if (!token.value) {
 
     <!-- Error -->
     <div v-else-if="status === 'error'" class="verify-status">
-      <i class="fa-solid fa-circle-xmark" style="font-size: 24px; color: var(--red); margin-bottom: 12px;"></i>
+      <i class="fa-solid fa-circle-xmark" style="font-size: 24px; color: var(--red-text); margin-bottom: 12px;"></i>
       <p class="verify-text">{{ errorMessage }}</p>
       <NuxtLink to="/auth/login" class="verify-link">
         <i class="fa-solid fa-arrow-left"></i> Back to login
@@ -61,7 +61,7 @@ if (!token.value) {
 
     <!-- No token -->
     <div v-else class="verify-status">
-      <i class="fa-solid fa-circle-exclamation" style="font-size: 24px; color: var(--yellow); margin-bottom: 12px;"></i>
+      <i class="fa-solid fa-circle-exclamation" style="font-size: 24px; color: var(--yellow-text); margin-bottom: 12px;"></i>
       <p class="verify-text">No verification token found. Please check the link in your email.</p>
       <NuxtLink to="/auth/login" class="verify-link">
         <i class="fa-solid fa-arrow-left"></i> Back to login

package/pages/authorize_interaction.vue

@@ -140,7 +140,7 @@ useSeoMeta({
   font-size: 14px;
 }
 .cpub-authorize-error {
-  color: var(--red, #ef4444);
+  color: var(--red-text, #ef4444);
   font-size: 14px;
 }
 .cpub-authorize-desc {
@@ -177,7 +177,7 @@ useSeoMeta({
   border: var(--border-width-default) solid var(--border);
 }
 .cpub-authorize-success {
-  color: var(--green, #22c55e);
+  color: var(--green-text, #22c55e);
   font-size: 14px;
   font-weight: 600;
 }

package/pages/cert/[code].vue

@@ -95,7 +95,7 @@ useSeoMeta({
   align-items: center;
   justify-content: center;
   font-size: 28px;
-  color: var(--yellow);
+  color: var(--yellow-text);
 }
 
 .cert-eyebrow {
@@ -137,14 +137,14 @@ useSeoMeta({
   right: 16px;
   font-size: 11px;
   font-family: var(--font-mono);
-  color: var(--green);
+  color: var(--green-text);
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
 .cert-not-found { text-align: center; padding: 64px 0; color: var(--text-dim); }
-.cert-not-found-icon { font-size: 40px; color: var(--red); margin-bottom: 16px; }
+.cert-not-found-icon { font-size: 40px; color: var(--red-text); margin-bottom: 16px; }
 .cert-not-found h1 { font-size: 20px; margin-bottom: 8px; }
 .cert-not-found p { font-size: 13px; }
 

package/pages/contests/[slug]/entries/[entryId].vue

@@ -178,9 +178,9 @@ watch(contestPii, (on) => { if (on) void loadPrivate(); }, { immediate: true });
 .cpub-ed-av-init { display: inline-flex; align-items: center; justify-content: center; background: var(--surface3); color: var(--text-faint); font-size: 8px; }
 .cpub-ed-date { color: var(--text-faint); }
 .cpub-ed-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border: var(--border-width-default) solid var(--border2); background: var(--surface2); color: var(--text-dim); }
-.cpub-ed-in { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-ed-in { color: var(--green-text); border-color: var(--green-border); background: var(--green-bg); }
 .cpub-ed-out { color: var(--text-faint); }
-.cpub-ed-rank { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-bg); }
+.cpub-ed-rank { color: var(--yellow-text); border-color: var(--yellow); background: var(--yellow-bg); }
 .cpub-ed-score { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
 
 .cpub-ed-sechead { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }

package/pages/contests/[slug]/judge.vue

@@ -413,8 +413,8 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-progress-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
 
 .cpub-judge-alert { padding: 10px 14px; font-size: 12px; border: var(--border-width-default) solid; margin-bottom: 16px; }
-.cpub-judge-alert--error { background: var(--red-bg); color: var(--red); border-color: var(--red); }
-.cpub-judge-alert--success { background: var(--green-bg); color: var(--green); border-color: var(--green); }
+.cpub-judge-alert--error { background: var(--red-bg); color: var(--red-text); border-color: var(--red); }
+.cpub-judge-alert--success { background: var(--green-bg); color: var(--green-text); border-color: var(--green); }
 
 .cpub-judge-empty { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
 .cpub-judge-empty i { font-size: 24px; }
@@ -471,8 +471,8 @@ async function submitScore(entryId: string): Promise<void> {
 }
 .cpub-judge-feedback:focus { border-color: var(--accent); }
 .cpub-judge-save-status { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 11px; font-family: var(--font-mono); }
-.cpub-judge-save-status.is-ok { color: var(--green); }
-.cpub-judge-save-status.is-err { color: var(--red); }
+.cpub-judge-save-status.is-ok { color: var(--green-text); }
+.cpub-judge-save-status.is-err { color: var(--red-text); }
 .cpub-judge-save-status.is-muted { color: var(--text-faint); }
 .cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 

package/pages/contests/[slug]/results.vue

@@ -77,7 +77,7 @@ function medalColor(rank: number): string {
         <i class="fa-solid fa-arrow-left"></i> Back to contest
       </NuxtLink>
       <h1 class="cpub-results-title">
-        <i class="fa-solid fa-ranking-star" style="color: var(--yellow);"></i>
+        <i class="fa-solid fa-ranking-star" style="color: var(--yellow-text);"></i>
         {{ contest?.title || 'Contest' }}, Results
       </h1>
     </header>
@@ -200,7 +200,7 @@ function medalColor(rank: number): string {
 .cpub-podium-author:hover { color: var(--accent); }
 .cpub-podium-score { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); margin-bottom: 6px; }
 .cpub-podium-prize { font-size: 11px; font-family: var(--font-mono); color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 4px; }
-.cpub-podium-prize-val { font-weight: 700; color: var(--yellow); }
+.cpub-podium-prize-val { font-weight: 700; color: var(--yellow-text); }
 
 /* LEADERBOARD */
 .cpub-leaderboard { margin-bottom: 32px; }
@@ -215,11 +215,11 @@ function medalColor(rank: number): string {
 .cpub-lb-top3 { background: var(--surface2); }
 .cpub-lb-rank { font-family: var(--font-mono); font-weight: 700; display: flex; align-items: center; gap: 6px; }
 .cpub-lb-score { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
-.cpub-lb-votes { font-family: var(--font-mono); color: var(--red); }
+.cpub-lb-votes { font-family: var(--font-mono); color: var(--red-text); }
 .cpub-lb-votes i { font-size: 10px; }
 
 .cpub-community-choice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 24px; background: var(--red-bg); border: var(--border-width-default) solid var(--red-border); }
-.cpub-cc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); display: flex; align-items: center; gap: 5px; }
+.cpub-cc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red-text); display: flex; align-items: center; gap: 5px; }
 .cpub-cc-title { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
 .cpub-cc-title:hover { color: var(--accent); }
 .cpub-cc-meta { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }

package/pages/dashboard.vue

@@ -566,13 +566,13 @@ async function deleteItem(id: string, title: string): Promise<void> {
 }
 
 .cpub-dash-action-btn--warn:hover {
-  color: var(--yellow);
+  color: var(--yellow-text);
   border-color: var(--yellow);
   background: var(--yellow-bg);
 }
 
 .cpub-dash-action-btn--danger:hover {
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red);
   background: var(--red-bg);
 }
@@ -594,7 +594,7 @@ async function deleteItem(id: string, title: string): Promise<void> {
 .cpub-dash-badge--green {
   border-color: var(--green-border);
   background: var(--green-bg);
-  color: var(--green);
+  color: var(--green-text);
 }
 
 .cpub-dash-empty {

package/pages/docs/[siteSlug]/edit.vue

@@ -965,13 +965,13 @@ watch(site, (s) => {
 }
 
 .cpub-docs-status-draft {
-  color: var(--yellow, #d4a017);
+  color: var(--yellow-text, #d4a017);
   background: var(--yellow-bg, rgba(245, 158, 11, 0.08));
   border: var(--border-width-default) solid var(--yellow-border, rgba(245, 158, 11, 0.25));
 }
 
 .cpub-docs-status-published {
-  color: var(--green, #2a9d5c);
+  color: var(--green-text, #2a9d5c);
   background: var(--green-bg, rgba(34, 197, 94, 0.08));
   border: var(--border-width-default) solid var(--green-border, rgba(34, 197, 94, 0.25));
 }
@@ -1005,7 +1005,7 @@ watch(site, (s) => {
 }
 
 .cpub-docs-unpublish-btn:hover {
-  color: var(--yellow, #d4a017);
+  color: var(--yellow-text, #d4a017);
   border-color: var(--yellow, #d4a017);
 }
 
@@ -1268,7 +1268,7 @@ watch(site, (s) => {
 }
 
 .cpub-settings-danger .cpub-settings-section-title {
-  color: var(--red, #e04030);
+  color: var(--red-text, #e04030);
 }
 
 .cpub-settings-danger-text {
@@ -1278,7 +1278,7 @@ watch(site, (s) => {
 }
 
 .cpub-btn-danger {
-  color: var(--red, #e04030);
+  color: var(--red-text, #e04030);
   border-color: var(--red, #e04030);
 }
 

package/pages/explore.vue

@@ -528,7 +528,7 @@ const sortOptions = [
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  color: var(--green);
+  color: var(--green-text);
   margin-bottom: 10px;
 }
 

package/pages/federated-hubs/[id]/posts/[postId].vue

@@ -324,7 +324,7 @@ useHead({
   padding: 4px 8px; border: var(--border-width-default) solid var(--border); transition: all 0.1s;
 }
 .cpub-post-action-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-border); }
-.cpub-post-action-btn.active { color: var(--red); border-color: var(--red); }
+.cpub-post-action-btn.active { color: var(--red-text); border-color: var(--red); }
 .cpub-post-action-btn:disabled { opacity: 0.5; cursor: default; }
 
 /* Reply form */

package/pages/federation/users/[handle].vue

@@ -321,7 +321,7 @@ function stripHtml(html: string): string {
 }
 .cpub-remote-profile__dm-sent {
   font-size: var(--font-size-sm);
-  color: var(--green);
+  color: var(--green-text);
   font-weight: 600;
   margin-bottom: var(--space-4);
 }