@commonpub/layer 0.86.3 → 0.86.4

package/pages/hubs/[slug]/members.vue

@@ -236,15 +236,15 @@ async function unbanMember(userId: string, username: string): Promise<void> {
 .member-role-select { padding: 3px 6px; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-dim); font-size: 10px; font-family: var(--font-mono); text-transform: capitalize; cursor: pointer; }
 .member-role-select:focus { border-color: var(--accent); outline: none; }
 .member-kick-btn { background: none; border: var(--border-width-default) solid var(--border2); color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 3px 6px; }
-.member-kick-btn:hover { color: var(--red); border-color: var(--red); }
+.member-kick-btn:hover { color: var(--red-text); border-color: var(--red); }
 .member-ban-btn { background: none; border: var(--border-width-default) solid var(--border2); color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 3px 6px; }
-.member-ban-btn:hover { color: var(--red); border-color: var(--red); }
+.member-ban-btn:hover { color: var(--red-text); border-color: var(--red); }
 
 .members-empty { text-align: center; padding: 48px 0; color: var(--text-faint); }
 
 .requests-section { margin-bottom: 28px; }
 .requests-title { font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 10px; }
-.member-deny-btn:hover { color: var(--red); border-color: var(--red); }
+.member-deny-btn:hover { color: var(--red-text); border-color: var(--red); }
 
 .bans-section { margin-top: 28px; }
 .bans-title { font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 10px; }

package/pages/hubs/[slug]/posts/[postId].vue

