feat: unify design tokens, five font weights, radius scale, restrained motion, AA contrast

frontend/src/style.test.ts

@@ -64,7 +64,7 @@ describe('unified task due display', () => {
 
   it('scopes content metadata and keeps date semantics without a visible calendar icon', () => {
     expect(css).toContain('.task-due--overdue{color:var(--danger)}')
-    expect(css).toContain('.task-due--neutral,.task-due--completed{color:var(--muted)}')
+    expect(css).toContain('.task-due--neutral,.task-due--completed{color:var(--text-secondary)}')
     expect(css).toContain('.task-main{border:0;background:transparent;flex:1;min-width:0;')
     expect(css).toContain('.meta-item{display:flex;align-items:center;gap:3px}')
     expect(css).not.toContain('.meta span{display:flex;')
@@ -79,22 +79,22 @@ describe('unified task due display', () => {
 
 describe('approved cream solid button system', () => {
   it('gives semantic action buttons a compact desktop size and a touch-safe mobile size', () => {
-    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 15px;border-radius:10px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease}')
+    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 15px;border-radius:var(--radius-control);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease}')
     expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button)>svg{width:16px;height:16px;flex:0 0 auto}')
     expect(css).toContain('@media(min-width:931px){main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button),.numeric-action .soft-button,.habit-history__message .soft-button,.backup-preflight .danger-button,.app-sheet__danger :is(.soft-button,.primary-small,.danger-button,.file-button,.secondary,.restore),.purge-list-dialog :is(.secondary,.danger-button){min-height:40px}}')
     expect(css).toContain('@media(max-width:930px){:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){min-height:44px;padding-inline:16px;gap:7px}:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button)>svg{width:17px;height:17px}}')
-    expect(css).toContain(':is(.primary,.primary-small){border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
-    expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button){border:1px solid #ddd0c0;background:#fffaf3;color:#51483f;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(83,62,42,.06)}')
-    expect(css).toContain('.danger-button{border:1px solid #e2b7ac;background:#fff8f5;color:#b83c2c;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(105,48,34,.05)}')
+    expect(css).toContain(':is(.primary,.primary-small){border:1px solid var(--accent);background:var(--accent);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
+    expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button){border:1px solid var(--soft-button-border-2);background:var(--row-hover);color:var(--soft-button-ink);box-shadow:inset 0 1px 0 var(--white),0 2px 5px rgba(83,62,42,.06)}')
+    expect(css).toContain('.danger-button{border:1px solid var(--danger-button-border-3);background:var(--danger-btn-bg);color:var(--danger-button-ink);box-shadow:inset 0 1px 0 var(--white),0 2px 5px rgba(105,48,34,.05)}')
   })
 
   it('provides restrained interaction, focus, and disabled states without resizing buttons', () => {
-    expect(css).toContain(':is(.primary,.primary-small):hover:not(:disabled){background:#dd4b1e;border-color:#dd4b1e}')
-    expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button):hover:not(:disabled):not(.disabled){background:#f8eddf;border-color:#d5c5b2}')
+    expect(css).toContain(':is(.primary,.primary-small):hover:not(:disabled){background:var(--accent-press);border-color:var(--accent-press)}')
+    expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button):hover:not(:disabled):not(.disabled){background:var(--soft-button-bg);border-color:var(--soft-button-border)}')
     expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):active:not(:disabled):not(.disabled){transform:translateY(1px) scale(.985)}')
     expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):focus-visible{outline:3px solid rgba(241,90,41,.24);outline-offset:3px}')
-    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):disabled,.file-button.disabled{background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;cursor:not-allowed;opacity:1}')
-    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button:disabled,.backup-preflight .danger-button:disabled,.password-form .primary-small:disabled){background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;opacity:1}')
+    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):disabled,.file-button.disabled{background:var(--disabled-bg);border-color:var(--disabled-border);color:var(--disabled-ink);box-shadow:none;cursor:not-allowed;opacity:1}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button:disabled,.backup-preflight .danger-button:disabled,.password-form .primary-small:disabled){background:var(--disabled-bg);border-color:var(--disabled-border);color:var(--disabled-ink);box-shadow:none;opacity:1}')
   })
 
   it('uses a real disabled file-picker button and keeps its input out of layout', () => {
@@ -170,12 +170,12 @@ describe('approved Settings 01 paper ledger', () => {
   })
 
   it('uses the selected continuous-paper geometry on desktop and mobile', () => {
-    expect(css).toContain('main:has(>.mvp-view .settings-sections){background:#fffdf8}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections){background:var(--surface-raised)}')
     expect(css).toContain('.settings-sections{width:min(100%,900px);margin:0 auto;display:grid;gap:0;padding:34px 0 64px}')
     expect(css).toContain('.settings-heading h1{font-size:34px;line-height:1.1;font-weight:700;')
     expect(css).toContain('.settings-group{min-width:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;padding-top:25px}')
-    expect(css).toContain('.settings-group>header{height:44px;padding:0;display:flex;align-items:center;border-bottom:1px solid #e8e0d5}')
-    expect(css).toContain('.settings-row{min-height:62px;padding:6px 0;border-top:0;border-bottom:1px solid #e8e0d5;')
+    expect(css).toContain('.settings-group>header{height:44px;padding:0;display:flex;align-items:center;border-bottom:1px solid var(--border-hairline)}')
+    expect(css).toContain('.settings-row{min-height:62px;padding:6px 0;border-top:0;border-bottom:1px solid var(--border-hairline);')
     expect(css).toContain('.settings-topbar{margin-bottom:0}')
     expect(css).not.toContain('.topbar>.settings-refresh{grid-area:filter}')
     expect(css).toContain('@media(max-width:720px){main:has(>.mvp-view .settings-sections){padding-left:29px;padding-right:29px;padding-bottom:calc(102px + env(safe-area-inset-bottom))}')
@@ -185,8 +185,8 @@ describe('approved Settings 01 paper ledger', () => {
   })
 
   it('keeps controls and password errors aligned with the approved form contract', () => {
-    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){border-radius:10px}')
-    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){border-radius:var(--radius-control)}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:var(--accent);border-color:var(--accent);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
     expect(css).toContain('main:has(>.mvp-view .settings-sections) .danger-text{min-height:44px;border:0;background:transparent;color:var(--danger)}')
     expect(css).toContain('.password-form.settings-form{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px}')
     expect(css).toContain('.password-form.settings-form .inline-error{grid-column:1/-1;margin:0}')
@@ -265,14 +265,14 @@ describe('solid cream material system', () => {
     expect(css).toContain('--text-secondary:#655b50')
     expect(css).toContain('--border-cream:#e4d5c0')
     expect(css).toContain('--accent:#f15a29')
-    expect(css).toContain('--success:#687e61')
+    expect(css).toContain('--success:#5f705a')
     expect(css).toContain('--radius-list:15px')
     expect(css).toContain('font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","PingFang SC"')
     expect(css).toContain('font-variant-numeric:tabular-nums')
     expect(css).toContain('.habit-progress-bar::-webkit-progress-value{background:var(--success)')
     expect(css).toContain('.habit-progress-bar::-moz-progress-bar{background:var(--success)')
     expect(css).not.toContain('linear-gradient(90deg,#f7a066,var(--accent))')
-    expect(css).toContain('--highlight-inner:inset 0 1px 0 #fff')
+    expect(css).toContain('--highlight-inner:inset 0 1px 0 var(--white)')
     expect(css).toContain('--radius-control:11px')
     expect(css).toContain('--radius-card:14px')
     expect(css).toContain('--radius-panel:20px')
@@ -287,13 +287,13 @@ describe('solid cream material system', () => {
 
   it('uses opaque cream surfaces for the shell, navigation, overlays, and feedback', () => {
     expect(css).toContain('.shell{background:var(--surface-base)}')
-    expect(css).toContain('.sidebar{background:#f7efe3')
+    expect(css).toContain('.sidebar{background:var(--surface-canvas)')
     expect(css).toContain('main{background:var(--surface-base)}')
     expect(css).toContain('.detail,.bottom{background:var(--surface-raised)')
     expect(css).toContain('.app-sheet,.calendar-picker,.sidebar-popover,.archived-row-actions{background:var(--surface-raised)')
-    expect(css).toContain('.toast{background:#3b342c')
+    expect(css).toContain('.toast{background:var(--surface-inverse)')
     expect(css).toContain('.error-toast{background:var(--danger)')
-    expect(css).toContain('.app-sheet-mask.app-sheet-mask{background:var(--sheet-scrim)')
+    expect(css).toContain('.app-sheet-mask.app-sheet-mask{background:var(--scrim)')
     expect(css).toContain('--scrim:rgba(45,38,31,.38)')
   })
 
@@ -392,13 +392,13 @@ describe('approved UI detail direction', () => {
   it('matches the approved paper-flow geometry and material', () => {
     expect(css).toContain('.shell.detail-open{grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) var(--detail-width,350px)}')
     expect(css).toContain('@media(max-width:1050px) and (min-width:931px){main{padding-inline:24px}')
-    expect(css).toContain('.detail{min-width:0;border-left:1px solid var(--line);background:#fffdf8;overflow:hidden;display:flex;flex-direction:column}')
+    expect(css).toContain('.detail{min-width:0;border-left:1px solid var(--border-cream);background:var(--surface-raised);overflow:hidden;display:flex;flex-direction:column}')
     expect(css).toContain('.detail-head{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;')
     expect(css).toContain('.detail-form{min-width:0;border:0;margin:0;grid-template-columns:minmax(0,1fr);padding:18px;display:grid;gap:18px;overflow-y:auto;')
     expect(css).toContain('.detail-title textarea{min-width:0;min-height:62px;padding:0;border:0;background:transparent;box-shadow:none;resize:none;outline:none;font-size:20px;line-height:27px;')
-    expect(css).toContain('.task-detail-arrangement{display:grid;gap:13px;padding-bottom:18px;border-bottom:1px solid #e4dbcf}')
+    expect(css).toContain('.task-detail-arrangement{display:grid;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--border-section)}')
     expect(css).toContain('.task-detail-date-time{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}')
-    expect(css).toContain('.task-detail-field-input{width:100%!important;min-height:44px;border-radius:10px}')
+    expect(css).toContain('.task-detail-field-input{width:100%!important;min-height:44px;border-radius:var(--radius-control)}')
     expect(css).toContain('.detail-actions{position:sticky;bottom:0;z-index:3;min-height:69px;')
     expect(css).toContain('.detail-save{min-width:88px}')
     expect(css).toContain('.subtask-detail,.after-completion-fields,.repeat-custom-fields{width:100%;max-width:100%;min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}')
@@ -484,7 +484,7 @@ describe('completion feedback motion', () => {
   })
 
   it('stacks the desktop calendar copy to align with weather and gold', () => {
-    expect(css).toContain('@media(min-width:721px){.today-environment__calendar{flex-direction:column;align-items:flex-start;gap:0}.today-environment__calendar small{margin-top:2px;font-size:10.5px}}')
+    expect(css).toContain('@media(min-width:721px){.today-environment__calendar{flex-direction:column;align-items:flex-start;gap:0}.today-environment__calendar small{margin-top:2px;font-size:11px}}')
   })
 
   it('uses the approved internal-standard login composition and material tokens', () => {
@@ -658,8 +658,8 @@ describe('mobile sheet contract', () => {
     expect(mvpPanel).toContain('panel-class="habit-detail-sheet"')
     expect(countdownPanel).toContain('panel-class="countdown-detail-sheet"')
     expect(countdownPanel).toContain('panel-class="countdown-modal"')
-    expect(css).toContain('--sheet-radius:20px;--sheet-scrim:rgba(45,38,31,.4)')
-    expect(css).toContain('.app-sheet-mask.app-sheet-mask{background:var(--sheet-scrim)')
+    expect(css).toContain('--scrim:rgba(45,38,31,.38);--radius-control:11px')
+    expect(css).toContain('.app-sheet-mask.app-sheet-mask{background:var(--scrim)')
     expect(css).toContain('.app-sheet__header{min-height:64px;')
     expect(css).toContain('.app-sheet__body{min-height:0;overflow-y:auto;')
     expect(css).toContain('.app-sheet__footer{position:sticky;bottom:0;')
@@ -669,14 +669,14 @@ describe('mobile sheet contract', () => {
   it('keeps the danger zone reserved for archived habit deletion', () => {
     expect(mvpPanel).toContain('v-if="selectedHabit.archived_at" class="app-sheet__danger habit-detail-archived-actions"')
     expect(mvpPanel).toContain('deleteHabit(selectedHabit)')
-    expect(css).toContain('.app-sheet__danger{border-top:1px solid #f1d4cd;')
+    expect(css).toContain('.app-sheet__danger{border-top:1px solid var(--app-sheet-danger-border);')
   })
 })
 
 describe('mobile list row language', () => {
   it('uses one quiet bordered row surface for tasks, habits, and countdowns on mobile', () => {
     expect(css).toContain('@media(max-width:930px){.task-row,.habit-row,.countdown-row{')
-    expect(css).toMatch(/@media\(max-width:930px\)\{\.task-row,\.habit-row,\.countdown-row\{[^}]*background:#fff;[^}]*border:1px solid var\(--line\);[^}]*border-radius:13px;[^}]*box-shadow:none/)
+    expect(css).toMatch(/@media\(max-width:930px\)\{\.task-row,\.habit-row,\.countdown-row\{[^}]*background:var\(--white\);[^}]*border:1px solid var\(--border-cream\);[^}]*border-radius:13px;[^}]*box-shadow:none/)
     expect(css).toContain('.task-list,.habit-list,.countdown-timeline{display:grid;gap:8px}')
     expect(css).toContain('.countdown-row{grid-template-columns:minmax(0,1fr) 72px;')
     expect(css).not.toContain('grid-template-columns:44px minmax(0,1fr) 72px')
@@ -1053,7 +1053,7 @@ describe('task and habit row decoration', () => {
     const desktopMain = css.slice(css.indexOf('main{container-type:inline-size;'), css.indexOf('.topbar{'))
     expect(desktopMain).toContain('overflow:auto')
     expect(css).toContain('@media(min-width:931px){main{scrollbar-width:none}main::-webkit-scrollbar{display:none}}')
-    expect(css).toContain('.detail{min-width:0;border-left:1px solid var(--line);background:#faf7f0;overflow:auto}')
+    expect(css).toContain('.detail{min-width:0;border-left:1px solid var(--border-cream);background:var(--detail-bg);overflow:auto}')
     expect(css).not.toContain('@media(max-width:930px){main{scrollbar-width:none}')
   })
 
@@ -1202,8 +1202,8 @@ describe('task and habit row decoration', () => {
   })
 
   it('uses a gentle completion treatment instead of a discarded-task strike', () => {
-    expect(css).toContain('.habit-row.done .habit-name{color:#756c61;')
-    expect(css).toContain('text-decoration-color:#d8c8bb')
+    expect(css).toContain('.habit-row.done .habit-name{color:var(--text-secondary);')
+    expect(css).toContain('text-decoration-color:var(--habit-row-strike)')
     expect(css).toContain('text-decoration-thickness:1px')
     expect(css).not.toContain('.habit-row.done .habit-name{color:var(--accent);text-decoration:line-through')
   })
@@ -1217,7 +1217,7 @@ describe('task and habit row decoration', () => {
   })
 
   it('uses a continuous bottom divider instead of card borders', () => {
-    expect(css).toMatch(/\.plain-list-row,\.plain-list>\.task-row,\.plain-list>\.habit-row\{[^}]*border:0;[^}]*border-bottom:1px solid #e8e0d5/)
+    expect(css).toMatch(/\.plain-list-row,\.plain-list>\.task-row,\.plain-list>\.habit-row\{[^}]*border:0;[^}]*border-bottom:1px solid var\(--border-hairline\)/)
     expect(css).not.toMatch(/\.plain-list-row,\.plain-list>\.task-row,\.plain-list>\.habit-row\{[^}]*border-top:/)
     expect(css).not.toMatch(/\.plain-list-row,\.plain-list>\.task-row,\.plain-list>\.habit-row\{[^}]*border-right:/)
   })
@@ -1256,7 +1256,7 @@ describe('approved habit safety and U2 title hierarchy', () => {
     expect(css).toContain('.settings-sections{width:min(100%,900px);')
     expect(css).toContain('.settings-row{min-height:62px;')
     expect(css).toContain('.backup-preflight .danger-button{min-height:44px}')
-    expect(css).toContain('.backup-preflight.invalid{background:#fff2ef;')
+    expect(css).toContain('.backup-preflight.invalid{background:var(--error-wash);')
     expect(mvpPanel).toContain("v-if=\"restoreMode==='replace'\" class=\"restore-replace-warning\"")
     expect(mvpPanel).toContain('替换恢复会覆盖当前数据，请先导出完整备份。')
   })
@@ -1344,7 +1344,7 @@ describe('habit detail paper-flow redesign', () => {
 
   it('matches the paper-flow surface and action hierarchy at desktop and touch widths', () => {
     expect(css).toContain('/* Approved habit detail 01: paper flow. */')
-    expect(css).toMatch(/\.habit-detail-hero\{[^}]*padding:[^;}]*;[^}]*border-bottom:1px solid #e4dbcf/)
+    expect(css).toMatch(/\.habit-detail-hero\{[^}]*padding:[^;}]*;[^}]*border-bottom:1px solid var\(--border-section\)/)
     expect(css).toMatch(/\.habit-detail-hero strong\{[^}]*font-size:28px/)
     expect(css).toMatch(/\.habit-detail-progress-row\{[^}]*min-height:66px;[^}]*grid-template-columns:minmax\(0,1fr\) auto/)
     expect(css).toMatch(/\.habit-detail-meta-row\{[^}]*min-height:52px;[^}]*grid-template-columns:86px minmax\(0,1fr\)/)
@@ -1367,7 +1367,7 @@ describe('task detail layout', () => {
     expect(app).toContain('<div class="task-detail-date-time">')
     expect(app).toContain('v-model="selectedDueDate" class="task-detail-due-input task-detail-field-input"')
     expect(app.match(/class="task-detail-field-input"/g)).toHaveLength(2)
-    expect(css).toContain('.task-detail-field-input{width:100%!important;min-height:44px;border-radius:10px}')
+    expect(css).toContain('.task-detail-field-input{width:100%!important;min-height:44px;border-radius:var(--radius-control)}')
     expect(css).toContain('.task-detail-due-input{padding-inline:9px!important}')
   })
 })
@@ -1485,7 +1485,7 @@ describe('unified floating add interaction', () => {
     expect(floatingAdd).toContain('<Plus />')
     expect(floatingAdd).not.toContain('fab-cat')
     expect(floatingAdd).not.toContain('pupilOffset')
-    expect(css).toContain('.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;')
+    expect(css).toContain('.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--white);')
     expect(css).toContain('.unified-fab>svg{width:25px;height:25px}')
     expect(css).not.toContain('.fab-cat__')
   })
@@ -1628,7 +1628,7 @@ describe('quiet index sidebar parity', () => {
   it('matches the approved desktop and mobile sidebar geometry and material', () => {
     expect(css).toContain('.shell{height:100vh;display:grid;grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) 0;')
     expect(css).toContain('.shell.detail-open{grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) var(--detail-width,350px)}')
-    expect(css).toContain('.sidebar{border-right:1px solid #e4d5c3;background:#f7efe3;')
+    expect(css).toContain('.sidebar{border-right:1px solid var(--border-cream);background:var(--surface-canvas);')
     expect(css).toContain('.brand-row{height:68px;')
     expect(css).toContain('border-bottom:1px solid rgba(222,205,185,.75)')
     expect(css).toContain('.primary-nav{display:grid;padding:10px 11px 8px;gap:2px}')
@@ -1639,13 +1639,13 @@ describe('quiet index sidebar parity', () => {
   })
 
   it('matches the approved quiet navigation and list hierarchy', () => {
-    expect(css).toContain('.primary-nav button.active{background:#f9e2d5;color:#b63c1b;')
+    expect(css).toContain('.primary-nav button.active{background:var(--nav-active-bg);color:var(--accent-ink);')
     expect(css).toContain('.primary-nav button.active::before,.list-row.active::before,.sidebar-management button.active::before{')
     expect(css).toContain('width:3px;height:18px;')
     expect(css).toContain('.section-title{padding:14px 15px 5px 20px;')
     expect(css).toContain('.folders{flex:1;min-height:0;padding:0 10px;')
     expect(css).toContain('.folder-row>button,.list-row-main{flex:1;min-width:0;min-height:44px;border:0;background:transparent;padding:0 8px;')
-    expect(css).toContain('.list-row.active{background:#fff8ef;color:#bc431f;box-shadow:inset 0 0 0 1px #ead5c4}')
+    expect(css).toContain('.list-row.active{background:var(--list-row-bg);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--list-row-shadow)}')
   })
 
   it('removes decorative markers from both ordinary list row renderers', () => {
@@ -1818,7 +1818,7 @@ describe('original circular floating add button', () => {
   })
 
   it('uses the original orange circle visuals and restrained motion', () => {
-    expect(css).toContain('.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;')
+    expect(css).toContain('.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--white);')
     expect(css).toContain('.unified-fab.dragging{transform:scale(1.06);')
     expect(css).toContain('.unified-fab.snapping{box-shadow:0 10px 24px rgba(241,90,41,.32)}')
     expect(css).toContain('.unified-fab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}')