style: strengthen solid cream surfaces

frontend/src/style.test.ts

@@ -31,21 +31,48 @@ describe('mobile navigation styles', () => {
   })
 })
 
-describe('warm Liquid Glass styling', () => {
-  it('uses shared warm glass and radius tokens with Safari support', () => {
-    expect(css).toContain('--radius-panel:28px')
-    expect(css).toContain('--glass-surface-strong:rgba(255,253,248,.84)')
-    expect(css).toContain('backdrop-filter:blur(26px) saturate(1.45) brightness(1.04)')
-    expect(css).toContain('-webkit-backdrop-filter:blur(26px) saturate(1.45) brightness(1.04)')
+describe('solid cream material system', () => {
+  it('defines three opaque cream surfaces, warm borders, restrained depth, and the radius scale', () => {
+    expect(css).toContain('--surface-canvas:#f6f0e5')
+    expect(css).toContain('--surface-base:#fff9ef')
+    expect(css).toContain('--surface-raised:#fffdf8')
+    expect(css).toContain('--border-cream:#e5d7c3')
+    expect(css).toContain('--highlight-inner:inset 0 1px 0 #fff')
+    expect(css).toContain('--radius-control:11px')
+    expect(css).toContain('--radius-card:14px')
+    expect(css).toContain('--radius-panel:20px')
   })
 
-  it('keeps list rows solid while floating the mobile navigation', () => {
-    expect(css).toContain('.bottom{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));')
-    expect(css).toContain('.bottom button.active{background:rgba(241,90,41,.1)}')
-    expect(css).toContain('@media(max-width:930px){.task-row,.habit-row,.countdown-row{min-height:62px;background:#fff;')
-    expect(css).not.toMatch(/\.task-row\{[^}]*backdrop-filter/)
-    expect(css).not.toMatch(/\.habit-row\{[^}]*backdrop-filter/)
-    expect(css).not.toMatch(/\.countdown-row\{[^}]*backdrop-filter/)
+  it('removes blur, radial glow, and legacy liquid-glass tokens', () => {
+    expect(css).not.toContain('backdrop-filter')
+    expect(css).not.toContain('radial-gradient')
+    expect(css).not.toContain('--glass-surface')
+    expect(css).not.toContain('Warm Liquid Glass')
+  })
+
+  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: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,.modal-box,.calendar-picker,.sidebar-popover,.archived-row-actions{background:var(--surface-raised)')
+    expect(css).toContain('.toast{background:#3b342c')
+    expect(css).toContain('.error-toast{background:var(--danger)')
+    expect(css).toContain('.modal-mask,.task-compose-mask,.habit-detail-mask,.countdown-detail-mask,.countdown-modal-mask,.app-sheet-mask.app-sheet-mask,.scrim,.more-mask{background:var(--scrim);')
+  })
+
+  it('keeps compact continuous lists without per-row outer shadows', () => {
+    expect(css).toContain('.task-list,.habit-list,.countdown-timeline{gap:0')
+    expect(css).toContain('.task-row,.habit-row,.countdown-row{background:var(--surface-raised);box-shadow:none')
+    expect(css).toContain('.task-row+.task-row,.habit-row+.habit-row,.countdown-row+.countdown-row{border-top:1px solid var(--border-cream)')
+  })
+
+  it('keeps controls solid, focus visible, mobile targets safe, and motion reducible', () => {
+    expect(css).toContain('input,select,textarea,.search{background:var(--surface-raised)')
+    expect(css).toContain(':focus-visible{outline:3px solid var(--focus-ring)')
+    expect(css).toContain('@media(max-width:930px){.bottom{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));')
+    expect(css).toContain('min-height:44px')
+    expect(css).toContain('@media(prefers-reduced-motion:reduce)')
   })
 })