@commonpub/layer 0.86.3 → 0.86.5

package/components/AppToast.vue

@@ -66,19 +66,19 @@ const { toasts, dismiss } = useToast();
 .cpub-toast--success {
   border-color: var(--green);
   background: var(--green-bg);
-  color: var(--green);
+  color: var(--green-text);
 }
 
 .cpub-toast--error {
   border-color: var(--red);
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
 }
 
 .cpub-toast--info {
   border-color: var(--accent);
   background: var(--accent-bg);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .cpub-toast-icon {

package/components/CommentSection.vue

@@ -440,7 +440,7 @@ async function deleteComment(id: string): Promise<void> {
 }
 
 .cpub-comment-delete:hover {
-  color: var(--red);
+  color: var(--red-text);
 }
 
 .cpub-comments-empty {
@@ -457,7 +457,7 @@ async function deleteComment(id: string): Promise<void> {
 
 .cpub-reply-sent {
   font-size: 12px;
-  color: var(--green, #22c55e);
+  color: var(--green-text, #22c55e);
   display: flex;
   align-items: center;
   gap: 6px;

package/components/ContentStarterForm.vue

@@ -135,7 +135,7 @@ function updateField(key: string, value: unknown): void {
 .cpub-starter-error {
   padding: 10px 14px;
   background: var(--red-bg);
-  color: var(--red);
+  color: var(--red-text);
   border: var(--border-width-default) solid var(--red);
   font-size: 0.8125rem;
   font-family: var(--font-mono);
@@ -154,7 +154,7 @@ function updateField(key: string, value: unknown): void {
   letter-spacing: 0.06em;
 }
 
-.cpub-starter-required { color: var(--red); }
+.cpub-starter-required { color: var(--red-text); }
 
 .cpub-starter-input {
   padding: 10px 14px;

package/components/CpubDateTimeField.vue

@@ -68,6 +68,6 @@ function onInput(e: Event): void {
   gap: var(--space-1);
 }
 .cpub-datetime-req {
-  color: var(--red);
+  color: var(--red-text);
 }
 </style>

package/components/DiscussionItem.vue

@@ -161,7 +161,7 @@ const lastReplyFormatted = computed((): string | null => {
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
-  color: var(--green);
+  color: var(--green-text);
   background: var(--green-bg);
   border: var(--border-width-default) solid var(--green-border);
 }

package/components/FeedItem.vue

@@ -121,7 +121,7 @@ const formattedDate = computed((): string => {
   font-size: var(--text-label);
   text-transform: uppercase;
   letter-spacing: var(--tracking-widest);
-  color: var(--accent);
+  color: var(--accent-text);
   border-bottom: var(--border-width-default) solid var(--accent-border);
 }
 
@@ -148,25 +148,25 @@ const formattedDate = computed((): string => {
 }
 
 .cpub-feed-badge-accent {
-  color: var(--accent);
+  color: var(--accent-text);
   background: var(--accent-bg);
   border-color: var(--accent-border);
 }
 
 .cpub-feed-badge-yellow {
-  color: var(--yellow);
+  color: var(--yellow-text);
   background: var(--yellow-bg);
   border-color: var(--yellow-border);
 }
 
 .cpub-feed-badge-purple {
-  color: var(--purple);
+  color: var(--purple-text);
   background: var(--purple-bg);
   border-color: var(--purple-border);
 }
 
 .cpub-feed-badge-red {
-  color: var(--red);
+  color: var(--red-text);
   background: var(--red-bg);
   border-color: var(--red-border);
 }
@@ -279,12 +279,12 @@ const formattedDate = computed((): string => {
   transition: all 0.12s;
 }
 .cpub-feed-stat-btn:hover {
-  color: var(--accent);
+  color: var(--accent-text);
   background: var(--accent-bg);
   border-color: var(--accent-border);
 }
 .cpub-feed-stat-voted {
-  color: var(--accent);
+  color: var(--accent-text);
   border-color: var(--accent-border);
 }
 </style>

package/components/ImageUpload.vue

@@ -229,7 +229,7 @@ function clearImage(): void {
 
 .cpub-img-remove {
   font-size: 0.6875rem;
-  color: var(--red);
+  color: var(--red-text);
   background: none;
   border: none;
   cursor: pointer;
@@ -244,6 +244,6 @@ function clearImage(): void {
 
 .cpub-img-error {
   font-size: 0.6875rem;
-  color: var(--red);
+  color: var(--red-text);
 }
 </style>

package/components/ImportUrlModal.vue

@@ -283,7 +283,7 @@ useFocusTrap(dialogRef, () => props.show, handleClose);
   padding: 10px 14px;
   background: var(--red-bg, rgba(255, 80, 80, 0.08));
   border: var(--border-width-default) solid var(--red, #f55);
-  color: var(--red, #f55);
+  color: var(--red-text, #f55);
   font-size: 12px;
   font-family: var(--font-mono);
   display: flex;
@@ -301,7 +301,7 @@ useFocusTrap(dialogRef, () => props.show, handleClose);
   padding: 10px 14px;
   background: var(--yellow-bg, rgba(255, 200, 50, 0.08));
   border: var(--border-width-default) solid var(--yellow, #fc3);
-  color: var(--yellow, #fc3);
+  color: var(--yellow-text, #fc3);
   font-size: 12px;
   display: flex;
   align-items: center;

package/components/LayoutRow.vue

@@ -760,7 +760,7 @@ const isOver = computed<boolean>(() => isDragOver.value !== undefined);
   opacity: 1;
 }
 .cpub-layout-row-remove:hover {
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red);
   background: var(--red-bg, var(--surface));
 }

package/components/MemberCard.vue

@@ -139,13 +139,13 @@ const joinedFormatted = computed((): string => {
 }
 
 .cpub-member-role-owner {
-  color: var(--red);
+  color: var(--red-text);
   background: var(--red-bg);
   border-color: var(--red-border);
 }
 
 .cpub-member-role-mod {
-  color: var(--purple);
+  color: var(--purple-text);
   background: var(--purple-bg);
   border-color: var(--purple-border);
 }

package/components/MirrorDetailModal.vue

@@ -190,7 +190,7 @@ async function remove(): Promise<void> {
 .cpub-modal-close:hover { color: var(--text); }
 
 .cpub-mm-sub { font-size: 0.8125rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; }
-.cpub-mm-dir { font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
+.cpub-mm-dir { font-weight: 700; color: var(--accent-text); font-family: var(--font-mono); }
 
 .cpub-mm-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 16px; border: var(--border-width-default) solid var(--border); }
 .cpub-mm-facts > div { display: flex; gap: 12px; padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); font-size: 0.8125rem; }
@@ -199,9 +199,9 @@ async function remove(): Promise<void> {
 .cpub-mm-facts dd { flex: 1; min-width: 0; margin: 0; word-break: break-word; }
 .cpub-mm-mono { font-family: var(--font-mono); font-size: 0.75rem; }
 .cpub-mm-faint { color: var(--text-faint); }
-.cpub-mm-chip { display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; margin: 0 4px 4px 0; border: var(--border-width-default) solid var(--accent-border); background: var(--accent-bg); color: var(--accent); }
+.cpub-mm-chip { display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; margin: 0 4px 4px 0; border: var(--border-width-default) solid var(--accent-border); background: var(--accent-bg); color: var(--accent-text); }
 
-.cpub-mm-error { font-size: 0.75rem; color: var(--red); background: var(--surface2); padding: 8px 12px; margin-bottom: 16px; border: var(--border-width-default) solid var(--red); word-break: break-word; }
+.cpub-mm-error { font-size: 0.75rem; color: var(--red-text); background: var(--surface2); padding: 8px 12px; margin-bottom: 16px; border: var(--border-width-default) solid var(--red); word-break: break-word; }
 
 .cpub-mm-section { margin-bottom: 16px; }
 .cpub-mm-label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
@@ -209,7 +209,7 @@ async function remove(): Promise<void> {
 .cpub-mm-hint { font-size: 0.75rem; color: var(--text-faint); margin-top: 6px; line-height: 1.4; }
 
 .cpub-modal-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: var(--border-width-default) solid var(--border); padding-top: 16px; }
-.cpub-mm-confirm { font-size: 0.8125rem; color: var(--red); font-family: var(--font-mono); }
+.cpub-mm-confirm { font-size: 0.8125rem; color: var(--red-text); font-family: var(--font-mono); }
 
 /* Shared federation control styles (also defined on the page; repeated here for the modal's scope). */
 .cpub-fed-input { flex: 1; padding: 8px 12px; font-family: var(--font-mono); font-size: 0.8125rem; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); }
@@ -217,14 +217,14 @@ async function remove(): Promise<void> {
 .cpub-fed-btn:hover { box-shadow: none; transform: translate(2px, 2px); }
 .cpub-fed-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
 .cpub-fed-btn-sm { padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; background: transparent; border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
-.cpub-fed-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-fed-btn-sm:hover { border-color: var(--accent); color: var(--accent-text); }
 .cpub-fed-btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
-.cpub-fed-btn-danger { color: var(--red); border-color: var(--red); }
-.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red); background: var(--surface2); }
+.cpub-fed-btn-danger { color: var(--red-text); border-color: var(--red); }
+.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red-text); background: var(--surface2); }
 .cpub-fed-status { font-size: 10px; font-weight: 600; padding: 2px 6px; text-transform: uppercase; font-family: var(--font-mono); border: var(--border-width-default) solid var(--border); }
-.cpub-fed-status.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.cpub-fed-status.active { color: var(--accent-text); 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-result { margin-top: 8px; padding: 10px 14px; font-size: 0.8125rem; font-family: var(--font-mono); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); color: var(--text); }
 </style>

package/components/MirrorRequestApproveModal.vue

@@ -160,6 +160,6 @@ async function reject(): Promise<void> {
 .cpub-fed-btn-sm { padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; background: transparent; border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
 .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 { color: var(--red); border-color: var(--red); }
-.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red); background: var(--surface2); }
+.cpub-fed-btn-danger { color: var(--red-text); border-color: var(--red); }
+.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red-text); background: var(--surface2); }
 </style>

package/components/PostVoteButtons.vue

@@ -92,8 +92,8 @@ async function vote(direction: VoteDirection): Promise<void> {
 .cpub-vote-btn:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
 .cpub-vote-btn:disabled { opacity: 0.3; cursor: default; }
 .cpub-vote-btn.active { color: var(--accent); }
-.cpub-vote-up.active { color: var(--green, var(--accent)); }
-.cpub-vote-down.active { color: var(--red, var(--accent)); }
+.cpub-vote-up.active { color: var(--green-text, var(--accent)); }
+.cpub-vote-down.active { color: var(--red-text, var(--accent)); }
 
 .cpub-vote-score {
   font-family: var(--font-mono);
@@ -103,6 +103,6 @@ async function vote(direction: VoteDirection): Promise<void> {
   min-width: 20px;
   text-align: center;
 }
-.cpub-vote-score.positive { color: var(--green, var(--accent)); }
-.cpub-vote-score.negative { color: var(--red); }
+.cpub-vote-score.positive { color: var(--green-text, var(--accent)); }
+.cpub-vote-score.negative { color: var(--red-text); }
 </style>

package/components/PublishErrorsModal.vue

@@ -60,7 +60,7 @@ useFocusTrap(dialogRef, () => props.show, () => emit('dismiss'));
   font-family: var(--font-mono);
   font-size: 1.125rem;
   font-weight: 700;
-  color: var(--red);
+  color: var(--red-text);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -96,7 +96,7 @@ useFocusTrap(dialogRef, () => props.show, () => emit('dismiss'));
 }
 .cpub-publish-errors-list li::before {
   content: '\2022';
-  color: var(--red);
+  color: var(--red-text);
   font-weight: 700;
 }
 

package/components/RegistryDirectory.vue

@@ -126,10 +126,10 @@ async function setStatus(row: RegistryRow, status: 'active' | 'hidden' | 'blocke
 .cpub-fed-btn { padding: 8px 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; background: var(--accent); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--accent); box-shadow: var(--shadow-sm); }
 .cpub-fed-btn:hover { box-shadow: none; transform: translate(2px, 2px); }
 .cpub-fed-btn-sm { padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; background: transparent; border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
-.cpub-fed-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-fed-btn-sm:hover { border-color: var(--accent); color: var(--accent-text); }
 .cpub-fed-btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
-.cpub-fed-btn-danger { color: var(--red); border-color: var(--red); }
-.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red); background: var(--surface2); }
+.cpub-fed-btn-danger { color: var(--red-text); border-color: var(--red); }
+.cpub-fed-btn-danger:hover { border-color: var(--red); color: var(--red-text); background: var(--surface2); }
 .cpub-fed-activity-list { display: flex; flex-direction: column; }
 .cpub-fed-activity-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: var(--border-width-default) solid var(--border); font-size: 0.8125rem; }
 .cpub-fed-type { font-weight: 600; color: var(--text); }
@@ -137,5 +137,5 @@ async function setStatus(row: RegistryRow, status: 'active' | 'hidden' | 'blocke
 .cpub-fed-empty { color: var(--text-faint); padding: 16px 0; font-size: 0.8125rem; }
 .cpub-fed-status { font-size: 10px; font-weight: 600; padding: 2px 6px; text-transform: uppercase; font-family: var(--font-mono); border: var(--border-width-default) solid var(--border); }
 .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); }
 </style>

package/components/RemoteFollowDialog.vue

@@ -107,6 +107,6 @@ useFocusTrap(dialogRef, () => open.value, close);
   border: var(--border-width-default) solid var(--border);
   background: var(--surface); color: var(--text);
 }
-.cpub-rfd-error { font-size: 11px; color: var(--red, #ef4444); margin: 0; }
+.cpub-rfd-error { font-size: 11px; color: var(--red-text, #ef4444); margin: 0; }
 .cpub-rfd-actions { display: flex; justify-content: flex-end; gap: 8px; }
 </style>

package/components/SearchSidebar.vue

@@ -124,7 +124,7 @@ const { hubs: hubsEnabled } = useFeatures();
   font-size: 10px; font-family: var(--font-mono); display: flex; align-items: center; gap: 3px;
 }
 
-.trend-up { color: var(--green); }
+.trend-up { color: var(--green-text); }
 .trend-down { color: var(--text-faint); }
 
 .cpub-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }

package/components/admin/layouts/AdminLayoutsAutoForm.vue

@@ -292,7 +292,7 @@ function groupValue(field: AutoFormField): Record<string, unknown> {
   color: var(--text-dim);
   font-weight: var(--font-weight-semibold);
 }
-.cpub-autoform-required { color: var(--red); margin-left: 2px; }
+.cpub-autoform-required { color: var(--red-text); margin-left: 2px; }
 .cpub-autoform-count {
   color: var(--text-faint);
   font-weight: var(--font-weight-normal);
@@ -326,7 +326,7 @@ function groupValue(field: AutoFormField): Record<string, unknown> {
 }
 .cpub-autoform-error {
   font-size: var(--text-xs);
-  color: var(--red);
+  color: var(--red-text);
   margin: 0;
 }
 .cpub-autoform-unsupported {
@@ -395,7 +395,7 @@ function groupValue(field: AutoFormField): Record<string, unknown> {
   cursor: pointer;
   font-size: var(--text-xs);
 }
-.cpub-autoform-array-remove:hover { color: var(--red); border-color: var(--red); }
+.cpub-autoform-array-remove:hover { color: var(--red-text); border-color: var(--red); }
 .cpub-autoform-array-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 .cpub-autoform-array-add {

package/components/admin/layouts/AdminLayoutsConflictModal.vue

@@ -201,7 +201,7 @@ onBeforeUnmount(() => {
 }
 .cpub-admin-layouts-conflict-icon {
   font-size: var(--text-xl);
-  color: var(--red);
+  color: var(--red-text);
 }
 .cpub-admin-layouts-conflict-title {
   font-size: var(--text-lg);
@@ -259,7 +259,7 @@ onBeforeUnmount(() => {
   color: var(--surface);
 }
 .cpub-admin-layouts-conflict-btn--danger {
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red);
 }
 .cpub-admin-layouts-conflict-btn--danger:hover { background: var(--red); color: var(--surface); }

package/components/admin/layouts/AdminLayoutsInspectorSection.vue

@@ -164,7 +164,7 @@ function onUpdate(value: Record<string, unknown>): void {
   background: var(--yellow-bg);
   border-color: var(--yellow-border);
 }
-.cpub-inspector-section-unknown i { color: var(--yellow); margin-top: 2px; }
+.cpub-inspector-section-unknown i { color: var(--yellow-text); margin-top: 2px; }
 .cpub-inspector-section-unknown code {
   font-family: var(--font-mono);
   background: var(--surface);

package/components/admin/layouts/AdminLayoutsToolbar.vue

@@ -446,7 +446,7 @@ const VIEWPORTS: Array<{ value: 'mobile' | 'tablet' | 'desktop'; icon: string; l
 .cpub-admin-layouts-toolbar-indicator[data-tone='neutral'] { color: var(--text-dim); }
 .cpub-admin-layouts-toolbar-indicator[data-tone='pending'] { color: var(--text-dim); }
 .cpub-admin-layouts-toolbar-indicator[data-tone='success'] { color: var(--accent); }
-.cpub-admin-layouts-toolbar-indicator[data-tone='error'] { color: var(--red); }
+.cpub-admin-layouts-toolbar-indicator[data-tone='error'] { color: var(--red-text); }
 
 .cpub-admin-layouts-toolbar-actions { display: inline-flex; gap: var(--space-2); }
 

package/components/admin/theme/AdminThemeFamilyCard.vue

@@ -247,7 +247,7 @@ function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'reg
   color: var(--text-dim);
 }
 .tag-custom { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
-.tag-registered { color: var(--purple); border-color: var(--purple-border); background: var(--purple-bg); }
+.tag-registered { color: var(--purple-text); border-color: var(--purple-border); background: var(--purple-bg); }
 
 .theme-family-active {
   margin-left: auto;
@@ -277,7 +277,7 @@ function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'reg
 }
 
 .theme-family-action-danger {
-  color: var(--red);
+  color: var(--red-text);
   border-color: var(--red-border);
 }
 .theme-family-action-danger:hover { background: var(--red-bg); }

package/components/admin/theme/AdminThemeOverridesPanel.vue

@@ -193,7 +193,7 @@ function looksLikeColor(value: string): boolean {
   flex-shrink: 0;
 }
 .admin-override-remove { flex-shrink: 0; padding: var(--space-1); color: var(--text-faint); }
-.admin-override-remove:hover { color: var(--red); }
+.admin-override-remove:hover { color: var(--red-text); }
 
 .admin-override-add {
   display: flex;

package/components/admin/theme/AdminThemeSceneAdmin.vue

@@ -160,8 +160,8 @@
 }
 .scene-admin-stat-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); }
 .scene-admin-stat-value { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text); }
-.scene-admin-stat-delta { font-size: var(--text-sm); color: var(--green); }
-.scene-admin-stat-delta.tone-warn { color: var(--yellow); }
+.scene-admin-stat-delta { font-size: var(--text-sm); color: var(--green-text); }
+.scene-admin-stat-delta.tone-warn { color: var(--yellow-text); }
 
 .scene-admin-h2 { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--text); margin: 0 0 var(--space-2); }
 .scene-admin-table-wrap { background: var(--surface); border: var(--border-width-default) solid var(--border); overflow: hidden; }
@@ -178,9 +178,9 @@
   text-transform: uppercase;
   border: var(--border-width-thin) solid var(--border2);
 }
-.scene-admin-pill.tone-green { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
-.scene-admin-pill.tone-yellow { color: var(--yellow); background: var(--yellow-bg); border-color: var(--yellow-border); }
-.scene-admin-pill.tone-red { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
+.scene-admin-pill.tone-green { color: var(--green-text); background: var(--green-bg); border-color: var(--green-border); }
+.scene-admin-pill.tone-yellow { color: var(--yellow-text); background: var(--yellow-bg); border-color: var(--yellow-border); }
+.scene-admin-pill.tone-red { color: var(--red-text); background: var(--red-bg); border-color: var(--red-border); }
 
 @media (max-width: 540px) {
   .scene-admin-side { width: 50px; }

package/components/admin/theme/AdminThemeSceneSheet.vue

@@ -216,8 +216,8 @@ const contrastReadout = computed<{ ratio: string; band: string; ok: boolean } |
 .cpub-sheet-contrast-tag { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); }
 .cpub-sheet-contrast-val { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--font-weight-bold); }
 .cpub-sheet-badge { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--font-weight-bold); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-thin) solid; }
-.cpub-sheet-badge.ok { color: var(--green); border-color: var(--green); }
-.cpub-sheet-badge.err { color: var(--red); border-color: var(--red); }
+.cpub-sheet-badge.ok { color: var(--green-text); border-color: var(--green); }
+.cpub-sheet-badge.err { color: var(--red-text); border-color: var(--red); }
 
 .cpub-sheet-roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
 .cpub-sheet-role { border: var(--border-width-thin) solid var(--border2); border-left: var(--border-width-thick) solid var(--accent); padding: var(--space-4); background: var(--surface); }

package/components/admin/theme/studio/AdminThemeStudio.vue

@@ -722,7 +722,7 @@ function finishWith(apply: boolean): void {
 .cpub-studio-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-width-default) solid var(--border); }
 .cpub-studio-audit { display: flex; gap: 4px; margin-left: auto; }
 .cpub-studio-chip { font-family: var(--font-mono); font-size: 9px; font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px 6px; border: var(--border-width-thin) solid; }
-.cpub-studio-chip.ok { color: var(--green); border-color: var(--green); }
-.cpub-studio-chip.bad { color: var(--red); border-color: var(--red); }
+.cpub-studio-chip.ok { color: var(--green-text); border-color: var(--green); }
+.cpub-studio-chip.bad { color: var(--red-text); border-color: var(--red); }
 .cpub-studio-foot .cpub-btn-primary { margin-left: var(--space-2); }
 </style>

package/components/blocks/BlockCalloutView.vue

@@ -51,9 +51,9 @@ const config = computed(() => variantConfig[variant.value] ?? variantConfig.info
 }
 
 .cpub-callout--info .cpub-callout-icon { color: var(--accent); }
-.cpub-callout--tip .cpub-callout-icon { color: var(--green); }
-.cpub-callout--warning .cpub-callout-icon { color: var(--yellow); }
-.cpub-callout--danger .cpub-callout-icon { color: var(--red); }
+.cpub-callout--tip .cpub-callout-icon { color: var(--green-text); }
+.cpub-callout--warning .cpub-callout-icon { color: var(--yellow-text); }
+.cpub-callout--danger .cpub-callout-icon { color: var(--red-text); }
 
 .cpub-callout-body { flex: 1; min-width: 0; }
 
@@ -67,9 +67,9 @@ const config = computed(() => variantConfig[variant.value] ?? variantConfig.info
 }
 
 .cpub-callout--info .cpub-callout-label { color: var(--accent); }
-.cpub-callout--tip .cpub-callout-label { color: var(--green); }
-.cpub-callout--warning .cpub-callout-label { color: var(--yellow); }
-.cpub-callout--danger .cpub-callout-label { color: var(--red); }
+.cpub-callout--tip .cpub-callout-label { color: var(--green-text); }
+.cpub-callout--warning .cpub-callout-label { color: var(--yellow-text); }
+.cpub-callout--danger .cpub-callout-label { color: var(--red-text); }
 
 .cpub-callout-text {
   font-size: 14px;

package/components/blocks/BlockCheckpointView.vue

@@ -34,7 +34,7 @@ onMounted(() => {
   border: var(--border-width-default) solid var(--green);
   margin: 24px 0;
   font-size: 13px;
-  color: var(--green);
+  color: var(--green-text);
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.4s ease, transform 0.4s ease;

package/components/blocks/BlockCompareColumnsView.vue

@@ -70,15 +70,15 @@ const toneIcon = (tone: CompareTone): string =>
   display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
   font-size: var(--text-sm); font-weight: 700;
 }
-.cpub-cmp-positive .cpub-cmp-col-head { color: var(--green); }
-.cpub-cmp-negative .cpub-cmp-col-head { color: var(--red); }
+.cpub-cmp-positive .cpub-cmp-col-head { color: var(--green-text); }
+.cpub-cmp-negative .cpub-cmp-col-head { color: var(--red-text); }
 .cpub-cmp-neutral .cpub-cmp-col-head { color: var(--accent); }
 
 .cpub-cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
 .cpub-cmp-item { display: flex; gap: 9px; font-size: var(--text-sm); line-height: 1.55; color: var(--text-dim); }
 .cpub-cmp-item-icon { flex-shrink: 0; margin-top: 3px; font-size: 12px; }
-.cpub-cmp-positive .cpub-cmp-item-icon { color: var(--green); }
-.cpub-cmp-negative .cpub-cmp-item-icon { color: var(--red); }
+.cpub-cmp-positive .cpub-cmp-item-icon { color: var(--green-text); }
+.cpub-cmp-negative .cpub-cmp-item-icon { color: var(--red-text); }
 .cpub-cmp-neutral .cpub-cmp-item-icon { color: var(--accent); }
 
 .cpub-cmp-note {

package/components/blocks/BlockQuizView.vue

@@ -105,7 +105,7 @@ function optionClass(idx: number): string {
   font-family: var(--font-mono);
   font-size: 9px;
   letter-spacing: 0.08em;
-  color: var(--yellow);
+  color: var(--yellow-text);
   background: var(--yellow-bg);
   border: var(--border-width-default) solid var(--yellow-border);
   padding: 3px 8px;
@@ -184,9 +184,9 @@ function optionClass(idx: number): string {
   margin-top: 1px;
 }
 
-.cpub-quiz-option.selected-correct .cpub-quiz-option-key { color: var(--green); }
-.cpub-quiz-option.selected-wrong .cpub-quiz-option-key { color: var(--red); }
-.cpub-quiz-option.reveal-correct .cpub-quiz-option-key { color: var(--green); }
+.cpub-quiz-option.selected-correct .cpub-quiz-option-key { color: var(--green-text); }
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-key { color: var(--red-text); }
+.cpub-quiz-option.reveal-correct .cpub-quiz-option-key { color: var(--green-text); }
 
 .cpub-quiz-option-text {
   font-size: 13px;
@@ -195,8 +195,8 @@ function optionClass(idx: number): string {
   flex: 1;
 }
 
-.cpub-quiz-option.selected-correct .cpub-quiz-option-text { color: var(--green); }
-.cpub-quiz-option.selected-wrong .cpub-quiz-option-text { color: var(--red); }
+.cpub-quiz-option.selected-correct .cpub-quiz-option-text { color: var(--green-text); }
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-text { color: var(--red-text); }
 
 .cpub-quiz-option-indicator {
   font-size: 12px;
@@ -212,9 +212,9 @@ function optionClass(idx: number): string {
   opacity: 1;
 }
 
-.cpub-quiz-option.selected-correct .cpub-quiz-option-indicator { color: var(--green); }
-.cpub-quiz-option.selected-wrong .cpub-quiz-option-indicator { color: var(--red); }
-.cpub-quiz-option.reveal-correct .cpub-quiz-option-indicator { color: var(--green); }
+.cpub-quiz-option.selected-correct .cpub-quiz-option-indicator { color: var(--green-text); }
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-indicator { color: var(--red-text); }
+.cpub-quiz-option.reveal-correct .cpub-quiz-option-indicator { color: var(--green-text); }
 
 .cpub-quiz-feedback {
   margin-top: 14px;
@@ -228,12 +228,12 @@ function optionClass(idx: number): string {
 .cpub-quiz-feedback.correct {
   background: var(--green-bg);
   border: var(--border-width-default) solid var(--green-border);
-  color: var(--green);
+  color: var(--green-text);
 }
 
 .cpub-quiz-feedback.wrong {
   background: var(--red-bg);
   border: var(--border-width-default) solid var(--red-border);
-  color: var(--red);
+  color: var(--red-text);
 }
 </style>

package/components/blocks/BlockSliderView.vue

@@ -214,21 +214,21 @@ const stateIcons: Record<string, string> = {
 .cpub-slider-output.state-low {
   background: var(--yellow-bg);
   border: var(--border-width-default) solid var(--yellow-border);
-  color: var(--yellow);
+  color: var(--yellow-text);
 }
 
 .cpub-slider-output.state-ok,
 .cpub-slider-output.state-good {
   background: var(--green-bg);
   border: var(--border-width-default) solid var(--green-border);
-  color: var(--green);
+  color: var(--green-text);
 }
 
 .cpub-slider-output.state-high,
 .cpub-slider-output.state-danger {
   background: var(--red-bg);
   border: var(--border-width-default) solid var(--red-border);
-  color: var(--red);
+  color: var(--red-text);
 }
 
 .cpub-slider-output i { font-size: 13px; flex-shrink: 0; }

package/components/contest/ContestCriteriaEditor.vue

@@ -74,6 +74,6 @@ function remove(i: number): void {
 .cpub-criteria-main .cpub-input { flex: 1; }
 .cpub-criteria-pts { max-width: 80px; flex: none !important; text-align: center; }
 .cpub-criteria-del { background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0 9px; flex-shrink: 0; }
-.cpub-criteria-del:hover { border-color: var(--red-border); color: var(--red); }
+.cpub-criteria-del:hover { border-color: var(--red-border); color: var(--red-text); }
 .cpub-criteria-desc { font-size: var(--text-xs); }
 </style>