@@ -371,7 +371,7 @@ useSeoMeta({
   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; }
 
 .cpub-post-mod-bar {
@@ -382,7 +382,7 @@ useSeoMeta({
 .cpub-btn-primary { background: var(--accent); color: var(--color-on-accent); border-color: var(--accent); }
 .cpub-btn-primary:hover:not(:disabled) { opacity: 0.9; }
 .cpub-btn-primary:disabled { opacity: 0.5; cursor: default; }
-.cpub-btn-danger { color: var(--red); border-color: var(--red); }
+.cpub-btn-danger { color: var(--red-text); border-color: var(--red); }
 .cpub-btn-danger:hover { background: var(--red); color: var(--color-on-accent); }
 
 /* Reply form */

package/pages/index.vue

@@ -527,13 +527,13 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   padding: 3px 9px;
   background: var(--yellow-bg);
   border: var(--border-width-default) solid var(--yellow);
-  color: var(--yellow);
+  color: var(--yellow-text);
 }
 
 .cpub-hero-badge-live {
   background: var(--green-bg);
   border-color: var(--green);
-  color: var(--green);
+  color: var(--green-text);
   display: flex;
   align-items: center;
   gap: 5px;
@@ -674,7 +674,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--teal);
+  color: var(--teal-text);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -741,7 +741,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   z-index: 1;
   font-size: 48px;
   opacity: 0.2;
-  color: var(--teal);
+  color: var(--teal-text);
 }
 
 .cpub-thumb-overlay {
@@ -760,7 +760,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 .cpub-badge-featured {
   background: var(--yellow-bg);
   border: var(--border-width-default) solid var(--yellow);
-  color: var(--yellow);
+  color: var(--yellow-text);
   font-size: 9px;
   font-family: var(--font-mono);
   text-transform: uppercase;
@@ -1066,7 +1066,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   flex-shrink: 0;
   border: var(--border-width-default) solid var(--teal);
   background: var(--teal-bg);
-  color: var(--teal);
+  color: var(--teal-text);
   overflow: hidden;
 }
 .cpub-hub-icon-img {
@@ -1116,7 +1116,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   padding: 4px 10px;
   background: var(--green-bg);
   border: var(--border-width-default) solid var(--green-border);
-  color: var(--green);
+  color: var(--green-text);
   font-size: 10px;
   font-family: var(--font-mono);
   flex-shrink: 0;

package/pages/learn/[slug]/[lessonSlug]/edit.vue

@@ -279,7 +279,7 @@ const videoEmbedUrl = computed(() => {
 
     <!-- LINKED CONTENT -->
     <section v-if="lesson.contentItemId" class="lesson-section">
-      <h2 class="lesson-section-title"><i class="fa-solid fa-link" style="color: var(--teal); margin-right: 6px;"></i>Linked Content</h2>
+      <h2 class="lesson-section-title"><i class="fa-solid fa-link" style="color: var(--teal-text); margin-right: 6px;"></i>Linked Content</h2>
       <div class="linked-content-info">
         <div class="linked-content-card">
           <span class="cpub-lesson-type-badge" style="margin-right: 8px;">{{ lesson.type }}</span>
@@ -289,7 +289,7 @@ const videoEmbedUrl = computed(() => {
           <NuxtLink :to="`/u/${(lessonData?.linkedContent as any)?.author?.username ?? ''}/${lesson.type}/${lessonData?.linkedContent?.slug || ''}/edit`" class="cpub-btn cpub-btn-sm">
             <i class="fa-solid fa-pen"></i> Edit Content
           </NuxtLink>
-          <button class="cpub-btn cpub-btn-sm" style="color: var(--red); border-color: var(--red-border);" @click="unlinkContent">
+          <button class="cpub-btn cpub-btn-sm" style="color: var(--red-text); border-color: var(--red-border);" @click="unlinkContent">
             <i class="fa-solid fa-link-slash"></i> Unlink
           </button>
         </div>

package/pages/learn/[slug]/[lessonSlug]/index.vue

@@ -474,7 +474,7 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 .lesson-quiz { margin-bottom: 24px; }
 .quiz-card { border: var(--border-width-default) solid var(--border); padding: 20px; margin-bottom: 16px; background: var(--surface); box-shadow: var(--shadow-md); }
 .quiz-header { margin-bottom: 12px; }
-.quiz-badge { font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.08em; color: var(--yellow); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow-border); padding: 3px 8px; }
+.quiz-badge { font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.08em; color: var(--yellow-text); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow-border); padding: 3px 8px; }
 .quiz-question { font-size: 16px; font-weight: 600; margin-bottom: 16px; line-height: 1.5; }
 .quiz-options { display: flex; flex-direction: column; gap: 8px; }
 .quiz-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: var(--border-width-default) solid var(--border); cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; }
@@ -483,12 +483,12 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 .quiz-option.selected-wrong { background: var(--red-bg); border-color: var(--red); cursor: default; }
 .quiz-option.answered { cursor: default; }
 .quiz-option-key { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-faint); width: 18px; flex-shrink: 0; }
-.quiz-option.selected-correct .quiz-option-key { color: var(--green); }
-.quiz-option.selected-wrong .quiz-option-key { color: var(--red); }
+.quiz-option.selected-correct .quiz-option-key { color: var(--green-text); }
+.quiz-option.selected-wrong .quiz-option-key { color: var(--red-text); }
 .quiz-option-text { flex: 1; color: var(--text-dim); line-height: 1.5; }
 .quiz-option-indicator { font-size: 12px; flex-shrink: 0; }
-.quiz-option.selected-correct .quiz-option-indicator { color: var(--green); }
-.quiz-option.selected-wrong .quiz-option-indicator { color: var(--red); }
+.quiz-option.selected-correct .quiz-option-indicator { color: var(--green-text); }
+.quiz-option.selected-wrong .quiz-option-indicator { color: var(--red-text); }
 .quiz-option.selected-pending { background: var(--accent-bg); border-color: var(--accent); }
 .quiz-option.selected-pending .quiz-option-key { color: var(--accent); }
 .quiz-option.selected-pending .quiz-option-text { color: var(--text); }
@@ -500,11 +500,11 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 .quiz-signin-hint { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
 .quiz-score { text-align: center; padding: 20px; border: var(--border-width-default) solid var(--green); background: var(--green-bg); }
 .quiz-score.passed { border-color: var(--green); background: var(--green-bg); }
-.quiz-score.passed .quiz-score-value, .quiz-score.passed .quiz-score-label { color: var(--green); }
+.quiz-score.passed .quiz-score-value, .quiz-score.passed .quiz-score-label { color: var(--green-text); }
 .quiz-score.failed { border-color: var(--red); background: var(--red-bg); }
-.quiz-score.failed .quiz-score-value, .quiz-score.failed .quiz-score-label { color: var(--red); }
-.quiz-score-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--green); }
-.quiz-score-label { font-size: 11px; font-family: var(--font-mono); color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; }
+.quiz-score.failed .quiz-score-value, .quiz-score.failed .quiz-score-label { color: var(--red-text); }
+.quiz-score-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--green-text); }
+.quiz-score-label { font-size: 11px; font-family: var(--font-mono); color: var(--green-text); text-transform: uppercase; letter-spacing: 0.08em; }
 .quiz-retry-btn { margin-top: 12px; padding: 8px 16px; background: var(--surface); color: var(--text); border: var(--border-width-default) solid var(--border); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
 .quiz-retry-btn:hover { background: var(--surface2); }
 
@@ -517,7 +517,7 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 .lesson-complete-btn { padding: 10px 20px; background: var(--accent); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--border); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-md); }
 .lesson-complete-btn:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
 .lesson-complete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.lesson-completed-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 14px; font-weight: 600; }
+.lesson-completed-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green-text); font-size: 14px; font-weight: 600; }
 
 .lesson-nav-footer { display: flex; justify-content: space-between; gap: 16px; }
 .lesson-nav-btn { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); text-decoration: none; max-width: 48%; box-shadow: var(--shadow-md); transition: box-shadow 0.15s, transform 0.15s; }

package/pages/learn/[slug]/edit.vue

@@ -224,7 +224,7 @@ async function handlePublish(): Promise<void> {
           >
             <i class="fa-solid fa-rocket"></i> {{ publishing ? 'Publishing...' : 'Publish' }}
           </button>
-          <button class="cpub-btn" style="color: var(--red); border-color: var(--red-border);" @click="deletePath">
+          <button class="cpub-btn" style="color: var(--red-text); border-color: var(--red-border);" @click="deletePath">
             <i class="fa-solid fa-trash"></i>
           </button>
         </div>
@@ -360,7 +360,7 @@ async function handlePublish(): Promise<void> {
 
 .cpub-status-badge { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; letter-spacing: 0.06em; }
 .cpub-status-draft { background: var(--surface3); color: var(--text-faint); border: var(--border-width-default) solid var(--border2); }
-.cpub-status-published { background: var(--green-bg); color: var(--green); border: var(--border-width-default) solid var(--green-border); }
+.cpub-status-published { background: var(--green-bg); color: var(--green-text); border: var(--border-width-default) solid var(--green-border); }
 
 .cpub-meta-section { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 16px 20px; margin-bottom: 24px; box-shadow: var(--shadow-md); }
 .cpub-meta-section-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
@@ -387,7 +387,7 @@ async function handlePublish(): Promise<void> {
 .cpub-lesson-grip { color: var(--text-faint); font-size: 10px; cursor: grab; }
 .cpub-lesson-type-badge { font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; padding: 1px 6px; border: var(--border-width-default) solid var(--border2); color: var(--text-faint); background: var(--surface2); }
 .cpub-lesson-title { font-size: 13px; color: var(--text); flex: 1; }
-.cpub-lesson-empty-badge { font-size: 9px; font-family: var(--font-mono); color: var(--yellow); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow-border); padding: 1px 6px; text-transform: uppercase; }
+.cpub-lesson-empty-badge { font-size: 9px; font-family: var(--font-mono); color: var(--yellow-text); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow-border); padding: 1px 6px; text-transform: uppercase; }
 .cpub-lesson-edit-btn { font-size: 10px; color: var(--text-faint); padding: 3px 6px; border: var(--border-width-default) solid var(--border2); text-decoration: none; }
 .cpub-lesson-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
 
@@ -402,7 +402,7 @@ async function handlePublish(): Promise<void> {
 .cpub-link-btn { padding: 6px 10px; background: var(--surface2); color: var(--text-dim); border: var(--border-width-default) solid var(--border); font-size: 10px; font-family: var(--font-mono); cursor: pointer; display: flex; align-items: center; gap: 5px; margin-left: 4px; }
 .cpub-link-btn:hover { border-color: var(--accent); color: var(--accent); }
 .cpub-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.cpub-lesson-linked-badge { font-size: 9px; color: var(--teal); display: flex; align-items: center; flex-shrink: 0; }
+.cpub-lesson-linked-badge { font-size: 9px; color: var(--teal-text); display: flex; align-items: center; flex-shrink: 0; }
 
 .cpub-empty-modules { text-align: center; padding: 32px; color: var(--text-faint); font-size: 13px; }
 

package/pages/learn/[slug]/index.vue

@@ -265,9 +265,9 @@ function getDifficultyClass(d: string | null): string {
 .cpub-path-header-row { display: flex; gap: 16px; }
 .cpub-path-header-info { flex: 1; }
 .cpub-path-difficulty { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border: var(--border-width-default) solid; display: inline-block; margin-bottom: 8px; }
-.diff-beginner { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
-.diff-intermediate { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
-.diff-advanced { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+.diff-beginner { color: var(--green-text); border-color: var(--green-border); background: var(--green-bg); }
+.diff-intermediate { color: var(--yellow-text); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.diff-advanced { color: var(--red-text); border-color: var(--red-border); background: var(--red-bg); }
 .cpub-path-draft { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 2px 8px; background: var(--surface3); color: var(--text-faint); border: var(--border-width-default) solid var(--border2); display: inline-block; margin-left: 8px; margin-bottom: 8px; }
 .cpub-path-title { font-size: 26px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; letter-spacing: -0.02em; }
 .cpub-path-desc { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-bottom: 12px; }
@@ -280,7 +280,7 @@ function getDifficultyClass(d: string | null): string {
 .cpub-continue-btn { padding: 10px 22px; background: var(--green); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--border); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; gap: 6px; }
 .cpub-continue-btn:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
 .cpub-unenroll-btn { padding: 6px 14px; background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text-dim); font-size: 12px; cursor: pointer; }
-.cpub-unenroll-btn:hover { color: var(--red); border-color: var(--red); }
+.cpub-unenroll-btn:hover { color: var(--red-text); border-color: var(--red); }
 .cpub-edit-link { padding: 6px 14px; border: var(--border-width-default) solid var(--border2); font-size: 12px; color: var(--text-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
 .cpub-edit-link:hover { color: var(--accent); border-color: var(--accent); }
 

package/pages/learn/index.vue

@@ -270,7 +270,7 @@ const activeDifficultyFilter = ref('');
 .cpub-path-meta-item { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); display: flex; align-items: center; gap: 5px; }
 .cpub-path-courses-preview { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: var(--border-width-default) solid var(--border2); overflow-x: auto; }
 .cpub-path-course-pill { font-size: 10px; font-family: var(--font-mono); padding: 3px 10px; border-radius: 0; border: var(--border-width-default) solid var(--border); background: var(--surface2); color: var(--text-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
-.cpub-pill-done { border-color: var(--green-border); color: var(--green); background: var(--green-bg); }
+.cpub-pill-done { border-color: var(--green-border); color: var(--green-text); background: var(--green-bg); }
 .cpub-path-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
 .cpub-path-aside-meta { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); }
 
@@ -281,16 +281,16 @@ const activeDifficultyFilter = ref('');
 .cpub-course-cover { height: 120px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface3); border-bottom: var(--border-width-default) solid var(--border); }
 .cpub-course-cover-icon { font-size: 28px; position: relative; z-index: 1; color: var(--text-dim); }
 .cpub-course-cover-price { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 11px; font-family: var(--font-mono); padding: 3px 8px; border-radius: 0; background: var(--surface); border: var(--border-width-default) solid var(--border); }
-.cpub-price-free { color: var(--green); border-color: var(--green); }
+.cpub-price-free { color: var(--green-text); border-color: var(--green); }
 .cpub-price-paid { color: var(--text); }
 .cpub-course-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
 .cpub-course-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
 .cpub-course-instructor { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
 .cpub-instructor-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--surface3); border: var(--border-width-default) solid var(--border); font-size: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--text-faint); flex-shrink: 0; }
 .cpub-course-stars { display: flex; align-items: center; gap: 3px; margin-bottom: 8px; }
-.cpub-star { color: var(--yellow); font-size: 10px; }
+.cpub-star { color: var(--yellow-text); font-size: 10px; }
 .cpub-star-empty { color: var(--border2); }
-.cpub-star-score { font-size: 11px; font-family: var(--font-mono); color: var(--yellow); margin-left: 2px; }
+.cpub-star-score { font-size: 11px; font-family: var(--font-mono); color: var(--yellow-text); margin-left: 2px; }
 .cpub-star-count { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); margin-left: 2px; }
 .cpub-course-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
 .cpub-course-meta-item { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); display: flex; align-items: center; gap: 4px; }
@@ -345,7 +345,7 @@ const activeDifficultyFilter = ref('');
 .cpub-sb-tag:hover { border-color: var(--border); color: var(--text-dim); background: var(--surface3); }
 .cpub-cert-grid { display: flex; flex-direction: column; gap: 8px; }
 .cpub-cert-item { background: var(--surface2); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-sm); }
-.cpub-cert-badge { width: 32px; height: 32px; border-radius: 50%; border: var(--border-width-default) solid var(--yellow); background: var(--yellow-bg); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: var(--yellow); }
+.cpub-cert-badge { width: 32px; height: 32px; border-radius: 50%; border: var(--border-width-default) solid var(--yellow); background: var(--yellow-bg); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: var(--yellow-text); }
 .cpub-cert-info { flex: 1; }
 .cpub-cert-name { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
 .cpub-cert-date { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
@@ -357,7 +357,7 @@ const activeDifficultyFilter = ref('');
 .cpub-my-path-title { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
 .cpub-my-path-title:hover { color: var(--accent); }
 .cpub-my-path-status { font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
-.cpub-my-path-status.draft { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.cpub-my-path-status.draft { color: var(--yellow-text); border-color: var(--yellow-border); background: var(--yellow-bg); }
 .cpub-my-path-meta { display: flex; gap: 12px; font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); }
 
 /* EMPTY STATE (page-specific) */

package/pages/messages/index.vue

@@ -427,7 +427,7 @@ async function startConversation(): Promise<void> {
 .cpub-new-msg-error {
   padding: 8px 10px;
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
   border: var(--border-width-default) solid var(--red);
   font-size: 12px;
   border-radius: var(--radius);
@@ -463,7 +463,7 @@ async function startConversation(): Promise<void> {
 }
 
 .cpub-new-msg-chip-remove:hover {
-  color: var(--red);
+  color: var(--red-text);
 }
 
 .cpub-new-msg-hint {

package/pages/mirror/[id].vue

@@ -152,7 +152,7 @@ useSeoMeta({
 }
 .cpub-fed-banner-follow:hover { opacity: 0.9; }
 .cpub-fed-banner-follow:disabled { opacity: 0.6; cursor: default; }
-.cpub-fed-banner-followed { margin-left: auto; font-size: 11px; color: var(--green, #22c55e); font-weight: 600; display: flex; align-items: center; gap: 4px; }
+.cpub-fed-banner-followed { margin-left: auto; font-size: 11px; color: var(--green-text, #22c55e); font-weight: 600; display: flex; align-items: center; gap: 4px; }
 .cpub-fed-banner-link:hover { text-decoration: underline; }
 
 /* Fallback for non-CommonPub content */

package/pages/products/[slug].vue

@@ -149,7 +149,7 @@ useSeoMeta({
 .product-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
 .product-header-main { flex: 1; min-width: 0; }
 .product-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
-.cpub-product-delete:hover { color: var(--red); border-color: var(--red); }
+.cpub-product-delete:hover { color: var(--red-text); border-color: var(--red); }
 .product-icon { width: 56px; height: 56px; border: var(--border-width-default) solid var(--border); background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
 .product-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
 .product-category { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-transform: capitalize; }

package/pages/settings/account.vue

@@ -145,7 +145,7 @@ async function handleDeleteAccount(): Promise<void> {
 .cpub-danger-title {
   font-size: 14px;
   font-weight: 600;
-  color: var(--red);
+  color: var(--red-text);
   margin-bottom: var(--space-2);
 }
 
@@ -163,7 +163,7 @@ async function handleDeleteAccount(): Promise<void> {
 
 .cpub-btn-danger {
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red);
 }
 

package/pages/settings/profile.vue

@@ -805,7 +805,7 @@ async function handleSave(): Promise<void> {
 }
 
 .cpub-btn-danger:hover {
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red);
 }
 

package/pages/u/[username]/[type]/[slug]/edit.vue

@@ -697,8 +697,8 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
   flex-shrink: 0;
 }
 
-.cpub-autosave-status--saved { color: var(--green); }
-.cpub-autosave-status--error { color: var(--red); }
+.cpub-autosave-status--saved { color: var(--green-text); }
+.cpub-autosave-status--error { color: var(--red-text); }
 
 .cpub-topbar-undo-redo {
   display: flex;
@@ -785,13 +785,13 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
   box-shadow: var(--shadow-md);
 }
 .cpub-topbar-btn-primary:hover { box-shadow: var(--shadow-sm); }
-.cpub-topbar-btn-import { border-color: var(--teal); color: var(--teal); }
+.cpub-topbar-btn-import { border-color: var(--teal); color: var(--teal-text); }
 .cpub-topbar-btn-import:hover { background: var(--teal-bg, var(--surface2)); }
 
 .cpub-editor-error {
   padding: 10px 16px;
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
   border-bottom: var(--border-width-default) solid var(--red);
   font-size: 12px;
   font-family: var(--font-mono);

package/pages/u/[username]/index.vue

@@ -344,7 +344,7 @@ async function handleReport(): Promise<void> {
         <!-- Certificates -->
         <template v-if="learningData?.certificates?.length">
           <div class="cpub-sec-head">
-            <h2><i class="fa-solid fa-medal" style="color: var(--yellow); margin-right: 6px"></i>Certificates</h2>
+            <h2><i class="fa-solid fa-medal" style="color: var(--yellow-text); margin-right: 6px"></i>Certificates</h2>
           </div>
           <div class="cpub-cert-list">
             <NuxtLink
@@ -411,7 +411,7 @@ async function handleReport(): Promise<void> {
             <!-- Info -->
             <div style="margin-bottom: 32px">
               <div class="cpub-sec-head">
-                <h2><i class="fa-solid fa-circle-info" style="color: var(--teal); margin-right: 6px"></i>Details</h2>
+                <h2><i class="fa-solid fa-circle-info" style="color: var(--teal-text); margin-right: 6px"></i>Details</h2>
               </div>
               <div class="cpub-about-details">
                 <div v-if="p.location" class="cpub-about-detail"><i class="fa-solid fa-location-dot"></i> {{ p.location }}</div>
@@ -424,7 +424,7 @@ async function handleReport(): Promise<void> {
             <!-- Skills -->
             <div class="cpub-skills-section">
               <div class="cpub-sec-head">
-                <h2><i class="fa-solid fa-microchip" style="color: var(--teal); margin-right: 6px"></i>Skills</h2>
+                <h2><i class="fa-solid fa-microchip" style="color: var(--teal-text); margin-right: 6px"></i>Skills</h2>
               </div>
               <div v-if="p.skills?.length" class="cpub-tag-row" style="flex-wrap: wrap; gap: 6px;">
                 <span v-for="skill in p.skills" :key="skill" class="cpub-tag">{{ skill }}</span>
@@ -437,7 +437,7 @@ async function handleReport(): Promise<void> {
             <!-- Experience -->
             <div v-if="p.experience?.length" class="cpub-experience-section">
               <div class="cpub-sec-head">
-                <h2><i class="fa-solid fa-briefcase" style="color: var(--purple); margin-right: 6px"></i>Experience</h2>
+                <h2><i class="fa-solid fa-briefcase" style="color: var(--purple-text); margin-right: 6px"></i>Experience</h2>
               </div>
               <div class="cpub-experience-list">
                 <div v-for="(exp, idx) in p.experience" :key="idx" class="cpub-experience-item">
@@ -845,7 +845,7 @@ async function handleReport(): Promise<void> {
 .cpub-cert-list { display: flex; flex-direction: column; gap: 8px; }
 .cpub-cert-card-profile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); box-shadow: var(--shadow-md); transition: box-shadow 0.15s, transform 0.15s; }
 .cpub-cert-card-profile:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
-.cpub-cert-card-badge { width: 40px; height: 40px; border-radius: 50%; border: var(--border-width-default) solid var(--yellow); background: var(--yellow-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--yellow); flex-shrink: 0; }
+.cpub-cert-card-badge { width: 40px; height: 40px; border-radius: 50%; border: var(--border-width-default) solid var(--yellow); background: var(--yellow-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--yellow-text); flex-shrink: 0; }
 .cpub-cert-card-info { flex: 1; }
 .cpub-cert-card-path { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
 .cpub-cert-card-date { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); }

package/pages/videos/index.vue

@@ -289,10 +289,10 @@ function formatDate(dateStr: string): string {
 .cpub-live-item-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
 .cpub-live-thumb { width: 56px; height: 38px; border-radius: var(--radius); border: var(--border-width-default) solid var(--border); background: var(--red-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; position: relative; overflow: hidden; }
 .cpub-live-thumb-bg { position: absolute; inset: 0; background: var(--red-bg); }
-.cpub-live-thumb-icon { position: relative; z-index: 1; color: var(--red); }
+.cpub-live-thumb-icon { position: relative; z-index: 1; color: var(--red-text); }
 .cpub-live-title { font-size: 12px; font-weight: 600; line-height: 1.3; transition: color .1s; }
 .cpub-live-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
-.cpub-live-viewers { display: flex; align-items: center; gap: 4px; color: var(--red); }
+.cpub-live-viewers { display: flex; align-items: center; gap: 4px; color: var(--red-text); }
 .cpub-live-viewers::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: cpub-livepulse 1.5s infinite; }
 
 /* PLAYLISTS */
@@ -318,7 +318,7 @@ function formatDate(dateStr: string): string {
 .cpub-creator-subs { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
 .cpub-creator-sub-btn { font-size: 10px; font-family: var(--font-mono); padding: 5px 12px; border-radius: var(--radius); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
 .cpub-creator-sub-btn:hover { background: var(--surface2); }
-.cpub-subbed { border-color: var(--green); color: var(--green); background: var(--green-bg); }
+.cpub-subbed { border-color: var(--green); color: var(--green-text); background: var(--green-bg); }
 
 /* PAGINATION (page-specific) */
 .cpub-page-info { font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); }

package/theme/base.css

@@ -116,6 +116,27 @@
      the readable fallback. */
   --code-inline: var(--text);
 
+  /* === READABLE SEMANTIC TEXT COLORS ===
+     The raw vivid semantics (--green/--yellow/--red/--teal/--purple/--pink/--accent)
+     fail WCAG AA as small TEXT on light surfaces (≈2-4:1 — e.g. --yellow ≈2.2:1,
+     --green ≈2.3:1 on white). These -text variants mix the vivid toward --text so
+     they read ≥4.5:1 on light AND dark (the mix targets the theme's own --text, so
+     a single definition adapts per theme — deveco's green, dark mode's light text).
+     Use these for any vivid color applied as TEXT; keep the raw --vivid for fills,
+     borders, and icons over the dark badge overlay. The @supports block (after
+     :root) upgrades them to color-mix; the raw vivid is the no-color-mix fallback
+     (<5% of browsers) = today's behavior, so there is never a regression.
+     Per-color mix % is tuned to clear 4.5:1 on the lightest surface (white). */
+  --green-text: var(--green);
+  --yellow-text: var(--yellow);
+  --red-text: var(--red);
+  --teal-text: var(--teal);
+  --purple-text: var(--purple);
+  --pink-text: var(--pink);
+  /* Distinct from --color-accent-text (= white, for text ON an accent fill).
+     --accent-text is the accent usable AS text on a light surface. */
+  --accent-text: var(--accent);
+
   /* Code block tokens (GitHub Dark defaults — overridable by themes) */
   --code-bg: #0d1117;
   --code-text: #e6edf3;
@@ -321,6 +342,16 @@
 @supports (color: color-mix(in srgb, red, white)) {
   :root {
     --code-inline: color-mix(in srgb, var(--teal), var(--text) 50%);
+    /* Mix % tuned per color so each clears ≥4.5:1 on white/--surface2/own *-bg
+       (verified empirically). Mixing toward --text only lightens vivids on dark
+       themes, so the same values pass there too (6.9-10.8:1). */
+    --green-text: color-mix(in srgb, var(--green), var(--text) 50%);
+    --yellow-text: color-mix(in srgb, var(--yellow), var(--text) 50%);
+    --red-text: color-mix(in srgb, var(--red), var(--text) 25%);
+    --teal-text: color-mix(in srgb, var(--teal), var(--text) 45%);
+    --purple-text: color-mix(in srgb, var(--purple), var(--text) 20%);
+    --pink-text: color-mix(in srgb, var(--pink), var(--text) 30%);
+    --accent-text: color-mix(in srgb, var(--accent), var(--text) 40%);
   }
 }